<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 } 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: "图层数据",
|
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);
|
// 初始化模型数据
|
// 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;
|
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 "北京市隐患点":
|
case "孙胡沟隐患点":
|
case "泥石流隐患点面数据":
|
case "综合监测设备信息":
|
case "孙胡沟断面":
|
case "避险点":
|
console.log(label, checked, indeterminate);
|
break;
|
}
|
}
|
|
/**
|
* 切换图层可见性
|
*/
|
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} 的可见性`);
|
}
|
}
|
|
// 设备列表
|
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);
|
});
|
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>
|
.layer-tree {
|
background: url("@/assets/img/tools/plotting_new.png");
|
width: 200px;
|
height: 200px;
|
z-index: 99;
|
}
|
</style>
|
