README.md 7.6 KB
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矢量服务的清单，以及请求示例
- 给席明豪，进行功能实现