qp_onemap_business_component

qp_onemap_business_component

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

政务网一张图2024业务场景

场景模式

• 能够形成组件的以组件的形式进行开发，本次均为业务展示类型组件，包含一下业务场景
  • 特色古镇浏览（文旅）- 组件
  • 应急场景模拟（应急）- 组件
  • 日常巡查模拟（城运）- 组件
  • 用水、燃气场景介绍（民生）- 组件
  • 三维人房企查询与介绍（人房企）- 组件
  • 一张图归集数据周边+框选+图层选择（一张图）- 2024内部
• 所有组件的前端UI的宽高，不要写死，均为填充

特色古镇浏览

• 目的：体现出文旅特色，点击后进行特色古镇浏览+介绍+漫游
• 本场景以组件库的形式进行开发，可配置项有三
  • 地图底图地址
  • 三维模型地址数组
  • 古镇介绍内容
  • 漫游路线-张晗
    

功能介绍

特色景点推荐+介绍+漫游

• 在2024中，点击特色古镇，跳转新界面
• 界面初始化，加载常规色底图，加载蟠龙天地三维模型
• 古镇中心添加包含动画的mark点，点击后显示古镇介绍
• 右上角添加漫游按钮，点击后进行固定路线漫游，持续时间大概30秒，中途可打断

步骤

• 万德全提供支持
  • 引擎初始化demo
  • 加载地图demo
  • 加载三维模型demo
  • 悬浮mark demo
  • 漫游demo
• 席明豪实现

应急模拟

• 目的：体现出一张图能力在应急场景中的应用模拟效果
• 本场景以组件的形式进行开发，可配置项有二
  • 三维载具模型地址
  • 地图底图地址
  • 是否包含水火特效

功能介绍

应急+路径规划+模拟 ，消防车-张晗

• 在2024中，点击应急模拟，跳转新界面
• 界面初始化，加载常规色底图，
• 右上角添加开始模拟按钮
  • 点击后，先进行路径规划，路径规划弹窗参考2024中路径规划按钮
  • 路径规划完成后，绘制路线，进行应急模拟
  • 模拟开始后，http://121.43.55.7:65456/model/车辆/消防车.gltf
  • 加载载具三维模型，开始模拟载具运行，参考地址：http://121.43.55.7:2001/skyscenery_example/example/editor.html?#f30_particleSystem
  • 目的地添加火焰例子效果，进行火焰模拟
  • 载具到达目的地后开始进行作业，开启粒子效果，持续6秒。
  • 从载具位置，开始进行水流粒子效果，进行水流模拟，目标火焰粒子效果
  • 持续3秒水流粒子效果后，火焰开始减少，
  • 再过2秒后，火焰消失
  • 再过1秒后，关闭所有特效，弹出弹窗，“作业完成，起火点已熄灭！”
  • 模拟完成
    

#### 步骤

• 万德全实现

日常巡查

• 目的：模拟城运或城管人员开车进行道路巡检工作，对于违法乱纪等事件进行处置
• 本场景以组件的形式进行开发，可配置项有三
  • 三维载具模型地址
  • 巡查路线
  • 浮窗内容数组
  • 地图底图地址

功能介绍

路线+巡查轨迹+模拟 ，警车-张晗，http://121.43.55.7:65456/model/车辆/警车_30.gltf

• 在2024中，点击日常巡查，跳转新界面
• 界面初始化，加载常规色底图
• 右上角添加开始巡查按钮
• 加载载具三维模型，加载路线并绘制
• 开始载具运行模拟，参考地址同上
• 到达目的地后，加载两个人形三维模型，参考地址：http://121.43.55.7:2001/skyscenery_example/example/editor.html?#f65_roamLine_walk
• 根据人员浮窗，逐步显示对话内容，
• 最后弹窗提示，”事件处置完成“
• 模拟完成

步骤

• 万德全实现

用水、燃气场景介绍

• 目的：根据用水、燃气的用户使用量，制作点位图+热力图图层，进行图层叠加展示，并根据多边形、圆形（半径）进行wfs数据查询
• 本场景以组件形式进行开发，可配置项有一
  • 动态热力强度图颜色、半径配置数组
  • 地图底图地址

功能介绍

用水+燃气热力图+居委单位

• 在2024中，点击用水/燃气，跳转新界面
• 界面初始化，加载最新影像图，加载右侧柱状图，点击可查看饼状图
• 左侧添加用水、燃气居民用气量、燃气非居民用气量，点位图层加载
  • 点击点位后，浮窗显示详细内容
• 左侧添加用水、燃气居民用气量、燃气非居民用气量，热力图图层加载
  • 三个图层的热力分布，采用“动态强度图”参考cartodb
  • 动态强度图使用不同颜色区分，添加三个图层的图例
• 多边形查询，根据框选范围，或半径查询范围，右侧显示各街镇的用水、非居民用气、居民用气柱状图
  • 三个图层均进行查询，通过三个间隔模块进行业务数据展示
  • 用水分布柱状图，使用水量每月立方米
  • 非居民用气量柱状图，消费量
  • 居民用气量柱状图，消费量
  • 柱状图点击后
  • 展示该街镇下各居委的对应模块的用量饼状图，
  • 添加返回按钮，返回值柱状图
  • 显示该街镇总用量数额

数据来源

• 资源平台申请以下资源

步骤

• 万德全提供
  • 加载点位的图层，点位点击浮窗
  • 加载热力图图层
• 张乃文提供
  • 水、燃气居民、燃气非居民数据
• 席明豪
  • 数据自己跑经纬度
  • 跑完数据给张乃文，乃文发三个wfs服务
  • 实现其他

三维人房企

• 目的：根据青浦三维白膜，以及建筑物面数据，进行人房企数据查询及展示功能
• 本场景以组件形式进行开发，无配置项
  • 地图底图地址

功能介绍

三维白膜+框选+数据统计

• 在2024中，点击三维人房企按钮，跳转至新界面
• 界面初始化
  • 加载暗色底图
  • 加载青浦三维白膜
  • 加载全透明的建筑物面矢量图层
• 点击某白膜，模型高亮，实际点击的是透明的建筑物面矢量数据
  • 根据建筑物面数据中的编号，展示武大吉奥的组件
• 右侧添加框选范围，根据多边形、圆形（半径）查询
  • 查询建筑物面中框选结果，根据结果变化或四至（待定），展示武大吉奥的组件

步骤

• 万德全实现

周边查询

• 目的，一张图归集的矢量数据，进行整体查询，查询方式，根据多边形，圆形（半径）进行wfs数据查询，并把数据进行分页展示
• 本场景在2024内部开发，非组件，为功能

功能介绍

归集数据查询按钮+周边+框选

• 在2024中，添加周边查询按钮
• 点击查询后，绘制几何范围，共两种方式，多边形、圆形+半径
• 绘制完成后，根据图层列表，进行图层数据勾选，点击查询
• 查询结果以弹出展示，根据所勾选的图层数量，弹出分为多个tab页
• 每个tab页顶部显示图层名称，内容为wfs查询到数据的表格化展示形式，如数据过多，自带分页效果，每页20条数据
• wfs服务清单，由张乃文进行统计，并提供请求示例

步骤

• 张乃文，统计2024矢量服务的清单，以及请求示例
• 给席明豪，进行功能实现