From 295eb3cc87aaa5176d64a4ef985cdad0bfefae9a Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Mon, 31 Mar 2025 08:35:00 +0800
Subject: [PATCH] 增加单个机巢页面
---
src/views/Home/useAggregation.js | 79 +++++++++++++++++++++++++--------------
1 files changed, 50 insertions(+), 29 deletions(-)
diff --git a/src/views/Home/useAggregation.js b/src/views/Home/useAggregation.js
index db6ec45..b724256 100644
--- a/src/views/Home/useAggregation.js
+++ b/src/views/Home/useAggregation.js
@@ -18,27 +18,25 @@
{ name: '国', value: [1169651, 37962800], gJson: zg },
];
let viewer = null;
- const active = ref('');
+ let active = null;
let handler = null;
- let labelDiv = null;
let positionC3 = null;
- const init = () => {
+ const listenerHeight = () => {
determineScaling();
- viewer.camera.moveEnd.addEventListener(() => {
- determineScaling();
- });
+ viewer.camera.moveEnd.addEventListener(determineScaling);
};
// 确定缩放比例
const determineScaling = () => {
+ if(!viewer) return
let height = viewer.camera.positionCartographic.height;
// 根据高度展示对应的 gJson
for (let item of scalingJudgment) {
if (height > item.value[0] && height <= item.value[1]) {
- if (active.value !== item.name) {
+ if (active !== item.name) {
removeEntities();
removeLabel();
- active.value = item.name;
+ active = item.name;
item.gJson ? aggregation(item) : splashed();
}
break;
@@ -127,9 +125,11 @@
});
};
+ // 获取弹框box
const getLabelDom = () => {
- const vNode = h(MapPopUpBox, { data: '参数',removeLabel });
+ const vNode = h(MapPopUpBox, { data: '参数', removeLabel });
const tooltipContainer = document.createElement('div');
+ tooltipContainer.id = 'mapPopUpBox';
tooltipContainer.style.position = 'absolute';
tooltipContainer.style.transform = 'translateY(-50%)';
tooltipContainer.style.pointerEvents = 'none';
@@ -138,50 +138,71 @@
return tooltipContainer;
};
+ // 弹框位置刷新
const labelBox = () => {
- if (!labelDiv) {
- labelDiv = getLabelDom();
+ let dom = document.querySelector('#mapPopUpBox');
+ if (!dom) {
+ dom = getLabelDom();
}
const screenPosition = viewer.scene.cartesianToCanvasCoordinates(positionC3);
if (screenPosition) {
- labelDiv.style.left = `${screenPosition.x}px`;
- labelDiv.style.top = `${screenPosition.y}px`;
+ dom.style.left = `${screenPosition.x}px`;
+ dom.style.top = `${screenPosition.y}px`;
+ dom.style.display = 'block';
}
};
- const clickFun = click => {
+ // 左键单机事件
+ const singleMachineEvent = click => {
const pickedObject = viewer.scene.pick(click.position);
if (Cesium.defined(pickedObject) && pickedObject.id) {
const entity = pickedObject.id;
positionC3 = entity.position._value;
+ viewer.scene.postRender.removeEventListener(labelBox);
viewer.scene.postRender.addEventListener(labelBox);
}
};
+ // 移除 点 和 gjson 实体
const removeEntities = () => {
- viewer.dataSources.removeAll(true);
- viewer.entities.removeAll();
+ viewer.dataSources?.removeAll(true);
+ viewer.entities?.removeAll();
};
+ // 移除弹框标签
const removeLabel = () => {
viewer.scene.postRender.removeEventListener(labelBox);
- if (labelDiv && labelDiv.parentNode) {
- labelDiv.parentNode.removeChild(labelDiv);
- labelDiv = null;
+ const dom = document.querySelector('#mapPopUpBox');
+ if (dom && dom.parentNode) {
+ dom.parentNode.removeChild(dom);
}
};
- onUnmounted(() => {
+ // 移除所有监听事件，变量置空
+ const removeAll = () => {
removeEntities();
removeLabel();
+ viewer.camera.moveEnd.removeEventListener(determineScaling);
handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
- });
+ handler?.destroy();
+ viewer = null;
+ active = null
+ handler = null;
+ positionC3 = null;
+ };
+ const init = () => {
+ viewer = window.$viewer;
+ handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+ handler.setInputAction(singleMachineEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ listenerHeight();
+ };
+ // onMounted(() => {
+ // nextTick(() => {
+ // viewer = window.$viewer;
+ // handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+ // handler.setInputAction(singleMachineEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ // listenerHeight();
+ // });
+ // });
- onMounted(() => {
- nextTick(() => {
- viewer = window.$viewer;
- handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
- handler.setInputAction(clickFun, Cesium.ScreenSpaceEventType.LEFT_CLICK);
- init();
- });
- });
+ return { init,removeAll };
};
--
Gitblit v1.9.3