<template>
|
<div class="layer-tree">
|
<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,
|
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, getDistrictListData } from "@/api/index.js";
|
import { getDeviceInfo, getDangerPoint } from "@/api/hpApi";
|
|
import { useSimStore } from "@/store/simulation";
|
|
const simStore = useSimStore();
|
|
const route = useRoute();
|
|
// 树形结构数据
|
const treeData = ref([
|
{
|
label: "三维服务",
|
children: [
|
{ label: "模型数据" },
|
{ label: "地形数据" },
|
{ label: "影像数据" },
|
],
|
},
|
{
|
label: "图层数据",
|
children: [
|
{ label: "北京市隐患点" },
|
{ label: "孙胡沟隐患点" },
|
{ label: "综合监测设备信息" },
|
{ label: "孙胡沟断面" },
|
{ label: "避险场所" },
|
],
|
},
|
]);
|
|
// 默认选中的节点
|
const defaultSelectedKeys = ref(["地形数据"]); // 确保与 treeData 的 label 完全匹配
|
|
// Tree 实例引用
|
const treeRef = ref(null);
|
|
// 存储图层实体的 Map
|
const treeMap = new Map();
|
|
/**
|
* 初始化地图
|
*/
|
// 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 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) {
|
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 {
|
// 移除影像数据
|
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;
|
}
|
if (label === "综合监测设备信息") {
|
simStore.DeviceShowSwitch = checked;
|
if (checked) {
|
if (!treeMap.get("综合监测设备信息")) {
|
} else {
|
toggleLayerVisible("综合监测设备信息", true);
|
}
|
} else {
|
toggleLayerVisible("综合监测设备信息", false);
|
}
|
return;
|
}
|
|
// 其他图层的处理逻辑
|
const list = treeMap.get(label);
|
if (list) {
|
toggleLayerVisible(label, checked);
|
return;
|
}
|
|
switch (label) {
|
case "影像数据":
|
case "地形数据":
|
case "北京市隐患点":
|
case "孙胡沟隐患点":
|
case "泥石流隐患点面数据":
|
case "综合监测设备信息":
|
case "孙胡沟断面":
|
case "避险场所":
|
console.log(label, checked, indeterminate);
|
break;
|
}
|
}
|
|
/**
|
* 切换图层可见性
|
*/
|
function toggleLayerVisible(name, checked) {
|
const entityList = treeMap.get(name);
|
if (Array.isArray(entityList)) {
|
entityList.forEach((entity) => {
|
// console.log(`Setting entity show to:`, checked);
|
entity.show = checked;
|
});
|
} else if (entityList && typeof entityList.show !== "undefined") {
|
entityList.show = checked;
|
} else {
|
console.error(`无法设置图层 ${name} 的可见性`);
|
}
|
}
|
|
// 监测设备列表
|
const devicetList = ref([]);
|
|
// 监测设备列表
|
const getDevicetList = async () => {
|
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.deviceName.split("孙胡沟")[1];
|
item.id = item.deviceId;
|
item.className = "device";
|
item.showLabel = true;
|
const entity = createPoint(item);
|
entity.show = false;
|
list.push(entity);
|
});
|
|
treeMap.set("综合监测设备信息", list);
|
}
|
|
// 隐患点列表
|
watchEffect(() => {
|
const dangerPoints = simStore.DangerPoint.filter((item) =>
|
item.position?.includes("孙胡沟")
|
);
|
|
if (dangerPoints && dangerPoints.length > 0) {
|
const 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 = [];
|
/**
|
* 初始化断面点
|
*/
|
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);
|
});
|
treeMap.set("孙胡沟断面", list);
|
});
|
}
|
|
/**
|
* 添加避险场所
|
*/
|
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);
|
});
|
}
|
|
/**
|
* 初始化所有数据
|
*/
|
function getData() {
|
// initDevicePoint();
|
// initDistrictPoint();
|
initDuanmianPoint();
|
addTetrahedron();
|
}
|
|
// 监听 store 中的 checkedKeys 变化
|
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();
|
nextTick(() => {
|
// 确保树组件渲染完成后设置默认选中项
|
treeRef.value.setCheckedKeys(defaultSelectedKeys.value, true);
|
});
|
});
|
|
// 组件卸载时清理资源
|
onUnmounted(() => {
|
viewer.entities.removeAll();
|
});
|
</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;
|
z-index: 99;
|
overflow: hidden;
|
}
|
/deep/ .el-tree {
|
overflow: hidden !important;
|
}
|
</style>
|
