change

wangjuncheng

2025-04-21 eb5a5c24c25de74c828ac8d445105f10a8e47cc7

 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 传递需要选中的key
// 监听 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>