From 2280e8be717608bb36c3cf921f129db24349396d Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期二, 10 六月 2025 17:55:29 +0800
Subject: [PATCH] 大改图层树
---
src/components/tools/LayerTree.vue | 514 ++++++++++++++++++++----------------------
src/api/hpApi.js | 2
src/components/menu/Device.vue | 84 ++----
src/store/simulation.js | 18 +
src/views/Home.vue | 6
src/views/left/KGSimOption/PredictiveSimulation.vue | 2
src/views/left/KGSimOption/HistorySimulation.vue | 2
src/components/menu/Location.vue | 50 +--
src/views/left/CitySim.vue | 2
9 files changed, 315 insertions(+), 365 deletions(-)
diff --git a/src/api/hpApi.js b/src/api/hpApi.js
index 23e827e..d397817 100644
--- a/src/api/hpApi.js
+++ b/src/api/hpApi.js
@@ -229,7 +229,6 @@
"dictThreatObj": "",
"year": "2025"
});
- console.log("getAeraCode:", response);
return response.data;
}
@@ -243,6 +242,5 @@
"dictThreatObj": "",
"year": "2025"
});
- console.log("getAeraCode:", response);
return response.data;
}
\ No newline at end of file
diff --git a/src/components/menu/Device.vue b/src/components/menu/Device.vue
index 99d409b..e587b5e 100644
--- a/src/components/menu/Device.vue
+++ b/src/components/menu/Device.vue
@@ -85,8 +85,9 @@
onMounted(async () => {
try {
- await getData();
- await loadDeviceList(selectValue.value);
+ if (simStore.devices && simStore.devices.length > 0) {
+ await loadDeviceList(selectValue.value);
+ }
// initeWaterPrimitiveView();
} finally {
isLoading.value = false;
@@ -106,21 +107,20 @@
clearAllPoints();
}
});
-watch(
- () => simStore.DeviceShowSwitch,
- (newValue, oldValue) => {
- if (newValue) {
- initializeDevicePoints();
- } else {
- clearAllPoints();
- }
- }
-);
+
+// watch(
+// () => simStore.DeviceShowSwitch,
+// (newValue, oldValue) => {
+// if (newValue) {
+// initializeDevicePoints();
+// } else {
+// clearAllPoints();
+// }
+// }
+// );
const deviceListAll = ref([]);
-const deviceEntities = ref([]);
-// const initializeDevicePoints = (val) => {
const initializeDevicePoints = () => {
const list = [];
// val.forEach((item, index) => {
@@ -135,57 +135,38 @@
// console.log(`璁惧鍚嶇О: ${item.id}, 璁惧绫诲瀷: ${item.name}`);
createPoint(item);
});
- deviceEntities.value = list;
};
-const allDevices = ref([]);
-const getData = async () => {
- const res = await getDeviceInfoShg();
- allDevices.value = res.data.pageData;
-};
+
// 鏍规嵁鍖哄煙鍚嶇О鍔犺浇璁惧鍒楄〃
const loadDeviceList = async (areaName) => {
try {
clearAllPoints();
isLoading.value = true;
- // const res = await getDeviceInfoShg();
- // const allDevices = res.data.pageData;
- deviceListAll.value = allDevices.value.filter((item) =>
+
+ deviceListAll.value = simStore.devices.filter((item) =>
item.deviceName?.includes(areaName)
);
- initializeDevicePoints();
- // getDeviceInfo().then((res) => {
- // const list = res.data.pageData;
- // deviceListAll.value = [];
-
- // let index = 0;
- // const batchSize = 50; // 姣忔澶勭悊鐨勬暟閲�
- // const delay = 100; // 姣忛殧澶氬皯姣澶勭悊涓�娆�
-
- // const intervalId = setInterval(() => {
- // // 鍙栧嚭褰撳墠鎵规鐨勬暟鎹�
- // const batch = list.slice(index, index + batchSize);
-
- // if (batch.length === 0) {
- // clearInterval(intervalId); // 鏁版嵁澶勭悊瀹屼簡锛屽仠姝㈠畾鏃跺櫒
- // return;
- // }
-
- // // 鎶婂綋鍓嶆壒娆＄殑鏁版嵁 push 鍒� deviceListAll
- // deviceListAll.value = [...deviceListAll.value, ...batch];
-
- // // 瀵瑰綋鍓嶆壒娆℃墽琛屽垵濮嬪寲鏂规硶
- // initializeDevicePoints(batch);
-
- // index += batchSize;
- // }, delay);
- // });
+ await initializeDevicePoints();
} catch (error) {
console.error("鍔犺浇璁惧淇℃伅澶辫触", error);
} finally {
isLoading.value = false;
}
};
+
+// 鐩戝惉 simStore.devices 鍙樺寲
+watch(
+ () => simStore.devices,
+ (newVal) => {
+ if (newVal && newVal.length > 0) {
+ loadDeviceList(selectValue.value);
+ } else {
+ clearAllPoints();
+ deviceListAll.value = [];
+ }
+ }
+);
// 澶勭悊鍖哄煙鍙樺寲浜嬩欢
const handleChange = (item) => {
@@ -195,6 +176,8 @@
}
// 鏍规嵁鏂板尯鍩熷悕閲嶆柊鍔犺浇璁惧鍒楄〃
loadDeviceList(item);
+ initializeDevicePoints();
+
// console.log(deviceListAll.value);
};
@@ -246,6 +229,7 @@
});
function handleTreeNodeClick(data) {
+ initializeDevicePoints();
// 鍙湁璁惧鑺傜偣鎵嶅鐞嗙偣鍑讳簨浠�
if (!data.children) {
const entity = viewer.entities.getById(data.deviceId);
diff --git a/src/components/menu/Location.vue b/src/components/menu/Location.vue
index d37b435..53c3d4a 100644
--- a/src/components/menu/Location.vue
+++ b/src/components/menu/Location.vue
@@ -71,30 +71,12 @@
import { initeWaterPrimitiveView } from "@/utils/water"; //鐩告満flyTo鍑芥暟锛屽悗缁璷ptions鍒楄〃涓湁瀵瑰簲缁忕含搴﹀悗寮冪敤
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { Loading } from "@element-plus/icons-vue";
-// import { fetchAndLoadDangerPoints } from "@/api/hpApi.js";
const districtList = ref([]);
-// const displayData = ref([]);
-
-// const loadCallback = async (newData) => {
-// districtList.value = [...newData];
-// console.log(districtList.value, "aaaaaaaaaaaaaaaaaaaaaaaaa");
-
-// await initializeDevicePoints();
-// };
-
-// onMounted(() => {
-// fetchAndLoadDangerPoints(loadCallback);
-// });
const simStore = useSimStore();
-// onBeforeRouteUpdate((to, from, next) => {
-// if (to.path !== "/yhgl") {
-// clearAllPoints();
-// }
-// next();
-// });
+
const route = useRoute();
onBeforeUnmount(() => {
@@ -194,22 +176,22 @@
};
let isInitialized = false;
-watch(
- () => simStore.DangerShowSwitch,
- async (newValue, oldValue) => {
- console.log("褰撳墠鐘舵�侊細", newValue);
+// watch(
+// () => simStore.DangerShowSwitch,
+// async (newValue, oldValue) => {
+// console.log("褰撳墠鐘舵�侊細", newValue);
- if (newValue) {
- if (!isInitialized) {
- await initializeDevicePoints();
- isInitialized = true;
- }
- } else {
- clearAllPoints();
- isInitialized = false;
- }
- }
-);
+// if (newValue) {
+// if (!isInitialized) {
+// await initializeDevicePoints();
+// isInitialized = true;
+// }
+// } else {
+// clearAllPoints();
+// isInitialized = false;
+// }
+// }
+// );
// 鐩戝惉 simStore.DangerPoint 鍙樺寲
watch(
() => simStore.DangerPoint,
diff --git a/src/components/tools/LayerTree.vue b/src/components/tools/LayerTree.vue
index 8f27c05..e29ab66 100644
--- a/src/components/tools/LayerTree.vue
+++ b/src/components/tools/LayerTree.vue
@@ -13,30 +13,22 @@
</template>
<script setup>
-import {
- ref,
- onMounted,
- watch,
- nextTick,
- onUnmounted,
- computed,
- watchEffect,
-} from "vue";
+import { ref, onMounted, watch, nextTick, onUnmounted, 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, getDistrictListData } from "@/api/index.js";
-import { getDeviceInfoShg, getDangerPoint } from "@/api/hpApi";
-
+import { getDuanMainData } from "@/api/index.js";
import { useSimStore } from "@/store/simulation";
const simStore = useSimStore();
-
const route = useRoute();
-// 鏍戝舰缁撴瀯鏁版嵁
+/**
+ * 鍥惧眰鏍戦厤缃暟鎹�
+ * 鍖呭惈涓夌淮鏈嶅姟鍜屽浘灞傛暟鎹袱澶у垎绫�
+ */
const treeData = ref([
{
label: "涓夌淮鏈嶅姟",
@@ -58,291 +50,277 @@
},
]);
-// 榛樿閫変腑鐨勮妭鐐�
-const defaultSelectedKeys = ref(["鍦板舰鏁版嵁"]); // 纭繚涓� treeData 鐨� label 瀹屽叏鍖归厤
+// 榛樿閫変腑鐨勮妭鐐癸紙鍦板舰鏁版嵁榛樿寮�鍚級
+const defaultSelectedKeys = ref(["鍦板舰鏁版嵁"]);
// Tree 瀹炰緥寮曠敤
const treeRef = ref(null);
-// 瀛樺偍鍥惧眰瀹炰綋鐨� Map
+// 瀛樺偍鍥惧眰瀹炰綋鐨� Map锛岀敤浜庣鐞嗘墍鏈夊浘灞�
const treeMap = new Map();
-/**
- * 鍒濆鍖栧湴鍥�
- */
-// 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() {
+// 褰卞儚鏁版嵁瀹炰緥
+let ImageryLayer = null;
+
+/**
+ * 鍒濆鍖栧湴褰㈡暟鎹浘灞�
+ */
+async function initTerrainLayer() {
try {
- // 鍒濆鍖栧湴褰㈡暟鎹紙浣跨敤await绛夊緟Promise瑙ｆ瀽锛�
TerrainLayer = await earthCtrl.factory.createTerrainLayer({
sourceType: "ctb",
url: "http://106.120.22.26:9103/gisserver/ctsserver/sunhugoudem",
- // url: "https://tiles1.geovisearth.com/base/v1/terrain?token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
requestVertexNormals: true,
});
-
treeMap.set("鍦板舰鏁版嵁", TerrainLayer);
} catch (error) {
- console.error("鍒濆鍖栧け璐�:", 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",
- });
+ try {
+ ImageryLayer = await earthCtrl.factory.createImageryLayer({
+ sourceType: "tms",
+ url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
+ });
+ treeMap.set("褰卞儚鏁版嵁", ImageryLayer);
+ } catch (error) {
+ console.error("褰卞儚鏁版嵁鍒濆鍖栧け璐�:", error);
+ }
}
-function handleCheckChange(data, checked, indeterminate) {
+/**
+ * 澶勭悊鏍戣妭鐐瑰嬀閫夊彉鍖�
+ * @param {Object} data - 鑺傜偣鏁版嵁
+ * @param {Boolean} checked - 鏄惁閫変腑
+ * @param {Boolean} indeterminate - 涓嶇‘瀹氱姸鎬�
+ */
+function handleCheckChange(data, checked) {
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);
- }
+ // 鍦板舰鏁版嵁澶勭悊
+ if (label === "鍦板舰鏁版嵁") {
+ handleTerrainLayer(checked);
return;
}
+
+ // 褰卞儚鏁版嵁澶勭悊
+ if (label === "褰卞儚鏁版嵁") {
+ handleImageryLayer(checked);
+ return;
+ }
+
+ // 妯″瀷鏁版嵁澶勭悊
+ if (label === "妯″瀷鏁版嵁") {
+ handleModelLayer(checked);
+ return;
+ }
+
+ // 璁惧淇℃伅澶勭悊
if (label === "缁煎悎鐩戞祴璁惧淇℃伅") {
simStore.DeviceShowSwitch = checked;
- if (checked) {
- if (!treeMap.get("缁煎悎鐩戞祴璁惧淇℃伅")) {
- } else {
- toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", true);
- }
- } else {
- toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", false);
- }
return;
}
+
+ // 闅愭偅鐐瑰鐞�
if (label === "瀛欒儭娌熼殣鎮ｇ偣") {
simStore.DangerShowSwitch = checked;
- if (checked) {
- if (!treeMap.get("瀛欒儭娌熼殣鎮ｇ偣")) {
- } else {
- toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", true);
- }
- } else {
- toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", false);
- }
return;
}
- // 鍏朵粬鍥惧眰鐨勫鐞嗛�昏緫
- const list = treeMap.get(label);
- if (list) {
+ // 鍏朵粬鍥惧眰鐨勫鐞�
+ const layer = treeMap.get(label);
+ if (layer) {
toggleLayerVisible(label, checked);
- return;
}
+}
- switch (label) {
- case "褰卞儚鏁版嵁":
- case "鍦板舰鏁版嵁":
- case "鍖椾含甯傞殣鎮ｇ偣":
- case "瀛欒儭娌熼殣鎮ｇ偣":
- case "娉ョ煶娴侀殣鎮ｇ偣闈㈡暟鎹�":
- case "缁煎悎鐩戞祴璁惧淇℃伅":
- case "瀛欒儭娌熸柇闈�":
- case "閬块櫓鍦烘墍":
- console.log(label, checked, indeterminate);
- break;
+/**
+ * 澶勭悊鍦板舰鍥惧眰
+ */
+function handleTerrainLayer(checked) {
+ if (checked) {
+ initTerrainLayer();
+ toggleLayerVisible("鍦板舰鏁版嵁", true);
+ } else {
+ const layer = treeMap.get("鍦板舰鏁版嵁");
+ if (layer) {
+ toggleLayerVisible("鍦板舰鏁版嵁", false);
+ layer.removeFromMap();
+ treeMap.delete("鍦板舰鏁版嵁");
+ }
+ }
+}
+
+/**
+ * 澶勭悊褰卞儚鍥惧眰
+ */
+function handleImageryLayer(checked) {
+ if (checked) {
+ initImageryLayer();
+ toggleLayerVisible("褰卞儚鏁版嵁", true);
+ } else {
+ const layer = treeMap.get("褰卞儚鏁版嵁");
+ if (layer) {
+ toggleLayerVisible("褰卞儚鏁版嵁", false);
+ layer.removeFromMap();
+ treeMap.delete("褰卞儚鏁版嵁");
+ }
+ }
+}
+
+/**
+ * 澶勭悊妯″瀷鍥惧眰
+ */
+function handleModelLayer(checked) {
+ if (checked) {
+ addTileset(
+ "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json"
+ )
+ .then((model) => {
+ treeMap.set("妯″瀷鏁版嵁", model);
+ toggleLayerVisible("妯″瀷鏁版嵁", true);
+ })
+ .catch(console.error);
+ } else {
+ toggleLayerVisible("妯″瀷鏁版嵁", false);
}
}
/**
* 鍒囨崲鍥惧眰鍙鎬�
+ * @param {String} name - 鍥惧眰鍚嶇О
+ * @param {Boolean} visible - 鏄惁鍙
*/
-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} 鐨勫彲瑙佹�);
+function toggleLayerVisible(name, visible) {
+ const layer = treeMap.get(name);
+ if (!layer) {
+ console.warn(`鍥惧眰 ${name} 涓嶅瓨鍦╜);
+ return;
}
-}
-// 鐩戞祴璁惧鍒楄〃
-const devicetList = ref([]);
-
-// 鐩戞祴璁惧鍒楄〃
-const getDevicetList = async () => {
- const res = await getDeviceInfoShg(); // 璋冩暣getDeviceInfoShg浠ユ帴鍙楀姩鎬佸弬鏁帮紝濡傛灉闇�瑕佺殑璇�
- devicetList.value = res.data.pageData.filter((item) =>
- item.deviceName?.includes("瀛欒儭娌�")
- );
-};
-// 榛樿鍔犺浇閮ㄥ垎宸叉浛鎹㈣嚦Device.vue涓紝閫昏緫淇敼涓烘牴鎹綋鍓嶉�夋嫨鍦板舰鍒囨崲璁惧鐐规樉绀�
-async function initDevicePoint() {
- let list = [];
- await getDevicetList();
- devicetList.value.forEach((item) => {
- item.type = getDictName(deviceDictList, item.dictDeviceType);
- 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);
-}
-
-// 闅愭偅鐐瑰垪琛�
-watchEffect(() => {
- const dangerPoints = simStore.DangerPoint.filter((item) =>
- item.position?.includes("瀛欒儭娌�")
- );
-
- 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);
+ // 澶勭悊涓嶅悓绫诲瀷鐨勫浘灞�
+ if (Array.isArray(layer)) {
+ // 瀹炰綋鏁扮粍
+ layer.forEach((entity) => {
+ entity.show = visible;
+ if (visible && !viewer.entities.contains(entity)) {
+ viewer.entities.add(entity);
+ }
});
+ } else if (typeof layer.setVisible === "function") {
+ // 鑷畾涔夊浘灞傛帴鍙�
+ layer.setVisible(visible);
+ } else if (typeof layer.show === "boolean") {
+ // 鏅�氬彲鏄剧ず瀵硅薄
+ layer.show = visible;
+ }
- treeMap.set("瀛欒儭娌熼殣鎮ｇ偣", list);
+ viewer.scene.requestRender();
+}
+
+/**
+ * 娓呴櫎鍥惧眰瀹炰綋
+ * @param {String} layerName - 鍥惧眰鍚嶇О
+ */
+function clearLayerEntities(layerName) {
+ const list = treeMap.get(layerName);
+ if (list && Array.isArray(list)) {
+ list.forEach((entity) => {
+ if (viewer.entities.contains(entity)) {
+ viewer.entities.remove(entity);
+ }
+ });
+ }
+ treeMap.delete(layerName);
+}
+
+// 鐩戞帶璁惧寮�鍏冲彉鍖�
+watchEffect(() => {
+ clearLayerEntities("缁煎悎鐩戞祴璁惧淇℃伅");
+
+ if (simStore.DeviceShowSwitch) {
+ const deviceList = simStore.devices
+ .filter((item) => item.deviceName?.includes("瀛欒儭娌�"))
+ .map((item) => {
+ const entity = createPoint({
+ ...item,
+ type: getDictName(deviceDictList, item.dictDeviceType),
+ name: item.deviceName.split("瀛欒儭娌�")[1],
+ id: item.deviceId,
+ className: "device",
+ showLabel: true,
+ });
+ entity.show = true;
+ return entity;
+ });
+
+ if (deviceList.length) {
+ treeMap.set("缁煎悎鐩戞祴璁惧淇℃伅", deviceList);
+ }
}
});
-let divPointList = [];
+// 鐩戞帶闅愭偅鐐瑰紑鍏冲彉鍖�
+watchEffect(() => {
+ clearLayerEntities("瀛欒儭娌熼殣鎮ｇ偣");
+
+ if (simStore.DangerShowSwitch) {
+ const dangerPoints = simStore.DangerPoint.filter((item) =>
+ item.position?.includes("瀛欒儭娌�")
+ ).map((item) => {
+ const entity = createPoint({
+ id: item.hdId,
+ name: item.hdName,
+ latitude: item.lat,
+ longitude: item.lon,
+ showBillboard: true,
+ type: item.disasterType,
+ className: "district",
+ });
+ entity.show = true;
+ return entity;
+ });
+
+ if (dangerPoints.length) {
+ treeMap.set("瀛欒儭娌熼殣鎮ｇ偣", dangerPoints);
+ }
+ }
+});
+
/**
- * 鍒濆鍖栨柇闈㈢偣
+ * 鍒濆鍖栨柇闈㈢偣鏁版嵁
*/
function initDuanmianPoint() {
getDuanMainData().then((res) => {
- const duanmianList = res.data;
- const list = [];
- duanmianList.forEach((item) => {
- item.id = item.id + item.alias;
- item.name = item.alias;
- item.longitude = item.lon;
- item.latitude = item.lat;
- item.showBillboard = false;
- item.className = "district";
-
- const entity = createPoint(item);
+ const list = res.data.map((item) => {
+ const entity = createPoint({
+ id: item.id + item.alias,
+ name: item.alias,
+ latitude: item.lat,
+ longitude: item.lon,
+ showBillboard: false,
+ className: "district",
+ });
entity.show = false;
- list.push(entity);
+ return entity;
});
treeMap.set("瀛欒儭娌熸柇闈�", list);
});
}
/**
- * 娣诲姞閬块櫓鍦烘墍
+ * 娣诲姞閬块櫓鍦烘墍鏁版嵁
*/
-function addTetrahedron(visible) {
- const emergencyAreaList = [];
- // 鍔犺浇閬块櫓鍦烘墍搴曞眰闈㈢墖
+function addTetrahedron() {
loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => {
- emergencyAreaList.push(...entities);
-
- // 榛樿闅愯棌閬块櫓鍦烘墍
- entities.forEach((entity) => {
- entity.show = false;
- });
-
- // 灏嗛伩闄╁満鎵�瀹炰綋瀛樺偍鍒� treeMap
+ entities.forEach((entity) => (entity.show = false));
treeMap.set("閬块櫓鍦烘墍", entities);
});
}
@@ -350,9 +328,7 @@
/**
* 鍒濆鍖栨墍鏈夋暟鎹�
*/
-function getData() {
- initDevicePoint();
- // initDistrictPoint();
+function initData() {
initDuanmianPoint();
addTetrahedron();
}
@@ -361,11 +337,8 @@
watch(
() => checkedKeys.value,
(keys) => {
- if (keys && Array.isArray(keys)) {
- treeRef.value.setCheckedKeys(
- defaultSelectedKeys.value.concat(keys),
- true
- );
+ if (Array.isArray(keys)) {
+ treeRef.value?.setCheckedKeys([...defaultSelectedKeys.value, ...keys]);
}
}
);
@@ -374,57 +347,52 @@
watch(
() => route.fullPath,
(path) => {
- const defaultKeys = defaultSelectedKeys.value;
- if (path == "/yhgl") {
- treeRef.value.setCheckedKeys(defaultKeys.concat("瀛欒儭娌熼殣鎮ｇ偣"), true);
- toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", true);
- toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", false);
- toggleLayerVisible("瀛欒儭娌熸柇闈�", false);
- } else if (path == "/zhjc") {
- treeRef.value.setCheckedKeys(
- defaultKeys.concat("缁煎悎鐩戞祴璁惧淇℃伅"),
- true
- );
- toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", true);
- toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", false);
- toggleLayerVisible("瀛欒儭娌熸柇闈�", false);
- } else if (path == "/mnfz") {
- treeRef.value.setCheckedKeys(defaultKeys.concat("瀛欒儭娌熸柇闈�"), false);
- toggleLayerVisible("瀛欒儭娌熸柇闈�", false);
- toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", false);
- toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", false);
- } else {
- treeRef.value.setCheckedKeys(defaultKeys, true);
- }
- }
+ const defaultKeys = [...defaultSelectedKeys.value];
+ const checkedKeys =
+ {
+ "/yhgl": [...defaultKeys, "瀛欒儭娌熼殣鎮ｇ偣"],
+ "/zhjc": [...defaultKeys, "缁煎悎鐩戞祴璁惧淇℃伅"],
+ // "/mnfz": [...defaultKeys, "瀛欒儭娌熸柇闈�"],
+ }[path] || defaultKeys;
+
+ treeRef.value?.setCheckedKeys(checkedKeys);
+ },
+ { immediate: true }
);
// 缁勪欢鎸傝浇鏃跺垵濮嬪寲
onMounted(() => {
- initMap();
- getData();
+ initTerrainLayer();
+ initData();
nextTick(() => {
- // 纭繚鏍戠粍浠舵覆鏌撳畬鎴愬悗璁剧疆榛樿閫変腑椤�
- treeRef.value.setCheckedKeys(defaultSelectedKeys.value, true);
+ treeRef.value?.setCheckedKeys(defaultSelectedKeys.value);
});
});
// 缁勪欢鍗歌浇鏃舵竻鐞嗚祫婧�
onUnmounted(() => {
viewer.entities.removeAll();
+ // 娓呯悊鎵�鏈夊浘灞傚紩鐢�
+ treeMap.forEach((layer) => {
+ if (layer.removeFromMap) {
+ layer.removeFromMap();
+ }
+ });
+ treeMap.clear();
});
</script>
<style lang="less" scoped>
@import url("../../assets/css/infobox.css");
+
.layer-tree {
background: url("@/assets/img/tools/plotting_new.png");
width: 200px;
- // height: 200px;
z-index: 99;
overflow: hidden;
-}
-/deep/ .el-tree {
- overflow: hidden !important;
+
+ :deep(.el-tree) {
+ overflow: hidden !important;
+ }
}
</style>
diff --git a/src/store/simulation.js b/src/store/simulation.js
index 36df33b..3e85e8c 100644
--- a/src/store/simulation.js
+++ b/src/store/simulation.js
@@ -1,12 +1,15 @@
// stores/ui.js
import { defineStore } from 'pinia'
import { ref } from 'vue'
-
export const useSimStore = defineStore('simulation', () => {
+ // 鐩綍鏍戦�変腑
+ const userSelectedLayers = ref([])
// 闅愭偅鐐瑰垪琛�
- const DeviceShowSwitch = ref(true)
- const DangerShowSwitch = ref(true)
+ const DeviceShowSwitch = ref(false)
+ const DangerShowSwitch = ref(false)
const DangerPoint = ref([])
+ // 鐩戞祴璁惧鍒楄〃
+ const devices = ref([])
const navigationShow = ref(true)
const leftShow = ref(false)
const rightShow = ref(false)
@@ -151,6 +154,12 @@
}
}
+ const updateSelectedLayers = (keys) => {
+ userSelectedLayers.value = keys;
+ }
+
+
+
return {
// UI 鐘舵��
navigationShow,
@@ -179,6 +188,8 @@
DangerShowSwitch,
waterLegendData,
isShowEarth,
+ userSelectedLayers,
+ devices,
// 鏂规鐩稿叧鏂规硶
setSchemCard,
@@ -199,5 +210,6 @@
startMNFZ,
startMNPG,
handleNavClick,
+ updateSelectedLayers
}
})
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 52325b7..a52b6f7 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -60,6 +60,8 @@
import { showDeviceDetail } from "@/store";
import { setupTokenRefresh, getDangerPoint } from "@/api/hpApi.js";
import { convertToWKT } from "@/utils/wktUtils";
+import { getDeviceInfoShg } from "@/api/hpApi";
+import { deviceDictList, getDictName } from "@/constant/dict.js";
const route = useRoute();
const simStore = useSimStore();
@@ -106,6 +108,10 @@
getDangerPoint("110116110000").then((res) => {
simStore.DangerPoint = res.data.pageData;
});
+
+ getDeviceInfoShg().then((res) => {
+ simStore.devices = res.data.pageData;
+ });
try {
const wktResult = convertToWKT(multiPolygonCoordinates);
// console.log(wktResult,'a');
diff --git a/src/views/left/CitySim.vue b/src/views/left/CitySim.vue
index 6e70e1d..6dc1bb3 100644
--- a/src/views/left/CitySim.vue
+++ b/src/views/left/CitySim.vue
@@ -522,7 +522,7 @@
// startSimulate();
ElMessage.warning({
- message: "璇疯繑鍥炴柟妗堝垪琛ㄥ紑濮嬫ā鎷燂紒",
+ message: "璇疯繑鍥炴柟妗堝垪琛ㄧ瓑寰呮ā鎷熺粨鏋滐紒",
duration: 10000, // 鎻愮ず妗嗘樉绀烘椂闀匡紝鍗曚綅涓烘绉掞紝榛樿鏄�3000姣
});
} catch (error) {
diff --git a/src/views/left/KGSimOption/HistorySimulation.vue b/src/views/left/KGSimOption/HistorySimulation.vue
index 6e2286f..bb3c255 100644
--- a/src/views/left/KGSimOption/HistorySimulation.vue
+++ b/src/views/left/KGSimOption/HistorySimulation.vue
@@ -197,7 +197,7 @@
// startSimulate();
ElMessage.warning({
- message: "璇疯繑鍥炴柟妗堝垪琛ㄥ紑濮嬫ā鎷燂紒",
+ message: "璇疯繑鍥炴柟妗堝垪琛ㄧ瓑寰呮ā鎷熺粨鏋滐紒",
duration: 10000, // 鎻愮ず妗嗘樉绀烘椂闀匡紝鍗曚綅涓烘绉掞紝榛樿鏄�3000姣
});
} catch (error) {
diff --git a/src/views/left/KGSimOption/PredictiveSimulation.vue b/src/views/left/KGSimOption/PredictiveSimulation.vue
index a82bb56..ee52e3f 100644
--- a/src/views/left/KGSimOption/PredictiveSimulation.vue
+++ b/src/views/left/KGSimOption/PredictiveSimulation.vue
@@ -291,7 +291,7 @@
// startSimulate();
ElMessage.warning({
- message: "璇疯繑鍥炴柟妗堝垪琛ㄥ紑濮嬫ā鎷燂紒",
+ message: "璇疯繑鍥炴柟妗堝垪琛ㄧ瓑寰呮ā鎷熺粨鏋滐紒",
duration: 10000, // 鎻愮ず妗嗘樉绀烘椂闀匡紝鍗曚綅涓烘绉掞紝榛樿鏄�3000姣
});
} catch (error) {
--
Gitblit v1.9.3