From df7876b99d8e8d359909756d42e909dcc215fa38 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期一, 21 四月 2025 17:22:49 +0800
Subject: [PATCH] 修改图层显示
---
src/components/tools/LayerTree.vue | 131 +++++++++++++++++++++++++++++--------------
1 files changed, 89 insertions(+), 42 deletions(-)
diff --git a/src/components/tools/LayerTree.vue b/src/components/tools/LayerTree.vue
index fa787b1..e898e6d 100644
--- a/src/components/tools/LayerTree.vue
+++ b/src/components/tools/LayerTree.vue
@@ -13,13 +13,18 @@
</template>
<script setup>
-import { ref, onMounted, watch, nextTick,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";
+import {
+ getDuanMainData,
+ getDevicetListData,
+ getDistrictListData,
+} from "@/api/index.js";
+import { init } from "echarts";
const route = useRoute();
@@ -57,42 +62,85 @@
/**
* 鍒濆鍖栧湴鍥�
*/
-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);
- // });
+// 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 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) {
- // 鍔犺浇褰卞儚鏁版嵁
- console.log("寮�濮嬪姞杞藉奖鍍忔暟鎹�...");
- let ImageryLayer = earthCtrl.factory.createImageryLayer({
- sourceType: "tms",
- url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
- });
+ 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 {
@@ -114,13 +162,15 @@
"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);
- });
+ modelPromise
+ .then((model) => {
+ console.log("妯″瀷鏁版嵁鍔犺浇瀹屾垚");
+ treeMap.set("妯″瀷鏁版嵁", model); // 灏嗘ā鍨嬫暟鎹瓨鍌ㄥ埌 treeMap
+ toggleLayerVisible("妯″瀷鏁版嵁", true); // 鏄剧ず妯″瀷鏁版嵁
+ })
+ .catch((error) => {
+ console.error("妯″瀷鏁版嵁鍔犺浇澶辫触:", error);
+ });
} else {
// 闅愯棌妯″瀷鏁版嵁
toggleLayerVisible("妯″瀷鏁版嵁", false);
@@ -162,7 +212,7 @@
console.log(`Setting entity show to:`, checked);
entity.show = checked;
});
- } else if (entityList && typeof entityList.show !== 'undefined') {
+ } else if (entityList && typeof entityList.show !== "undefined") {
console.log(`Setting layer show to:`, checked);
entityList.show = checked;
} else {
@@ -178,7 +228,7 @@
*/
const getDevicetList = async () => {
await getDevicetListData().then((res) => {
- console.log(res.data, 'devicetList.value2');
+ console.log(res.data, "devicetList.value2");
devicetList.value = res.data;
});
};
@@ -312,10 +362,7 @@
toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", false);
toggleLayerVisible("瀛欒儭娌熸柇闈�", false);
} else if (path == "/mnfz") {
- treeRef.value.setCheckedKeys(
- defaultKeys.concat("瀛欒儭娌熸柇闈�"),
- false
- );
+ treeRef.value.setCheckedKeys(defaultKeys.concat("瀛欒儭娌熸柇闈�"), false);
toggleLayerVisible("瀛欒儭娌熸柇闈�", false);
toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", false);
toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", false);
@@ -348,4 +395,4 @@
height: 200px;
z-index: 99;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3