接入视频流

wangyawei

2025-04-18 2d90fa3dc99fced159d0bc76939fd9b88e6aafe1

 src/components/tools/LayerTree.vue

@@ -1,22 +1,29 @@
<template>
  <div class="layer-tree">
    <<<<<<< HEAD <el-tree ref="treeRef" style="max-width: 600px" show-checkbox node-key="label" :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" />
    >>>>>>> f82eb01fe65e513fb43342db0e25cafa0e0d2db8
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, 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 } from '@/api/index.js'
const route = useRoute()
import { ref, onMounted, onBeforeUnmount, watch, 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 } from "@/api/index.js";
const route = useRoute();
const treeData = ref([
  {
    label: "三维服务",
    children: [{ label: "模型数据" }, { label: "地形数据" }, { label: "影像数据" }],
    children: [
      { label: "模型数据" },
      { label: "地形数据" },
      { label: "影像数据" },
    ],
  },
  {
    label: "图层数据",
@@ -41,40 +48,39 @@
      },
    ],
  },
])
const treeRef = ref(null)
const treeMap = new Map()
const defaultSelectedKeys = ref(["模型数据", "影像数据", "地形数据"])
]);
const treeRef = ref(null);
const treeMap = new Map();
const defaultSelectedKeys = ref(["模型数据", "影像数据", "地形数据"]);
function handleCheckChange (data, checked, indeterminate) {
  const label = data.label
  const list = treeMap.get(label)
  const label = data.label;
  const list = treeMap.get(label);
  if (list) {
    toggleLayerVisible(label, checked)
    return
    toggleLayerVisible(label, checked);
    return;
  }
  switch (label) {
    case "模型数据":
      list.show = checked
      break
      list.show = checked;
      break;
    case "北京市隐患点":
      console.log("北京市隐患点", checked, indeterminate)
      break
      console.log("北京市隐患点", checked, indeterminate);
      break;
    case "孙胡沟隐患点":
      console.log("孙胡沟隐患点", checked, indeterminate)
      break
      console.log("孙胡沟隐患点", checked, indeterminate);
      break;
    case "泥石流隐患点面数据":
      console.log("泥石流隐患点面数据", checked, indeterminate)
      break
      console.log("泥石流隐患点面数据", checked, indeterminate);
      break;
    case "综合监测设备信息":
      console.log("综合监测设备信息", checked, indeterminate)
      break
      console.log("综合监测设备信息", checked, indeterminate);
      break;
    case "孙胡沟仿真标注地物":
      console.log("孙胡沟仿真标注地物", checked, indeterminate)
      break
      console.log("孙胡沟仿真标注地物", checked, indeterminate);
      break;
    case "避险点":
      addTetrahedron()
      break

      addTetrahedron();
      break;
  }
}
function initMap () {
@@ -92,6 +98,11 @@
    sourceType: "ctb",
    url: "http://106.120.22.26:9103/gisserver/ctsserver/llmbdem",
  })
  // let TerrainLayer = earthCtrl.factory.createTerrainLayer({
  //   sourceType: "ctb",
  //   url: "https://tiles1.geovisearth.com/base/v1/terrain?token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
  //   requestVertexNormals: true,
  // });
  // treeMap.set("影像数据", ImageryLayer)
  treeMap.set("地形数据", TerrainLayer)
}
@@ -257,23 +268,23 @@
    latitude: 40.533623,
    longitude: 116.602406,
  },
])
]);

