From eb5a5c24c25de74c828ac8d445105f10a8e47cc7 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 21 四月 2025 17:00:04 +0800
Subject: [PATCH] change
---
src/components/tools/LayerTree.vue | 288 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 163 insertions(+), 125 deletions(-)
diff --git a/src/components/tools/LayerTree.vue b/src/components/tools/LayerTree.vue
index 6105ceb..fa787b1 100644
--- a/src/components/tools/LayerTree.vue
+++ b/src/components/tools/LayerTree.vue
@@ -1,69 +1,143 @@
<template>
<div class="layer-tree">
- <el-tree ref="treeRef" style="max-width: 600px" show-checkbox
- :default-checked-keys="defaultSelectedKeys" @check-change="handleCheckChange" :data="treeData" />
+ <el-tree
+ ref="treeRef"
+ style="max-width: 600px"
+ show-checkbox
+ node-key="label"
+ :default-checked-keys="defaultSelectedKeys"
+ @check-change="handleCheckChange"
+ :data="treeData"
+ />
</div>
</template>
<script setup>
-import { ref, onMounted, onBeforeUnmount, watch, onUnmounted } from "vue";
+import { ref, onMounted, watch, nextTick,onUnmounted } 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, getDevicetListData, getDistrictListData } from "@/api/index.js";
+
const route = useRoute();
+
+// 鏍戝舰缁撴瀯鏁版嵁
const treeData = ref([
{
label: "涓夌淮鏈嶅姟",
children: [
{ label: "妯″瀷鏁版嵁" },
- { label: "鍦板舰鏁版嵁" },
+ { label: "鍦板舰鏁版嵁" }, // 纭繚杩欓噷鐨� label 鏄� "鍦板舰鏁版嵁"
{ 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);
+ // 鍒濆鍖栨ā鍨嬫暟鎹�
+ // 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);
+}
+
+/**
+ * 澶勭悊澶嶉�夋鐘舵�佸彉鍖�
+ */
function handleCheckChange(data, checked, indeterminate) {
const label = data.label;
- const list = treeMap.get(label);
+ if (label === "褰卞儚鏁版嵁") {
+ if (checked) {
+ // 鍔犺浇褰卞儚鏁版嵁
+ console.log("寮�濮嬪姞杞藉奖鍍忔暟鎹�...");
+ let 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 "妯″瀷鏁版嵁":
case "褰卞儚鏁版嵁":
case "鍦板舰鏁版嵁":
- console.warn(`鏈垵濮嬪寲 ${label} 鐨勫浘灞俙);
- break;
case "鍖椾含甯傞殣鎮ｇ偣":
case "瀛欒儭娌熼殣鎮ｇ偣":
case "娉ョ煶娴侀殣鎮ｇ偣闈㈡暟鎹�":
@@ -74,35 +148,39 @@
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",
- // });
- // treeMap.set("褰卞儚鏁版嵁", ImageryLayer);
+/**
+ * 鍒囨崲鍥惧眰鍙鎬�
+ */
+function toggleLayerVisible(name, checked) {
+ const entityList = treeMap.get(name);
- // 鍒濆鍖栧湴褰㈡暟鎹�
- // let TerrainLayer = earthCtrl.factory.createTerrainLayer({
- // sourceType: "ctb",
- // url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem",
- // });
- // treeMap.set("鍦板舰鏁版嵁", TerrainLayer);
+ console.log(`Toggling visibility for ${name}:`, checked);
+
+ if (Array.isArray(entityList)) {
+ entityList.forEach((entity) => {
+ console.log(`Setting entity show to:`, checked);
+ entity.show = checked;
+ });
+ } else if (entityList && typeof entityList.show !== 'undefined') {
+ console.log(`Setting layer show to:`, checked);
+ entityList.show = checked;
+ } else {
+ console.error(`鏃犳硶璁剧疆鍥惧眰 ${name} 鐨勫彲瑙佹�);
+ }
}
+
+// 璁惧鍒楄〃
const devicetList = ref([]);
+
+/**
+ * 鑾峰彇璁惧鍒楄〃骞跺垵濮嬪寲璁惧鐐�
+ */
const getDevicetList = async () => {
await getDevicetListData().then((res) => {
console.log(res.data, 'devicetList.value2');
devicetList.value = res.data;
- })
+ });
};
async function initDevicePoint() {
@@ -122,15 +200,21 @@
treeMap.set("缁煎悎鐩戞祴璁惧淇℃伅", list);
}
+// 鍖哄煙鍒楄〃
const districtList = ref([]);
+
+/**
+ * 鑾峰彇鍖哄煙鍒楄〃骞跺垵濮嬪寲鍖哄煙鐐�
+ */
const getDistrictList = async () => {
await getDistrictListData().then((res) => {
districtList.value = res.data;
- })
+ });
};
+
async function initDistrictPoint() {
let list = [];
- await getDistrictList()
+ await getDistrictList();
districtList.value.forEach((item) => {
item.showBillboard = true;
item.className = "district";
@@ -144,6 +228,9 @@
let divPointList = [];
+/**
+ * 鍒濆鍖栨柇闈㈢偣
+ */
function initDuanmianPoint() {
getDuanMainData().then((res) => {
const duanmianList = res.data;
@@ -159,96 +246,41 @@
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);
});
}
+/**
+ * 娣诲姞閬块櫓鐐�
+ */
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.createRichTextPoint("閬块櫓鐐�", [item.longitude, item.latitude, item.altitude - 10], {
- distanceDisplayCondition: new SmartEarth.Cesium.DistanceDisplayCondition(0, 2000),
- fontColor: "#ffffff",
- fontSize: 20
- }, "0");
- console.log("point", point);
- emergencyAreaList.push(point);
- });
- treeMap.set("閬块櫓鐐�", emergencyAreaList);
-}
-function toggleLayerVisible(name, checked) {
- const entityList = treeMap.get(name);
-
- console.log(`Toggling visibility for ${name}:`, checked);
-
- if (Array.isArray(entityList)) {
- entityList.forEach((entity) => {
- console.log(`Setting entity show to:`, checked);
- entity.show = checked;
+ // 榛樿闅愯棌閬块櫓鐐�
+ entities.forEach((entity) => {
+ entity.show = false;
});
- } else if (entityList && typeof entityList.show !== 'undefined') {
- console.log(`Setting layer show to:`, checked);
- entityList.show = checked;
- } else {
- console.error(`鏃犳硶璁剧疆鍥惧眰 ${name} 鐨勫彲瑙佹�);
- }
+
+ // 灏嗛伩闄╃偣瀹炰綋瀛樺偍鍒� treeMap
+ treeMap.set("閬块櫓鐐�", entities);
+ });
}
+/**
+ * 鍒濆鍖栨墍鏈夋暟鎹�
+ */
function getData() {
initDevicePoint();
initDistrictPoint();
initDuanmianPoint();
+ addTetrahedron();
}
-// 閫氳繃 store 浼犻�掗渶瑕侀�変腑鐨刱ey
+// 鐩戝惉 store 涓殑 checkedKeys 鍙樺寲
watch(
() => checkedKeys.value,
(keys) => {
@@ -261,6 +293,7 @@
}
);
+// 鐩戝惉璺敱鍙樺寲
watch(
() => route.fullPath,
(path) => {
@@ -291,10 +324,18 @@
}
}
);
+
+// 缁勪欢鎸傝浇鏃跺垵濮嬪寲
onMounted(() => {
initMap();
getData();
+ nextTick(() => {
+ // 纭繚鏍戠粍浠舵覆鏌撳畬鎴愬悗璁剧疆榛樿閫変腑椤�
+ treeRef.value.setCheckedKeys(defaultSelectedKeys.value, true);
+ });
});
+
+// 缁勪欢鍗歌浇鏃舵竻鐞嗚祫婧�
onUnmounted(() => {
viewer.entities.removeAll();
});
@@ -302,12 +343,9 @@
<style lang="less" scoped>
.layer-tree {
- // position: absolute;
- // top: 11%;
- // right: 25%;
background: url("@/assets/img/tools/plotting_new.png");
width: 200px;
height: 200px;
z-index: 99;
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3