change

wangjuncheng

2025-05-19 f5688d9765782bbb97b3abb8ee99fe7b9834a149

 src/components/tools/LayerTree.vue

@@ -13,13 +13,26 @@
</template>

<script setup>
import { ref, onMounted, watch, nextTick,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, getDevicetListData, getDistrictListData } 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();

@@ -29,7 +42,7 @@
    label: "三维服务",
    children: [
      { label: "模型数据" },
      { label: "地形数据" }, // 确保这里的 label 是 "地形数据"
      { label: "地形数据" },
      { label: "影像数据" },
    ],
  },
@@ -40,7 +53,7 @@
      { label: "孙胡沟隐患点" },
      { label: "综合监测设备信息" },
      { label: "孙胡沟断面" },
      { label: "避险点" },
      { label: "避险场所" },
    ],
  },
]);
@@ -57,42 +70,84 @@
/**
 * 初始化地图
 */
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,19 +169,45 @@
        "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);
    }
    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);
@@ -143,7 +224,7 @@
    case "泥石流隐患点面数据":
    case "综合监测设备信息":
    case "孙胡沟断面":
    case "避险点":
    case "避险场所":
      console.log(label, checked, indeterminate);
      break;
  }
@@ -154,41 +235,35 @@
 */
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);
      // console.log(`Setting entity show to:`, checked);
      entity.show = checked;
    });
  } else if (entityList && typeof entityList.show !== 'undefined') {
    console.log(`Setting layer show to:`, checked);
  } else if (entityList && typeof entityList.show !== "undefined") {
    entityList.show = checked;
  } else {
    console.error(`无法设置图层 ${name} 的可见性`);
    // console.error(`无法设置图层 ${name} 的可见性`);
  }
}

// 设备列表
// 监测设备列表
const devicetList = ref([]);

/**
 * 获取设备列表并初始化设备点
 */
// 监测设备列表
const getDevicetList = async () => {
  await getDevicetListData().then((res) => {
    console.log(res.data, 'devicetList.value2');
    devicetList.value = res.data;
  });
  const res = await getDeviceInfo(); // 调整getDeviceInfo以接受动态参数，如果需要的话
  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.type;
    item.name = item.deviceName.split("孙胡沟")[1];
    item.id = item.deviceId;
    item.className = "device";
    item.showLabel = true;
@@ -200,34 +275,34 @@
  treeMap.set("综合监测设备信息", list);
}

// 区域列表
const districtList = ref([]);
// 隐患点列表
// watchEffect(() => {
//   const dangerPoints = simStore.DangerPoint.filter((item) =>
//     item.position?.includes("孙胡沟")
//   );

/**
 * 获取区域列表并初始化区域点
 */
const getDistrictList = async () => {
  await getDistrictListData().then((res) => {
    districtList.value = res.data;
  });
};
//   if (dangerPoints && dangerPoints.length > 0) {
//     const list = [];

async function initDistrictPoint() {
  let list = [];
  await getDistrictList();
  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);
}
//     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 = [];

/**
 * 初始化断面点
 */
@@ -252,21 +327,21 @@
}

/**
 * 添加避险点
 * 添加避险场所
 */
function addTetrahedron(visible) {
  const emergencyAreaList = [];
  // 加载避险点底层面片
  // 加载避险场所底层面片
  loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => {
    emergencyAreaList.push(...entities);

    // 默认隐藏避险点
    // 默认隐藏避险场所
    entities.forEach((entity) => {
      entity.show = false;
    });

    // 将避险点实体存储到 treeMap
    treeMap.set("避险点", entities);
    // 将避险场所实体存储到 treeMap
    treeMap.set("避险场所", entities);
  });
}

@@ -274,8 +349,8 @@
 * 初始化所有数据
 */
function getData() {
  initDevicePoint();
  initDistrictPoint();
  // initDevicePoint();
  // initDistrictPoint();
  initDuanmianPoint();
  addTetrahedron();
}
@@ -312,10 +387,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);
@@ -342,10 +414,15 @@
</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;
  // height: 200px;
  z-index: 99;
  overflow: hidden;
}
</style>
/deep/ .el-tree {
  overflow: hidden !important;
}
</style>