function initDevicePoint () {
  let list = []
function initDevicePoint() {
  let list = [];

  devicetList.value.forEach(item => {
    item.type = getDictName(deviceDictList, item.dictDeviceType)
    item.name = item.type
    item.id = item.deviceId
    item.className = "device"
    item.showLabel = true
    const entity = createPoint(item)
    entity.show = false
  devicetList.value.forEach((item) => {
    item.type = getDictName(deviceDictList, item.dictDeviceType);
    item.name = item.type;
    item.id = item.deviceId;
    item.className = "device";
    item.showLabel = true;
    const entity = createPoint(item);
    entity.show = false;

    list.push(entity)
  })
  treeMap.set("综合监测设备信息", list)
    list.push(entity);
  });
  treeMap.set("综合监测设备信息", list);
}

const districtList = ref([
@@ -301,7 +312,8 @@
    monitor: "",
    monitorAdvice: "",
    name: "尹家西沟尹建燕家屋后崩塌隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
@@ -352,7 +364,8 @@
    monitor: "",
    monitorAdvice: "",
    name: "河西于凤英家屋后崩塌隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
@@ -403,7 +416,8 @@
    monitor: "",
    monitorAdvice: "",
    name: "南梁小东沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查,立警示牌",
@@ -454,7 +468,8 @@
    monitor: "",
    monitorAdvice: "",
    name: "大窑沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已监测、已治理",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
@@ -505,7 +520,8 @@
    monitor: "",
    monitorAdvice: "",
    name: "大东沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已治理",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移",
@@ -556,8 +572,10 @@
    monitor: "",
    monitorAdvice: "",
    name: "尹家西沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已监测；灾害体变化：4处坡积物垮塌，堆积至坡脚，方量约20m³。",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes:
      "已监测；灾害体变化：4处坡积物垮塌，堆积至坡脚，方量约20m³。",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移",
    preventionUnit: "乡镇",
@@ -607,7 +625,8 @@
    monitor: "",
    monitorAdvice: "",
    name: "北大地西洼子沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "沟口正对房屋，降雨时出水量大，建议治理，汛期加强巡查",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
@@ -658,7 +677,8 @@
    monitor: "",
    monitorAdvice: "",
    name: "范家庄王秀莲家屋后崩塌隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "边坡较陡，顺向岩层，房屋靠近坡脚，建议尽快治理",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
@@ -709,7 +729,8 @@
    monitor: "",
    monitorAdvice: "",
    name: "三亩地范忠田家屋后崩塌隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，更换警示牌",
@@ -760,8 +781,10 @@
    monitor: "",
    monitorAdvice: "",
    name: "于家西沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已监测，2018村已治理；沟口堆积扇明显，正对房屋，建议汛期加强巡查",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes:
      "已监测，2018村已治理；沟口堆积扇明显，正对房屋，建议汛期加强巡查",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移",
    preventionUnit: "乡镇",
@@ -811,7 +834,8 @@
    monitor: "",
    monitorAdvice: "",
    name: "椴树底下东沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已治理：威胁对象重复：与110116030015重复5户11人",
    preventionLevel: "",
    preventionPlan: "定期巡查，预警转移，立警示牌",
@@ -862,7 +886,8 @@
    monitor: "",
    monitorAdvice: "",
    name: "河东南沟泥石流隐患点",
    number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    number:
      "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
    preventionDes: "已监测",
    preventionLevel: "",
    preventionPlan: "定期巡查,立警示牌",
@@ -889,40 +914,39 @@
    volumePotential: "",
    width: 0,
  },
])
]);

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

let divPointList = [];

let divPointList = []
function initDuanmianPoint() {
  getDuanMainData().then((res) => {
    const duanmianList = res.data;
    const list = [];
    duanmianList.forEach((item) => {
      item.id = item.id + item.alias;
      item.name = item.alias;
      item.longitude = item.lon;
      item.latitude = item.lat;
      item.showBillboard = false;
      item.className = "district";

function initDuanmianPoint () {
  getDuanMainData().then(res => {
    const duanmianList = res.data
    const list = []
    duanmianList.forEach(item => {
      item.id = item.id + item.alias
      item.name = item.alias
      item.longitude = item.lon
      item.latitude = item.lat
      item.showBillboard = false
      item.className = "district"

      const entity = createPoint(item)
      entity.show = false
      list.push(entity)
      return
      const entity = createPoint(item);
      entity.show = false;
      list.push(entity);
      return;
      const divPoint = earthCtrl.factory.createDivPoint(
        item.alias,
        { lon: longitude, lat: latitude },
@@ -937,26 +961,23 @@
          near: 0,
          far: 500000,
        }
      )
      divPoint.item.show = false
      console.log(divPoint)
      );
      divPoint.item.show = false;
      console.log(divPoint);

      divPointList.push(divPoint.item)
    })
    treeMap.set("孙胡沟仿真标注地物", list)
  })

  divPointList.push(divPoint.item);
});
treeMap.set("孙胡沟仿真标注地物", list);
  });
}

