<template>
|
<div class="layer-tree">
|
<el-tree ref="treeRef" style="max-width: 600px" show-checkbox
|
:default-checked-keys="defaultSelectedKeys" @check-change="handleCheckChange" :data="treeData" />
|
</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, getDevicetListData, getDistrictListData } from "@/api/index.js";
|
const route = useRoute();
|
const treeData = ref([
|
{
|
label: "三维服务",
|
children: [
|
{ label: "模型数据" },
|
{ label: "地形数据" },
|
{ label: "影像数据" },
|
],
|
},
|
{
|
label: "图层数据",
|
children: [
|
{
|
label: "北京市隐患点",
|
},
|
{
|
label: "孙胡沟隐患点",
|
},
|
// {
|
// label: "泥石流隐患点面数据",
|
// },
|
{
|
label: "综合监测设备信息",
|
},
|
{
|
label: "孙胡沟断面",
|
},
|
{
|
label: "避险点",
|
},
|
],
|
},
|
]);
|
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);
|
|
if (list) {
|
toggleLayerVisible(label, checked);
|
return;
|
}
|
switch (label) {
|
case "模型数据":
|
case "影像数据":
|
case "地形数据":
|
console.warn(`未初始化 ${label} 的图层`);
|
break;
|
case "北京市隐患点":
|
case "孙胡沟隐患点":
|
case "泥石流隐患点面数据":
|
case "综合监测设备信息":
|
case "孙胡沟断面":
|
case "避险点":
|
console.log(label, checked, indeterminate);
|
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);
|
|
// 初始化地形数据
|
// let TerrainLayer = earthCtrl.factory.createTerrainLayer({
|
// sourceType: "ctb",
|
// url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem",
|
// });
|
// treeMap.set("地形数据", TerrainLayer);
|
}
|
const devicetList = ref([]);
|
const getDevicetList = async () => {
|
await getDevicetListData().then((res) => {
|
console.log(res.data, 'devicetList.value2');
|
devicetList.value = res.data;
|
})
|
};
|
|
async function initDevicePoint() {
|
let list = [];
|
await getDevicetList();
|
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);
|
}
|
|
const districtList = ref([]);
|
const getDistrictList = async () => {
|
await getDistrictListData().then((res) => {
|
districtList.value = res.data;
|
})
|
};
|
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);
|
}
|
|
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";
|
|
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;
|
});
|
} else if (entityList && typeof entityList.show !== 'undefined') {
|
console.log(`Setting layer show to:`, checked);
|
entityList.show = checked;
|
} else {
|
console.error(`无法设置图层 ${name} 的可见性`);
|
}
|
}
|
|
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(
|
() => route.fullPath,
|
(path) => {
|
const defaultKeys = defaultSelectedKeys.value;
|
if (path == "/yhgl") {
|
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);
|
} else if (path == "/mnfz") {
|
treeRef.value.setCheckedKeys(
|
defaultKeys.concat("孙胡沟断面"),
|
false
|
);
|
toggleLayerVisible("孙胡沟断面", false);
|
toggleLayerVisible("孙胡沟隐患点", false);
|
toggleLayerVisible("综合监测设备信息", false);
|
} else {
|
treeRef.value.setCheckedKeys(defaultKeys, true);
|
}
|
}
|
);
|
onMounted(() => {
|
initMap();
|
getData();
|
});
|
onUnmounted(() => {
|
viewer.entities.removeAll();
|
});
|
</script>
|
|
<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>
|
