<template>
|
<div class="layer-tree">
|
<!-- 添加按钮
|
<el-button @click="printCurrentView" type="primary" style="margin-bottom: 10px;">
|
打印当前视图信息
|
</el-button> -->
|
<!-- 图层树 -->
|
<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, watchEffect } from "vue";
|
import {
|
createPoint,
|
removeEntities,
|
addTileset,
|
clearAllPoints,
|
} from "@/utils/map";
|
import { deviceDictList, getDictName } from "@/constant/dict.js";
|
import { useRoute } from "vue-router";
|
import {
|
loadAreaPolygon,
|
convertToGeoJson,
|
clearAreaPolygon,
|
} from "@/utils/area";
|
import { checkedKeys } from "@/store/index";
|
import { getDuanMainData } from "@/api/index.js";
|
import { useSimStore } from "@/store/simulation";
|
import { getSafePoint } from "@/api/hpApi";
|
|
const simStore = useSimStore();
|
const route = useRoute();
|
|
/**
|
* 打印当前视图的相机状态
|
*/
|
function printCurrentView() {
|
window.Viewer = earthCtrl.viewer;// 假设你已经在 data 或 setup 中定义了 viewer
|
const camera = earthCtrl.viewer.camera;
|
|
const view = {
|
destination: {
|
x: camera.position.x,
|
y: camera.position.y,
|
z: camera.position.z,
|
},
|
orientation: {
|
pitch: camera.pitch,
|
roll: camera.roll,
|
heading: camera.heading,
|
},
|
};
|
|
console.log('当前视图参数：', view);
|
}
|
/**
|
* 图层树配置数据
|
* 包含三维服务和图层数据两大分类
|
*/
|
const treeData = ref([
|
{
|
label: "三维服务",
|
children: [
|
{ label: "模型数据" },
|
{ label: "地形数据" },
|
{ label: "影像数据" },
|
],
|
},
|
{
|
label: "图层数据",
|
children: [
|
{ label: "北京市隐患点" },
|
{ label: "孙胡沟隐患点" },
|
{ label: "综合监测设备信息" },
|
{ label: "孙胡沟断面" },
|
{ label: "避险场所" },
|
],
|
},
|
{
|
label: "南窖乡",
|
children: [
|
{
|
label: "南窖乡影像",
|
type: "imagery",
|
url: "/imagery/tile/image/wmts/pTkjV3J9/{z}/{x}/{y}?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo"
|
},
|
{
|
label: "南窖乡地形",
|
type: "terrain",
|
url: "/imagery/tile/terrain/TBKJCcqO?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2148291.712223941, y: 4429896.46897996, z: 4055778.9577251095 },
|
orientation: { pitch: -0.7094729926433327, roll: 6.2829983479026374, heading: 6.228640490951177 }
|
}
|
},
|
{
|
label: "南窖乡地形模型1",
|
type: "model",
|
url: "/imagery/tile/model/service/LSR5ezfl/tileset.json?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2146689.939461115, y: 4426047.413821165, z: 4057984.6498454507 },
|
orientation: { pitch: -0.9541138124492012, roll: 0.00031687828366511184, heading: 6.140422591164119 }
|
}
|
},
|
{
|
label: "南窖乡地形模型2",
|
type: "model",
|
url: "/imagery/tile/model/service/uNsdeKPc/tileset.json?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2145340.8188580503, y: 4424796.321883301, z: 4059623.85371558 },
|
orientation: { pitch: -0.9541017116169872, roll: 0.000313870753641865, heading: 6.140425044701509 }
|
}
|
}
|
]
|
},
|
{
|
label: "金鸡台村",
|
children: [
|
{
|
label: "金鸡台村影像",
|
type: "imagery",
|
url: "/imagery/tile/image/wmts/qEToHR5Z/{z}/{x}/{y}?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo"
|
},
|
{
|
label: "金鸡台村地形",
|
type: "terrain",
|
url: "/imagery/tile/terrain/aEIeI21o?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2130224.9623079575, y: 4426008.165349956, z: 4068795.580264238 },
|
orientation: { pitch: -0.9127940858026111, roll: 6.282740114172059, heading: 0.08207325160381274 }
|
}
|
},
|
{
|
label: "金鸡台村模型1",
|
type: "model",
|
url: "/imagery/tile/model/service/1J2wMbnU/tileset.json?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2133104.794919741, y: 4425812.523913443, z: 4069478.3137610652 },
|
orientation: { pitch: -0.9541137913665527, roll: 0.00031687304371175173, heading: 6.140422595438931 }
|
}
|
},
|
{
|
label: "金鸡台村模型2",
|
type: "model",
|
url: "/imagery/tile/model/service/gaeULxdB/tileset.json?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2130956.971562582, y: 4426818.080505688, z: 4069740.7525420994 },
|
orientation: { pitch: -0.9541137309940142, roll: 0.0003168580385137787, heading: 6.140422607680212 }
|
}
|
},
|
{
|
label: "金鸡台村模型3",
|
type: "model",
|
url: "/imagery/tile/model/service/haujMGBj/tileset.json?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2132142.087145638, y: 4425161.123976678, z: 4070278.934587119 },
|
orientation: { pitch: -0.9541140402489301, roll: 0.0003169349017886347, heading: 6.140422544975061 }
|
}
|
},
|
{
|
label: "金鸡台村模型4",
|
type: "model",
|
url: "/imagery/tile/model/service/qMRvXo9Q/tileset.json?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2127321.106886179, y: 4421820.211235223, z: 4068832.7651704233 },
|
orientation: { pitch: -0.9541063907093843, roll: 0.00031503367875540533, heading: 6.140424095992006 }
|
}
|
}
|
]
|
},
|
{
|
label: "龙泉庄村",
|
children: [
|
{
|
label: "龙泉庄村影像",
|
type: "imagery",
|
url: "/imagery/tile/image/wmts/Tdjg608Z/{z}/{x}/{y}?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo"
|
},
|
{
|
label: "龙泉庄村地形",
|
type: "terrain",
|
url: "/imagery/tile/terrain/pLtaLGeZ?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2168757.031244387, y: 4352617.776664691, z: 4114967.541317504 },
|
orientation: { pitch: -0.4435676845783054, roll: 6.283154708563269, heading: 5.537612876549447 }
|
}
|
},
|
{
|
label: "龙泉庄村模型",
|
type: "model",
|
url: "/imagery/tile/model/service/vv0P5FuH/tileset.json?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2168663.968240228, y: 4355261.718587015, z: 4115712.067191204 },
|
orientation: { pitch: -0.9540906570127872, roll: 0.00031112334289318255, heading: 6.140427286015401 }
|
}
|
}
|
]
|
},
|
{
|
label: "峪沟村",
|
children: [
|
{
|
label: "峪沟村影像",
|
type: "imagery",
|
url: "/imagery/tile/image/wmts/okRsdbWk/{z}/{x}/{y}?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo"
|
},
|
{
|
label: "峪沟村地形",
|
type: "terrain",
|
url: "/imagery/tile/terrain/2LBx9e7E?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2170854.0167420367, y: 4358200.634596329, z: 4110425.3427262204 },
|
orientation: { pitch: -0.847848874762068, roll: 0.00008577448108137986, heading: 0.4679505123692884 }
|
}
|
},
|
{
|
label: "峪沟村模型",
|
type: "model",
|
url: "/imagery/tile/model/service/4QnI3jUW/tileset.json?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2173100.959020146, y: 4359294.155857249, z: 4110691.2853415837 },
|
orientation: { pitch: -0.9540973990229973, roll: 0.00031279893049074303, heading: 6.140425919087564 }
|
}
|
}
|
]
|
},
|
{
|
label: "灵水村",
|
children: [
|
{
|
label: "灵水村影像",
|
type: "imagery",
|
url: "/imagery/tile/image/wmts/sxVRibjH/{z}/{x}/{y}?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo"
|
},
|
{
|
label: "灵水村地形",
|
type: "terrain",
|
url: "/imagery/tile/terrain/N0INPZIN?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2127000.0250662216, y: 4408369.621939603, z: 4078610.664222384 },
|
orientation: { pitch: -0.4326441481504202, roll: 0.000025937982368162693, heading: 4.9973143963984015 }
|
}
|
},
|
{
|
label: "灵水村模型",
|
type: "model",
|
url: "/imagery/tile/model/service/hj3Ipgwk/tileset.json?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2128232.405466075, y: 4415420.0330180405, z: 4079261.2309530703 },
|
orientation: { pitch: -0.9541075114138131, roll: 0.00031531221697900236, heading: 6.140423868761242 }
|
}
|
}
|
]
|
},
|
{
|
label: "田庄村",
|
children: [
|
{
|
label: "田庄村影像",
|
type: "imagery",
|
url: "/imagery/tile/image/wmts/EDtElo3U/{z}/{x}/{y}?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo"
|
},
|
{
|
label: "田庄村地形",
|
type: "terrain",
|
url: "/imagery/tile/terrain/sDpC3pM8?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2136032.9273641515, y: 4399423.940210319, z: 4084681.6412534667 },
|
orientation: { pitch: -0.6380935762087248, roll: 6.283155058648237, heading: 6.117892190518964 }
|
}
|
},
|
{
|
label: "田庄村模型",
|
type: "model",
|
url: "/imagery/tile/model/service/Iakp0nhx/tileset.json?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
view: {
|
destination: { x: -2138006.584911224, y: 4402665.343671573, z: 4086466.2821442005 },
|
orientation: { pitch: -0.9541030942818041, roll: 0.0003142143946410769, heading: 6.140424764361058 }
|
}
|
}
|
]
|
}
|
]);
|
|
// 默认选中的节点（地形数据默认开启）
|
const defaultSelectedKeys = ref(["地形数据"]);
|
|
// Tree 实例引用
|
const treeRef = ref(null);
|
|
// 存储图层实体的 Map，用于管理所有图层
|
const treeMap = new Map();
|
|
// 地形数据实例
|
let TerrainLayer = null;
|
// 影像数据实例
|
let ImageryLayer = null;
|
|
/**
|
* 初始化地形数据图层
|
*/
|
async function initTerrainLayer() {
|
try {
|
TerrainLayer = await earthCtrl.factory.createTerrainLayer({
|
sourceType: "ctb",
|
url: "http://106.120.22.26:9103/gisserver/ctsserver/sunhugoudem",
|
requestVertexNormals: true,
|
});
|
treeMap.set("地形数据", TerrainLayer);
|
} catch (error) {
|
console.error("地形数据初始化失败:", error);
|
}
|
}
|
|
/**
|
* 初始化影像数据图层
|
*/
|
async function initImageryLayer() {
|
try {
|
ImageryLayer = await earthCtrl.factory.createImageryLayer({
|
sourceType: "wmts",
|
url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
|
// url: "/imagery/tile/image/wmts/pTkjV3J9/{z}/{x}/{y}?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo",
|
});
|
treeMap.set("影像数据", ImageryLayer);
|
} catch (error) {
|
console.error("影像数据初始化失败:", error);
|
}
|
}
|
// async function initImageryLayerByName(name, url) {
|
// try {
|
// // 创建影像图层
|
// const imageryLayer = await earthCtrl.factory.createImageryLayer({
|
// sourceType: "wmts", // 根据实际情况调整sourceType
|
// url: url,
|
// });
|
|
// // 将创建的影像图层添加到Cesium Viewer中
|
// // if (imageryLayer) {
|
// // viewer.imageryLayers.add(imageryLayer);
|
// // }
|
|
// // 将图层实例保存到treeMap中
|
// treeMap.set(name, imageryLayer);
|
|
// console.log(`${name} 影像数据初始化成功`);
|
// } catch (error) {
|
// console.error(`${name} 影像数据初始化失败:`, error);
|
// }
|
// }
|
/**
|
* 处理树节点勾选变化
|
* @param {Object} data - 节点数据
|
* @param {Boolean} checked - 是否选中
|
* @param {Boolean} indeterminate - 不确定状态
|
*/
|
function handleCheckChange(data, checked) {
|
const label = data.label;
|
|
// 地形数据处理
|
if (label === "地形数据") {
|
handleTerrainLayer(checked);
|
return;
|
}
|
|
// 影像数据处理
|
if (label === "影像数据") {
|
handleImageryLayer(checked);
|
return;
|
}
|
|
// 模型数据处理
|
if (label === "模型数据") {
|
handleModelLayer(checked);
|
return;
|
}
|
|
// 设备信息处理
|
if (label === "综合监测设备信息") {
|
simStore.DeviceShowSwitch = checked;
|
return;
|
}
|
|
// 隐患点处理
|
if (label === "孙胡沟隐患点") {
|
simStore.DangerShowSwitch = checked;
|
return;
|
}
|
|
// 村庄图层处理
|
// if (data.type === "imagery") {
|
// if (checked) {
|
// initImageryLayerByName(label, data.url);
|
// } else {
|
// const layer = treeMap.get(label);
|
// if (layer) {
|
// viewer.imageryLayers.remove(layer);
|
// treeMap.delete(label);
|
// }
|
// }
|
// return;
|
// }
|
if (data.type === "terrain") {
|
handleTerrainLayerByName(label, data.url, checked, data.view);
|
return;
|
}
|
|
if (data.type === "model") {
|
handleModelLayerByUrl(label, data.url, checked, data.view);
|
return;
|
}
|
|
// 其他图层的处理
|
const layer = treeMap.get(label);
|
if (layer) {
|
toggleLayerVisible(label, checked);
|
}
|
}
|
async function handleTerrainLayerByName(name, url, checked, view) {
|
if (checked) {
|
try {
|
const layer = await earthCtrl.factory.createTerrainLayer({
|
sourceType: "ctb",
|
url,
|
requestVertexNormals: true,
|
});
|
treeMap.set(name, layer);
|
viewer.terrain = layer;
|
|
console.log(view, 'zhelishi shuju'); // 现在应该有数据了
|
|
if (view && view.destination && view.orientation) {
|
viewer.scene.camera.flyTo({
|
destination: new Cesium.Cartesian3(
|
view.destination.x,
|
view.destination.y,
|
view.destination.z
|
),
|
orientation: {
|
heading: view.orientation.heading,
|
pitch: view.orientation.pitch,
|
roll: view.orientation.roll
|
}
|
});
|
}
|
|
} catch (error) {
|
console.error(`地形图层 ${name} 加载失败:`, error);
|
}
|
} else {
|
const layer = treeMap.get(name);
|
if (layer) {
|
toggleLayerVisible(name, false);
|
layer.removeFromMap();
|
treeMap.delete(name);
|
}
|
}
|
}
|
|
async function handleModelLayerByUrl(name, url, checked, view) {
|
if (checked) {
|
try {
|
const model = await addTileset(url);
|
treeMap.set(name, model);
|
viewer.scene.primitives.add(model);
|
|
if (view && view.destination && view.orientation) {
|
viewer.scene.camera.flyTo({
|
destination: new Cesium.Cartesian3(
|
view.destination.x,
|
view.destination.y,
|
view.destination.z
|
),
|
orientation: {
|
heading: view.orientation.heading,
|
pitch: view.orientation.pitch,
|
roll: view.orientation.roll
|
}
|
});
|
}
|
|
} catch (error) {
|
console.error(`模型图层 ${name} 加载失败:`, error);
|
}
|
} else {
|
const model = treeMap.get(name);
|
if (model) {
|
viewer.scene.primitives.remove(model);
|
treeMap.delete(name);
|
}
|
}
|
}
|
/**
|
* 处理地形图层
|
*/
|
function handleTerrainLayer(checked) {
|
if (checked) {
|
initTerrainLayer();
|
toggleLayerVisible("地形数据", true);
|
} else {
|
const layer = treeMap.get("地形数据");
|
if (layer) {
|
toggleLayerVisible("地形数据", false);
|
layer.removeFromMap();
|
treeMap.delete("地形数据");
|
}
|
}
|
}
|
|
/**
|
* 处理影像图层
|
*/
|
function handleImageryLayer(checked) {
|
if (checked) {
|
initImageryLayer();
|
toggleLayerVisible("影像数据", true);
|
} else {
|
const layer = treeMap.get("影像数据");
|
if (layer) {
|
toggleLayerVisible("影像数据", false);
|
layer.removeFromMap();
|
treeMap.delete("影像数据");
|
}
|
}
|
}
|
|
/**
|
* 处理模型图层
|
*/
|
function handleModelLayer(checked) {
|
if (checked) {
|
addTileset(
|
// "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json"
|
"/imagery/tile/model/service/Iakp0nhx/tileset.json?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo"
|
)
|
.then((model) => {
|
treeMap.set("模型数据", model);
|
toggleLayerVisible("模型数据", true);
|
})
|
.catch(console.error);
|
} else {
|
toggleLayerVisible("模型数据", false);
|
}
|
}
|
|
/**
|
* 切换图层可见性
|
* @param {String} name - 图层名称
|
* @param {Boolean} visible - 是否可见
|
*/
|
function toggleLayerVisible(name, visible) {
|
const layer = treeMap.get(name);
|
if (!layer) {
|
console.warn(`图层 ${name} 不存在`);
|
return;
|
}
|
|
// 处理不同类型的图层
|
if (Array.isArray(layer)) {
|
// 实体数组
|
layer.forEach((entity) => {
|
entity.show = visible;
|
if (visible && !viewer.entities.contains(entity)) {
|
viewer.entities.add(entity);
|
}
|
});
|
} else if (typeof layer.setVisible === "function") {
|
// 自定义图层接口
|
layer.setVisible(visible);
|
} else if (typeof layer.show === "boolean") {
|
// 普通可显示对象
|
layer.show = visible;
|
}
|
|
viewer.scene.requestRender();
|
}
|
|
/**
|
* 清除图层实体
|
* @param {String} layerName - 图层名称
|
*/
|
// 暂且保留
|
// async function clearLayerEntities(layerName) {
|
// const list = treeMap.get(layerName);
|
// if (list && Array.isArray(list)) {
|
// for (const item of list) {
|
// const entity = await item;
|
// if (layerName == "综合监测设备信息") {
|
// removeEntities(entity.deviceId);
|
// } else if (layerName == "孙胡沟隐患点") {
|
// removeEntities(entity.hdId);
|
// }
|
// }
|
// }
|
// treeMap.delete(layerName);
|
// }
|
|
/**
|
* 清除图层实体
|
* @param {String} layerName - 图层名称
|
*/
|
// 此函数优化了在模拟仿真页面，如果点击目录树选中取消，泥位计仍显示
|
async function clearLayerEntities(layerName) {
|
const isMnfzPage = route.path === "/mnfz"; // 判断是否为 /mnfz 页面
|
|
const list = treeMap.get(layerName);
|
if (list && Array.isArray(list)) {
|
for (const item of list) {
|
const entity = await item;
|
|
let shouldRemove = true; // 默认要删除
|
|
// 如果是 /mnfz 页面，并且是“泥位计”，则不删除
|
if (isMnfzPage && entity.type === "泥位计") {
|
shouldRemove = false;
|
}
|
|
if (shouldRemove) {
|
if (layerName === "综合监测设备信息") {
|
removeEntities(entity.deviceId);
|
} else if (layerName === "孙胡沟隐患点") {
|
removeEntities(entity.hdId);
|
}
|
}
|
}
|
}
|
|
treeMap.delete(layerName);
|
}
|
|
watchEffect(async () => {
|
clearLayerEntities("综合监测设备信息");
|
|
if (simStore.DeviceShowSwitch) {
|
// 使用 Promise.all 等待所有异步操作完成
|
const deviceListPromises = simStore.devices
|
.filter((item) => item.deviceName?.includes("孙胡沟"))
|
.map(async (item) => {
|
const entity = viewer.entities.getById(item.deviceId);
|
item.type = getDictName(deviceDictList, item.dictDeviceType);
|
item.name = item.deviceName.split("孙胡沟")[1];
|
item.id = item.deviceId;
|
item.className = "device";
|
item.showLabel = true;
|
await createPoint(item); // 确保 createPoint 返回一个 Promise 或者本身就是异步函数
|
return item; // 返回处理后的 item
|
});
|
|
// 等待所有异步操作完成
|
const deviceList = await Promise.all(deviceListPromises);
|
|
if (deviceList.length) {
|
treeMap.set("综合监测设备信息", deviceList);
|
}
|
}
|
});
|
|
// 监控隐患点开关变化
|
watchEffect(async () => {
|
clearLayerEntities("孙胡沟隐患点");
|
|
if (simStore.DangerShowSwitch) {
|
const filteredPoints = simStore.DangerPoint.filter((item) =>
|
item.position?.includes("孙胡沟")
|
);
|
|
const dangerPointPromises = filteredPoints.map(async (item) => {
|
const entity = viewer.entities.getById(item.hdId);
|
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";
|
await createPoint(item); // 确保 createPoint 是异步函数
|
return item; // 返回处理好的 item
|
});
|
|
try {
|
const resolvedPoints = await Promise.all(dangerPointPromises);
|
|
if (resolvedPoints.length) {
|
treeMap.set("孙胡沟隐患点", resolvedPoints);
|
}
|
} catch (error) {
|
console.error("创建隐患点时发生错误:", error);
|
}
|
}
|
});
|
|
/**
|
* 初始化断面点数据
|
*/
|
function initDuanmianPoint() {
|
getDuanMainData().then((res) => {
|
const list = res.data.map((item) => {
|
const entity = createPoint({
|
id: item.id + item.alias,
|
name: item.alias,
|
latitude: item.lat,
|
longitude: item.lon,
|
showBillboard: false,
|
className: "district",
|
});
|
entity.show = false;
|
return entity;
|
});
|
treeMap.set("孙胡沟断面", list);
|
});
|
}
|
|
/**
|
* 添加避险场所数据
|
*/
|
function addTetrahedron() {
|
getSafePoint(110116110218).then((res) => {
|
const geoJsonData = convertToGeoJson(res.data); // 转换为 GeoJSON
|
// 加载 GeoJSON 数据到地图
|
loadAreaPolygon(geoJsonData, true).then((entities) => {
|
entities.forEach((entity) => (entity.show = false));
|
treeMap.set("避险场所", entities);
|
});
|
});
|
}
|
|
/**
|
* 初始化所有数据
|
*/
|
function initData() {
|
initDuanmianPoint();
|
addTetrahedron();
|
}
|
|
// 监听 store 中的 checkedKeys 变化
|
watch(
|
() => checkedKeys.value,
|
(keys) => {
|
if (Array.isArray(keys)) {
|
treeRef.value?.setCheckedKeys([...defaultSelectedKeys.value, ...keys]);
|
}
|
}
|
);
|
|
// 监听路由变化
|
watch(
|
() => route.fullPath,
|
(path) => {
|
const defaultKeys = [...defaultSelectedKeys.value];
|
const checkedKeys =
|
{
|
// 页面默认勾选显示在此处
|
"/yhgl": [...defaultKeys, "孙胡沟隐患点"],
|
"/zhjc": [...defaultKeys, "综合监测设备信息"],
|
// "/mnfz": [...defaultKeys, "孙胡沟断面"],
|
}[path] || defaultKeys;
|
|
treeRef.value?.setCheckedKeys(checkedKeys);
|
},
|
{ immediate: true }
|
);
|
|
// 组件挂载时初始化
|
onMounted(() => {
|
initTerrainLayer();
|
initData();
|
nextTick(() => {
|
treeRef.value?.setCheckedKeys(defaultSelectedKeys.value);
|
});
|
});
|
|
// 组件卸载时清理资源
|
onUnmounted(() => {
|
viewer.entities.removeAll();
|
// 清理所有图层引用
|
treeMap.forEach((layer) => {
|
if (layer.removeFromMap) {
|
layer.removeFromMap();
|
}
|
});
|
treeMap.clear();
|
});
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/infobox.css");
|
|
.layer-tree {
|
background: url("@/assets/img/tools/plotting_new.png");
|
width: 200px;
|
z-index: 99;
|
overflow: hidden;
|
|
:deep(.el-tree) {
|
overflow: hidden !important;
|
}
|
}
|
</style>
|
