| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted, onBeforeUnmount, watch, onUnmounted } from "vue"; |
| | | import { |
| | | ref, |
| | | onMounted, |
| | | watch, |
| | | nextTick, |
| | | onUnmounted, |
| | | computed, |
| | | watchEffect, |
| | | } from "vue"; |
| | | import { createPoint, removeEntities, addTileset } from "@/utils/map"; |
| | | import { deviceDictList, getDictName } from "@/constant/dict.js"; |
| | | import { useRoute } from "vue-router"; |
| | | import { loadAreaPolygon, clearAreaPolygon } from "@/utils/area"; |
| | | import { checkedKeys } from "@/store/index"; |
| | | import { getDuanMainData } from "@/api/index.js"; |
| | | import { getDuanMainData, getDistrictListData } from "@/api/index.js"; |
| | | import { getDeviceInfo, getDangerPoint } from "@/api/hpApi"; |
| | | |
| | | import { useSimStore } from "@/store/simulation"; |
| | | |
| | | const simStore = useSimStore(); |
| | | |
| | | const route = useRoute(); |
| | | |
| | | // 树形结构数据 |
| | | const treeData = ref([ |
| | | { |
| | | label: "三维服务", |
| | |
| | | { |
| | | label: "图层数据", |
| | | children: [ |
| | | { |
| | | label: "北京市隐患点", |
| | | }, |
| | | { |
| | | label: "孙胡沟隐患点", |
| | | }, |
| | | // { |
| | | // label: "泥石流隐患点面数据", |
| | | // }, |
| | | { |
| | | label: "综合监测设备信息", |
| | | }, |
| | | { |
| | | label: "孙胡沟仿真标注地物", |
| | | }, |
| | | { |
| | | label: "避险点", |
| | | }, |
| | | { label: "北京市隐患点" }, |
| | | { label: "孙胡沟隐患点" }, |
| | | { label: "综合监测设备信息" }, |
| | | { label: "孙胡沟断面" }, |
| | | { label: "避险场所" }, |
| | | ], |
| | | }, |
| | | ]); |
| | | |
| | | // 默认选中的节点 |
| | | const defaultSelectedKeys = ref(["地形数据"]); // 确保与 treeData 的 label 完全匹配 |
| | | |
| | | // Tree 实例引用 |
| | | const treeRef = ref(null); |
| | | |
| | | // 存储图层实体的 Map |
| | | const treeMap = new Map(); |
| | | const defaultSelectedKeys = ref(["模型数据", "影像数据", "地形数据"]); |
| | | |
| | | /** |
| | | * 初始化地图 |
| | | */ |
| | | // function initMap() { |
| | | // // 初始化地形数据 |
| | | // let TerrainLayer = earthCtrl.factory.createTerrainLayer({ |
| | | // sourceType: "ctb", |
| | | // url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem", |
| | | // }); |
| | | // treeMap.set("地形数据", TerrainLayer); |
| | | // console.log(TerrainLayer,'aaaa') |
| | | // // 初始化模型数据 |
| | | // // let modelPromise = addTileset( |
| | | // // "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json" |
| | | // // ); |
| | | // // modelPromise.then((model) => { |
| | | // // treeMap.set("模型数据", model); |
| | | // // }); |
| | | |
| | | // // 初始化影像数据 |
| | | // // let ImageryLayer = earthCtrl.factory.createImageryLayer({ |
| | | // // sourceType: "tms", |
| | | // // url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom", |
| | | // // }); |
| | | // // treeMap.set("影像数据", ImageryLayer); |
| | | // } |
| | | |
| | | // 地形数据 |
| | | let TerrainLayer = null; |
| | | async function initMap() { |
| | | try { |
| | | // 初始化地形数据(使用await等待Promise解析) |
| | | TerrainLayer = await earthCtrl.factory.createTerrainLayer({ |
| | | sourceType: "ctb", |
| | | url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem", |
| | | }); |
| | | |
| | | treeMap.set("地形数据", TerrainLayer); |
| | | } catch (error) { |
| | | console.error("初始化失败:", error); |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * 处理复选框状态变化 |
| | | */ |
| | | // 应用初始化时预先加载 |
| | | // 影像数据初始 |
| | | let ImageryLayer = null; |
| | | async function initImageryLayer() { |
| | | ImageryLayer = await earthCtrl.factory.createImageryLayer({ |
| | | sourceType: "tms", |
| | | url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom", |
| | | }); |
| | | } |
| | | |
| | | function handleCheckChange(data, checked, indeterminate) { |
| | | const label = data.label; |
| | | if (label === "地形数据") { |
| | | if (checked) { |
| | | initMap(); |
| | | treeMap.set("地形数据", TerrainLayer); |
| | | toggleLayerVisible("地形数据", true); // 显示影像数据 |
| | | } else { |
| | | const layer = treeMap.get("地形数据"); |
| | | if (layer) { |
| | | toggleLayerVisible("地形数据", false); // 隐藏影像数据 |
| | | TerrainLayer.removeFromMap(); // 从 Map 中移除 |
| | | console.log("影像数据已移除"); |
| | | } |
| | | } |
| | | } |
| | | if (label === "影像数据") { |
| | | if (checked) { |
| | | initImageryLayer(); |
| | | // // 加载影像数据 |
| | | // console.log("开始加载影像数据..."); |
| | | // ImageryLayer = earthCtrl.factory.createImageryLayer({ |
| | | // sourceType: "tms", |
| | | // url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom", |
| | | // }); |
| | | treeMap.set("影像数据", ImageryLayer); |
| | | toggleLayerVisible("影像数据", true); // 显示影像数据 |
| | | } else { |
| | | // 移除影像数据 |
| | | const layer = treeMap.get("影像数据"); |
| | | if (layer) { |
| | | toggleLayerVisible("影像数据", false); // 隐藏影像数据 |
| | | ImageryLayer.removeFromMap(); // 从 Map 中移除 |
| | | console.log("影像数据已移除"); |
| | | } |
| | | } |
| | | return; |
| | | } |
| | | if (label === "模型数据") { |
| | | if (checked) { |
| | | // 动态加载模型数据 |
| | | console.log("开始加载模型数据..."); |
| | | let modelPromise = addTileset( |
| | | "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json" |
| | | ); |
| | | |
| | | modelPromise |
| | | .then((model) => { |
| | | console.log("模型数据加载完成"); |
| | | treeMap.set("模型数据", model); // 将模型数据存储到 treeMap |
| | | toggleLayerVisible("模型数据", true); // 显示模型数据 |
| | | }) |
| | | .catch((error) => { |
| | | console.error("模型数据加载失败:", error); |
| | | }); |
| | | } else { |
| | | // 隐藏模型数据 |
| | | toggleLayerVisible("模型数据", false); |
| | | } |
| | | return; |
| | | } |
| | | |
| | | // 其他图层的处理逻辑 |
| | | const list = treeMap.get(label); |
| | | if (list) { |
| | | toggleLayerVisible(label, checked); |
| | | return; |
| | | } |
| | | |
| | | switch (label) { |
| | | case "模型数据": |
| | | list.show = checked; |
| | | break; |
| | | case "影像数据": |
| | | case "地形数据": |
| | | case "北京市隐患点": |
| | | console.log("北京市隐患点", checked, indeterminate); |
| | | break; |
| | | case "孙胡沟隐患点": |
| | | console.log("孙胡沟隐患点", checked, indeterminate); |
| | | break; |
| | | case "泥石流隐患点面数据": |
| | | console.log("泥石流隐患点面数据", checked, indeterminate); |
| | | break; |
| | | case "综合监测设备信息": |
| | | console.log("综合监测设备信息", checked, indeterminate); |
| | | break; |
| | | case "孙胡沟仿真标注地物": |
| | | console.log("孙胡沟仿真标注地物", checked, indeterminate); |
| | | break; |
| | | case "避险点": |
| | | addTetrahedron(); |
| | | case "孙胡沟断面": |
| | | case "避险场所": |
| | | console.log(label, checked, indeterminate); |
| | | break; |
| | | } |
| | | } |
| | | function initMap() { |
| | | // let modelPromise = addTileset( |
| | | // `http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json` |
| | | // ) |
| | | // modelPromise.then(model => { |
| | | // treeMap.set("模型数据", model) |
| | | // }) |
| | | // let ImageryLayer = earthCtrl.factory.createImageryLayer({ |
| | | // sourceType: "tms", |
| | | // url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom", |
| | | // }) |
| | | // let TerrainLayer = earthCtrl.factory.createTerrainLayer({ |
| | | // sourceType: "ctb", |
| | | // url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem", |
| | | // }); |
| | | let TerrainLayer = earthCtrl.factory.createTerrainLayer({ |
| | | sourceType: "ctb", |
| | | url: "https://tiles1.geovisearth.com/base/v1/terrain?token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405", |
| | | requestVertexNormals: true, |
| | | }); |
| | | // treeMap.set("影像数据", ImageryLayer) |
| | | treeMap.set("地形数据", TerrainLayer); |
| | | |
| | | /** |
| | | * 切换图层可见性 |
| | | */ |
| | | function toggleLayerVisible(name, checked) { |
| | | const entityList = treeMap.get(name); |
| | | if (Array.isArray(entityList)) { |
| | | entityList.forEach((entity) => { |
| | | // console.log(`Setting entity show to:`, checked); |
| | | entity.show = checked; |
| | | }); |
| | | } else if (entityList && typeof entityList.show !== "undefined") { |
| | | entityList.show = checked; |
| | | } else { |
| | | console.error(`无法设置图层 ${name} 的可见性`); |
| | | } |
| | | } |
| | | |
| | | const devicetList = ref([ |
| | | { |
| | | deviceCode: "303A9016", |
| | | deviceId: "1821067878870257666", |
| | | deviceName: "孙胡沟(墒情)", |
| | | dictDeviceType: "1437295822", |
| | | latitude: 40.56476666, |
| | | longitude: 116.5955361, |
| | | }, |
| | | { |
| | | deviceCode: "01303A9016", |
| | | deviceId: "1821067850122498049", |
| | | deviceName: "孙胡沟(墒情)", |
| | | dictDeviceType: "14372958380", |
| | | latitude: 40.56476666, |
| | | longitude: 116.5955361, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100010063", |
| | | deviceId: "1554360510040182786", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟尹家西沟雨量计0063", |
| | | dictDeviceType: "1437295810", |
| | | latitude: 40.556589, |
| | | longitude: 116.579459, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100194030", |
| | | deviceId: "1554361328692826114", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟编码器4030", |
| | | dictDeviceType: "1437295815", |
| | | latitude: 40.554272, |
| | | longitude: 116.592583, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100031041", |
| | | deviceId: "1554360448702681089", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟次声仪1041", |
| | | dictDeviceType: "1437295832", |
| | | latitude: 40.553236, |
| | | longitude: 116.592304, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100022007", |
| | | deviceId: "1554360273959587842", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟含水率2007", |
| | | dictDeviceType: "1437295822", |
| | | latitude: 40.545821, |
| | | longitude: 116.586354, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100225406", |
| | | deviceId: "1554360478494822402", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟流速仪5406", |
| | | dictDeviceType: "1437295821", |
| | | latitude: 40.554368, |
| | | longitude: 116.592989, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100055006", |
| | | deviceId: "1554360276627165185", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟泥位计5006", |
| | | dictDeviceType: "1437295811", |
| | | latitude: 40.554398, |
| | | longitude: 116.592929, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100010064", |
| | | deviceId: "1554360452670492674", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟雨量计0064", |
| | | dictDeviceType: "1437295810", |
| | | latitude: 40.545741, |
| | | longitude: 116.586304, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100183030", |
| | | deviceId: "1554360533087883265", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟摄像头3030", |
| | | dictDeviceType: "1437295825", |
| | | latitude: 40.554272, |
| | | longitude: 116.592583, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100194031", |
| | | deviceId: "1554361328877375489", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟编码器4031", |
| | | dictDeviceType: "1437295815", |
| | | latitude: 40.554035, |
| | | longitude: 116.59786, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100055007", |
| | | deviceId: "1554360509775941634", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟泥位计5007", |
| | | dictDeviceType: "1437295811", |
| | | latitude: 40.554729, |
| | | longitude: 116.598165, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100031042", |
| | | deviceId: "1554360448916590593", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟次声仪1042", |
| | | dictDeviceType: "1437295832", |
| | | latitude: 40.549398, |
| | | longitude: 116.600387, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100225407", |
| | | deviceId: "1554360478658400257", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟流速仪5407", |
| | | dictDeviceType: "1437295821", |
| | | latitude: 40.55481, |
| | | longitude: 116.598025, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100022008", |
| | | deviceId: "1554360274165108737", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟含水率2008", |
| | | dictDeviceType: "1437295822", |
| | | latitude: 40.544645, |
| | | longitude: 116.596511, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100183031", |
| | | deviceId: "1554360533255655426", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟摄像头3031", |
| | | dictDeviceType: "1437295825", |
| | | latitude: 40.554035, |
| | | longitude: 116.59786, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100010065", |
| | | deviceId: "1554360452888596482", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟雨量计0065", |
| | | dictDeviceType: "1437295810", |
| | | latitude: 40.543104, |
| | | longitude: 116.59585, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100031040", |
| | | deviceId: "1554360448383913986", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040", |
| | | dictDeviceType: "1437295832", |
| | | latitude: 40.563822, |
| | | longitude: 116.592648, |
| | | }, |
| | | { |
| | | deviceCode: "1101161102180100010062", |
| | | deviceId: "1554360452519497730", |
| | | deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟雨量计0062", |
| | | dictDeviceType: "1437295810", |
| | | latitude: 40.558778, |
| | | longitude: 116.586892, |
| | | }, |
| | | { |
| | | deviceCode: "1101160042160100010005", |
| | | deviceId: "1554360582698110977", |
| | | deviceName: "怀柔区雁栖镇北湾村北林大石门沟雨量计0005", |
| | | dictDeviceType: "1437295810", |
| | | latitude: 40.533623, |
| | | longitude: 116.602406, |
| | | }, |
| | | ]); |
| | | // 监测设备列表 |
| | | const devicetList = ref([]); |
| | | |
| | | function initDevicePoint() { |
| | | // 监测设备列表 |
| | | const getDevicetList = async () => { |
| | | const res = await getDeviceInfo(); // 调整getDeviceInfo以接受动态参数,如果需要的话 |
| | | devicetList.value = res.data.pageData.filter((item) => |
| | | item.deviceName?.includes("孙胡沟") |
| | | ); |
| | | }; |
| | | |
| | | async function initDevicePoint() { |
| | | let list = []; |
| | | |
| | | await getDevicetList(); |
| | | devicetList.value.forEach((item) => { |
| | | item.type = getDictName(deviceDictList, item.dictDeviceType); |
| | | item.name = item.type; |
| | | item.name = item.deviceName.split("孙胡沟")[1]; |
| | | item.id = item.deviceId; |
| | | item.className = "device"; |
| | | item.showLabel = true; |
| | | const entity = createPoint(item); |
| | | entity.show = false; |
| | | |
| | | list.push(entity); |
| | | }); |
| | | |
| | | treeMap.set("综合监测设备信息", list); |
| | | } |
| | | |
| | | const districtList = ref([ |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116020058", |
| | | latitude: 40.56652778, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟村尹家西沟尹建燕家屋后", |
| | | longitude: 116.5803889, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "尹家西沟尹建燕家屋后崩塌隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: "", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,预警转移,立警示牌", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "小型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 2, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "3", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "崩塌", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116020078", |
| | | latitude: 40.56497222, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟村河西于凤英家屋后", |
| | | longitude: 116.5955278, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "河西于凤英家屋后崩塌隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: "", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,预警转移,立警示牌", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "小型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 4, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "6", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "崩塌", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116030041", |
| | | latitude: 40.55369444, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟公路", |
| | | longitude: 116.6002778, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "南梁小东沟泥石流隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: "", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,立警示牌", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "小型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 0, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "泥石流", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116030015", |
| | | latitude: 40.55277778, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟村南梁村大窑沟", |
| | | longitude: 116.5994722, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "大窑沟泥石流隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: "已监测、已治理", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,预警转移,立警示牌", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "中型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 5, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "11", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "泥石流", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116030076", |
| | | latitude: 40.55972222, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟村东坎大东沟", |
| | | longitude: 116.5916667, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "大东沟泥石流隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: "已治理", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,预警转移", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "小型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 1, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "2", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "泥石流", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116030074", |
| | | latitude: 40.56580556, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟村尹家西沟", |
| | | longitude: 116.59, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "尹家西沟泥石流隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: |
| | | "已监测;灾害体变化:4处坡积物垮塌,堆积至坡脚,方量约20m³。", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,预警转移", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "中型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 7, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "12", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "泥石流", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116030053", |
| | | latitude: 40.57361111, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟村北大地西洼子沟", |
| | | longitude: 116.5897222, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "北大地西洼子沟泥石流隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: "沟口正对房屋,降雨时出水量大,建议治理,汛期加强巡查", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,预警转移,立警示牌", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "中型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 6, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "10", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "泥石流", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116020102", |
| | | latitude: 40.55972222, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟村范家庄王秀莲家屋后", |
| | | longitude: 116.5922222, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "范家庄王秀莲家屋后崩塌隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: "边坡较陡,顺向岩层,房屋靠近坡脚,建议尽快治理", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,预警转移,立警示牌", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "小型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 1, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "3", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "崩塌", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116020742", |
| | | latitude: 40.57680556, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟村三亩地范忠田家屋后", |
| | | longitude: 116.5887222, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "三亩地范忠田家屋后崩塌隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: "", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,预警转移,更换警示牌", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "中型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 8, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "23", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "崩塌", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116030040", |
| | | latitude: 40.56344444, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟村河西于家西沟", |
| | | longitude: 116.5953889, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "于家西沟泥石流隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: |
| | | "已监测,2018村已治理;沟口堆积扇明显,正对房屋,建议汛期加强巡查", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,预警转移", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "中型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 18, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "59", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "泥石流", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116030055", |
| | | latitude: 40.55283333, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟村椴树底下东沟", |
| | | longitude: 116.5999444, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "椴树底下东沟泥石流隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: "已治理:威胁对象重复:与110116030015重复5户11人", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,预警转移,立警示牌", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "中型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 5, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "11", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "泥石流", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | { |
| | | activeStatus: "", |
| | | areaCode: "", |
| | | areaName: "", |
| | | brookLength: 0, |
| | | checkId: "", |
| | | city: "北京市", |
| | | codeProvince: "110116", |
| | | county: "怀柔", |
| | | dangerLevel: "", |
| | | disasterStatus: "", |
| | | drainageArea: "", |
| | | elevation: 0, |
| | | featureDes: "", |
| | | groupMonitor: "李桂梅,孙桂和,范满田,秦建权,孙桂江,孙桂伟", |
| | | hasPlan: "", |
| | | id: "110116030054", |
| | | latitude: 40.56166667, |
| | | length: 0, |
| | | district: "琉璃庙镇孙胡沟村上台子河东南沟", |
| | | longitude: 116.5997222, |
| | | monitor: "", |
| | | monitorAdvice: "", |
| | | name: "河东南沟泥石流隐患点", |
| | | number: |
| | | "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612", |
| | | preventionDes: "已监测", |
| | | preventionLevel: "", |
| | | preventionPlan: "定期巡查,立警示牌", |
| | | preventionUnit: "乡镇", |
| | | principal: "", |
| | | province: "北京市", |
| | | qp: "", |
| | | reason: "", |
| | | responsibleUnit: "", |
| | | riskLevel: "", |
| | | scale: "小型", |
| | | stableLevel: "", |
| | | status: "", |
| | | thickness: 0, |
| | | threatenFamily: 0, |
| | | threatenMoney: 0, |
| | | threatenPopulation: "", |
| | | threatenType: "", |
| | | town: "琉璃庙镇", |
| | | trigger: "", |
| | | type: "泥石流", |
| | | village: "孙胡沟村", |
| | | volume: "", |
| | | volumePotential: "", |
| | | width: 0, |
| | | }, |
| | | ]); |
| | | // 隐患点列表 |
| | | watchEffect(() => { |
| | | const dangerPoints = simStore.DangerPoint.filter((item) => |
| | | item.position?.includes("孙胡沟") |
| | | ); |
| | | |
| | | function initDistrictPoint() { |
| | | let list = []; |
| | | districtList.value.forEach((item) => { |
| | | item.showBillboard = true; |
| | | item.className = "district"; |
| | | item.type = "泥石流"; |
| | | const entity = createPoint(item); |
| | | entity.show = false; |
| | | list.push(entity); |
| | | }); |
| | | treeMap.set("孙胡沟隐患点", list); |
| | | } |
| | | if (dangerPoints && dangerPoints.length > 0) { |
| | | const list = []; |
| | | |
| | | dangerPoints.forEach((item) => { |
| | | // console.log(item, "item"); |
| | | item.id = item.hdId; |
| | | item.name = item.hdName; |
| | | item.latitude = item.lat; |
| | | item.longitude = item.lon; |
| | | item.showBillboard = true; |
| | | item.type = item.disasterType; |
| | | item.className = "district"; |
| | | const entity = createPoint(item); |
| | | entity.show = false; |
| | | list.push(entity); |
| | | }); |
| | | |
| | | treeMap.set("孙胡沟隐患点", list); |
| | | } |
| | | }); |
| | | |
| | | let divPointList = []; |
| | | |
| | | /** |
| | | * 初始化断面点 |
| | | */ |
| | | function initDuanmianPoint() { |
| | | getDuanMainData().then((res) => { |
| | | const duanmianList = res.data; |
| | |
| | | const entity = createPoint(item); |
| | | entity.show = false; |
| | | list.push(entity); |
| | | return; |
| | | const divPoint = earthCtrl.factory.createDivPoint( |
| | | item.alias, |
| | | { lon: longitude, lat: latitude }, |
| | | { |
| | | type: "custom", |
| | | offset: ["c", 60], |
| | | description: ` |
| | | <div class="divPoint-custom"> |
| | | <p>${item.alias}</p> |
| | | </div> |
| | | `, |
| | | near: 0, |
| | | far: 500000, |
| | | } |
| | | ); |
| | | divPoint.item.show = false; |
| | | console.log(divPoint); |
| | | |
| | | divPointList.push(divPoint.item); |
| | | }); |
| | | treeMap.set("孙胡沟仿真标注地物", list); |
| | | treeMap.set("孙胡沟断面", list); |
| | | }); |
| | | } |
| | | |
| | | /** |
| | | * 添加避险场所 |
| | | */ |
| | | function addTetrahedron(visible) { |
| | | const emergencyAreaList = []; |
| | | |
| | | // 加载避险场所底层面片 |
| | | loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => { |
| | | emergencyAreaList.push(...entities); |
| | | }); |
| | | // console.log('polygon', polygon); |
| | | |
| | | let list = [ |
| | | { |
| | | name: "尹建华家", |
| | | longitude: 116.593517, |
| | | latitude: 40.568391, |
| | | altitude: 528.45, |
| | | }, |
| | | { |
| | | name: "范振江家", |
| | | longitude: 116.591059, |
| | | latitude: 40.574068, |
| | | altitude: 528, |
| | | }, |
| | | { |
| | | name: "后坡", |
| | | longitude: 116.597975, |
| | | latitude: 40.558199, |
| | | altitude: 528, |
| | | }, |
| | | ]; |
| | | list.forEach((item) => { |
| | | let point = earthCtrl.factory.addTetrahedron({ |
| | | position: { |
| | | lon: item.longitude, |
| | | lat: item.latitude, |
| | | height: item.altitude, |
| | | }, |
| | | multiple: 1.0, |
| | | scale: new SmartEarth.Cesium.Cartesian3(20, 20, 20), |
| | | // 默认隐藏避险场所 |
| | | entities.forEach((entity) => { |
| | | entity.show = false; |
| | | }); |
| | | console.log("point", point); |
| | | emergencyAreaList.push(point); |
| | | |
| | | // 将避险场所实体存储到 treeMap |
| | | treeMap.set("避险场所", entities); |
| | | }); |
| | | treeMap.set("避险点", emergencyAreaList); |
| | | } |
| | | function toggleLayerVisible(name, checked) { |
| | | const entityList = treeMap.get(name); |
| | | if (Array.isArray(entityList) && entityList.length > 0) { |
| | | entityList.forEach((entity) => { |
| | | entity.show = checked; |
| | | }); |
| | | } |
| | | treeMap.set(name, entityList); |
| | | } |
| | | |
| | | /** |
| | | * 初始化所有数据 |
| | | */ |
| | | function getData() { |
| | | initDevicePoint(); |
| | | initDistrictPoint(); |
| | | // initDistrictPoint(); |
| | | initDuanmianPoint(); |
| | | addTetrahedron(); |
| | | } |
| | | |
| | | // 通过 store 传递需要选中的key |
| | | // 监听 store 中的 checkedKeys 变化 |
| | | watch( |
| | | () => checkedKeys.value, |
| | | (keys) => { |
| | |
| | | } |
| | | ); |
| | | |
| | | // 监听路由变化 |
| | | watch( |
| | | () => route.fullPath, |
| | | (path) => { |
| | |
| | | treeRef.value.setCheckedKeys(defaultKeys.concat("孙胡沟隐患点"), true); |
| | | toggleLayerVisible("孙胡沟隐患点", true); |
| | | toggleLayerVisible("综合监测设备信息", false); |
| | | toggleLayerVisible("孙胡沟仿真标注地物", false); |
| | | toggleLayerVisible("孙胡沟断面", false); |
| | | } else if (path == "/zhjc") { |
| | | treeRef.value.setCheckedKeys( |
| | | defaultKeys.concat("综合监测设备信息"), |
| | |
| | | ); |
| | | toggleLayerVisible("综合监测设备信息", true); |
| | | toggleLayerVisible("孙胡沟隐患点", false); |
| | | toggleLayerVisible("孙胡沟仿真标注地物", false); |
| | | toggleLayerVisible("孙胡沟断面", false); |
| | | } else if (path == "/mnfz") { |
| | | treeRef.value.setCheckedKeys( |
| | | defaultKeys.concat("孙胡沟仿真标注地物"), |
| | | true |
| | | ); |
| | | toggleLayerVisible("孙胡沟仿真标注地物", true); |
| | | treeRef.value.setCheckedKeys(defaultKeys.concat("孙胡沟断面"), false); |
| | | toggleLayerVisible("孙胡沟断面", false); |
| | | toggleLayerVisible("孙胡沟隐患点", false); |
| | | toggleLayerVisible("综合监测设备信息", false); |
| | | } else { |
| | |
| | | } |
| | | } |
| | | ); |
| | | |
| | | // 组件挂载时初始化 |
| | | onMounted(() => { |
| | | initMap(); |
| | | getData(); |
| | | nextTick(() => { |
| | | // 确保树组件渲染完成后设置默认选中项 |
| | | treeRef.value.setCheckedKeys(defaultSelectedKeys.value, true); |
| | | }); |
| | | }); |
| | | |
| | | // 组件卸载时清理资源 |
| | | onUnmounted(() => { |
| | | viewer.entities.removeAll(); |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | @import url("../../assets/css/infobox.css"); |
| | | .layer-tree { |
| | | // position: absolute; |
| | | // top: 11%; |
| | | // right: 25%; |
| | | background: url("@/assets/img/tools/plotting_new.png"); |
| | | width: 200px; |
| | | height: 200px; |
| | | // height: 200px; |
| | | z-index: 99; |
| | | overflow: hidden; |
| | | } |
| | | /deep/ .el-tree { |
| | | overflow: hidden !important; |
| | | } |
| | | </style> |