修改图层显示

guonan

2025-04-21 df7876b99d8e8d359909756d42e909dcc215fa38

 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>
</style>