From f02122892ee506d6955eba4aac8ddee53a5194fc Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sun, 30 Mar 2025 11:21:02 +0800
Subject: [PATCH] feat: 整体交互调整
---
src/views/Home/useAggregation.js | 51 ++++++++++++++++++++++++++++++++++-----------------
1 files changed, 34 insertions(+), 17 deletions(-)
diff --git a/src/views/Home/useAggregation.js b/src/views/Home/useAggregation.js
index 1dc0104..d9e9f89 100644
--- a/src/views/Home/useAggregation.js
+++ b/src/views/Home/useAggregation.js
@@ -18,10 +18,10 @@
{ name: '国', value: [1169651, 37962800], gJson: zg },
];
let viewer = null;
- const active = ref('');
+ let active = null;
let handler = null;
let positionC3 = null;
- const init = () => {
+ const listenerHeight = () => {
determineScaling();
viewer.camera.moveEnd.addEventListener(() => {
determineScaling();
@@ -30,14 +30,15 @@
// 确定缩放比例
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;
@@ -126,6 +127,7 @@
});
};
+ // 获取弹框box
const getLabelDom = () => {
const vNode = h(MapPopUpBox, { data: '参数', removeLabel });
const tooltipContainer = document.createElement('div');
@@ -138,6 +140,7 @@
return tooltipContainer;
};
+ // 弹框位置刷新
const labelBox = () => {
let dom = document.querySelector('#mapPopUpBox');
if (!dom) {
@@ -151,7 +154,8 @@
}
};
- const clickFun = click => {
+ // 左键单机事件
+ const singleMachineEvent = click => {
const pickedObject = viewer.scene.pick(click.position);
if (Cesium.defined(pickedObject) && pickedObject.id) {
const entity = pickedObject.id;
@@ -161,10 +165,12 @@
}
};
+ // 移除 点 和 gjson 实体
const removeEntities = () => {
- viewer.dataSources.removeAll(true);
- viewer.entities.removeAll();
+ viewer.dataSources?.removeAll(true);
+ viewer.entities?.removeAll();
};
+ // 移除弹框标签
const removeLabel = () => {
viewer.scene.postRender.removeEventListener(labelBox);
const dom = document.querySelector('#mapPopUpBox');
@@ -173,19 +179,30 @@
}
};
- onBeforeUnmount(() => {
+ const removeAll = () => {
removeEntities();
removeLabel();
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