function addTetrahedron (visible) {
  const emergencyAreaList = []
function addTetrahedron(visible) {
  const emergencyAreaList = [];

  loadAreaPolygon("/json/emergency_area.geojson", true).then(entities => {
    emergencyAreaList.push(...entities)
  })
  loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => {
    emergencyAreaList.push(...entities);
  });
  // console.log('polygon', polygon);



  let list = [
    {
@@ -977,8 +998,8 @@
      latitude: 40.558199,
      altitude: 528,
    },
  ]
  list.forEach(item => {
  ];
  list.forEach((item) => {
    let point = earthCtrl.factory.addTetrahedron({
      position: {
        lon: item.longitude,
@@ -987,70 +1008,78 @@
      },
      multiple: 1.0,
      scale: new SmartEarth.Cesium.Cartesian3(20, 20, 20),
    })
    console.log("point", point)
    emergencyAreaList.push(point)

  })
  treeMap.set("避险点", emergencyAreaList)

    });
    console.log("point", point);
    emergencyAreaList.push(point);
  });
  treeMap.set("避险点", emergencyAreaList);
}
function toggleLayerVisible (name, checked) {
  const entityList = treeMap.get(name)
function toggleLayerVisible(name, checked) {
  const entityList = treeMap.get(name);
  if (Array.isArray(entityList) && entityList.length > 0) {
    entityList.forEach(entity => {
      entity.show = checked
    })
    entityList.forEach((entity) => {
      entity.show = checked;
    });
  }
  treeMap.set(name, entityList)
  treeMap.set(name, entityList);
}

function getData () {
  initDevicePoint()
  initDistrictPoint()
  initDuanmianPoint()
function getData() {
  initDevicePoint();
  initDistrictPoint();
  initDuanmianPoint();
}

// 通过 store 传递需要选中的key
watch(() => checkedKeys.value, (keys) => {
  if (keys && Array.isArray(keys)) {
    treeRef.value.setCheckedKeys(defaultSelectedKeys.value.concat(keys), true)
watch(
  () => checkedKeys.value,
  (keys) => {
    if (keys && Array.isArray(keys)) {
      treeRef.value.setCheckedKeys(
        defaultSelectedKeys.value.concat(keys),
        true
      );
    }
  }
})
);

watch(
  () => route.fullPath,
  path => {
    const defaultKeys = defaultSelectedKeys.value
  (path) => {
    const defaultKeys = defaultSelectedKeys.value;
    if (path == "/yhgl") {
      treeRef.value.setCheckedKeys(defaultKeys.concat("孙胡沟隐患点"), true)
      toggleLayerVisible("孙胡沟隐患点", true)
      toggleLayerVisible("综合监测设备信息", false)
      toggleLayerVisible("孙胡沟仿真标注地物", false)

      treeRef.value.setCheckedKeys(defaultKeys.concat("孙胡沟隐患点"), true);
      toggleLayerVisible("孙胡沟隐患点", true);
      toggleLayerVisible("综合监测设备信息", false);
      toggleLayerVisible("孙胡沟仿真标注地物", false);
    } else if (path == "/zhjc") {
      treeRef.value.setCheckedKeys(defaultKeys.concat("综合监测设备信息"), true)
      toggleLayerVisible("综合监测设备信息", true)
      toggleLayerVisible("孙胡沟隐患点", false)
      toggleLayerVisible("孙胡沟仿真标注地物", false)
      treeRef.value.setCheckedKeys(
        defaultKeys.concat("综合监测设备信息"),
        true
      );
      toggleLayerVisible("综合监测设备信息", true);
      toggleLayerVisible("孙胡沟隐患点", false);
      toggleLayerVisible("孙胡沟仿真标注地物", false);
    } else if (path == "/mnfz") {
      treeRef.value.setCheckedKeys(defaultKeys.concat("孙胡沟仿真标注地物"), true)
      toggleLayerVisible("孙胡沟仿真标注地物", true)
      toggleLayerVisible("孙胡沟隐患点", false)
      toggleLayerVisible("综合监测设备信息", false)

      treeRef.value.setCheckedKeys(
        defaultKeys.concat("孙胡沟仿真标注地物"),
        true
      );
      toggleLayerVisible("孙胡沟仿真标注地物", true);
      toggleLayerVisible("孙胡沟隐患点", false);
      toggleLayerVisible("综合监测设备信息", false);
    } else {
      treeRef.value.setCheckedKeys(defaultKeys, true)
      treeRef.value.setCheckedKeys(defaultKeys, true);
    }
  }
)
);
onMounted(() => {
  initMap()
  getData()
})
  initMap();
  getData();
});
onUnmounted(() => {
  viewer.entities.removeAll()
})
  viewer.entities.removeAll();
});
</script>

<style lang="less" scoped>
@@ -1063,4 +1092,4 @@
  height: 200px;
  z-index: 99;
}
</style>
</style>