# 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 - 动态强度图使用不同颜色区分,添加三个图层的图例 - 多边形查询,根据框选范围,或半径查询范围,右侧显示各街镇的用水、非居民用气、居民用气柱状图 - 三个图层均进行查询,通过三个间隔模块进行业务数据展示 - 用水分布柱状图,使用水量每月立方米 - 非居民用气量柱状图,消费量 - 居民用气量柱状图,消费量 - 柱状图点击后 - 展示该街镇下各居委的对应模块的用量饼状图, - 添加返回按钮,返回值柱状图 - 显示该街镇总用量数额 #### 数据来源 - 资源平台申请以下资源 ![image-20250804113527405](C:\Users\28224\AppData\Roaming\Typora\typora-user-images\image-20250804113527405.png) ![image-20250804113543201](C:\Users\28224\AppData\Roaming\Typora\typora-user-images\image-20250804113543201.png) ![image-20250804113552901](C:\Users\28224\AppData\Roaming\Typora\typora-user-images\image-20250804113552901.png) #### 步骤 - 万德全提供 - 加载点位的图层,点位点击浮窗 - 加载热力图图层 - 张乃文提供 - 水、燃气居民、燃气非居民数据 - 席明豪 - 数据自己跑经纬度 - 跑完数据给张乃文,乃文发三个wfs服务 - 实现其他 ### 三维人房企 - 目的:根据青浦三维白膜,以及建筑物面数据,进行人房企数据查询及展示功能 - 本场景以组件形式进行开发,无配置项 - 地图底图地址 #### 功能介绍 三维白膜+框选+数据统计 - 在2024中,点击三维人房企按钮,跳转至新界面 - 界面初始化 - 加载暗色底图 - 加载青浦三维白膜 - 加载全透明的建筑物面矢量图层 - 点击某白膜,模型高亮,实际点击的是透明的建筑物面矢量数据 - 根据建筑物面数据中的编号,展示武大吉奥的组件 - 右侧添加框选范围,根据多边形、圆形(半径)查询 - 查询建筑物面中框选结果,根据结果变化或四至(待定),展示武大吉奥的组件 #### 步骤 - 万德全实现 ### 周边查询 - 目的,一张图归集的矢量数据,进行整体查询,查询方式,根据多边形,圆形(半径)进行wfs数据查询,并把数据进行分页展示 - 本场景在2024内部开发,非组件,为功能 #### 功能介绍 归集数据查询按钮+周边+框选 - 在2024中,添加周边查询按钮 - 点击查询后,绘制几何范围,共两种方式,多边形、圆形+半径 - 绘制完成后,根据图层列表,进行图层数据勾选,点击查询 - 查询结果以弹出展示,根据所勾选的图层数量,弹出分为多个tab页 - 每个tab页顶部显示图层名称,内容为wfs查询到数据的表格化展示形式,如数据过多,自带分页效果,每页20条数据 - wfs服务清单,由张乃文进行统计,并提供请求示例 #### 步骤 - 张乃文,统计2024矢量服务的清单,以及请求示例 - 给席明豪,进行功能实现