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 | 125 +++++++++++++++++++++++++++++++++--------
1 files changed, 100 insertions(+), 25 deletions(-)
diff --git a/src/views/Home/useAggregation.js b/src/views/Home/useAggregation.js
index 32756bd..b724256 100644
--- a/src/views/Home/useAggregation.js
+++ b/src/views/Home/useAggregation.js
@@ -4,39 +4,39 @@
import jiangxishi from '@/assets/geojson/jiangxishi.json';
import jiangxi from '@/assets/geojson/jiangxi.json';
import zg from '@/assets/geojson/zg.json';
+import MapPopUpBox from '@/views/Home/MapPopUpBox.vue';
+import { render } from 'vue';
/**
* 机巢聚合功能
*/
export const useAggregation = () => {
- let viewer = null;
const scalingJudgment = [
{ name: '县', value: [0, 48651], gJson: null },
{ name: '市', value: [48651, 314863], gJson: jiangxishi },
{ name: '省', value: [314863, 1169651], gJson: jiangxi },
{ name: '国', value: [1169651, 37962800], gJson: zg },
];
- const active = ref('');
- const init = () => {
+ let viewer = null;
+ let active = null;
+ let handler = null;
+ let positionC3 = null;
+ const listenerHeight = () => {
determineScaling();
- viewer.camera.moveEnd.addEventListener(() => {
- determineScaling();
- });
+ viewer.camera.moveEnd.addEventListener(determineScaling);
};
- const removeFun = () => {
- viewer.dataSources.removeAll(true);
- viewer.entities.removeAll();
- };
-
+ // 确定缩放比例
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) {
- removeFun();
- active.value = item.name;
+ if (active !== item.name) {
+ removeEntities();
+ removeLabel();
+ active = item.name;
item.gJson ? aggregation(item) : splashed();
}
break;
@@ -83,6 +83,7 @@
if (!feature.position) return;
const position = Cesium.Cartesian3.fromDegrees(feature.position[0], feature.position[1]);
viewer.entities.add({
+ id: feature.id,
position: position,
label: {
// 随机整数
@@ -99,6 +100,12 @@
image: new Cesium.ConstantProperty(data2),
width: 24,
height: 24,
+ },
+ properties: {
+ id: feature.id,
+ customData: {
+ name: feature.name,
+ },
},
});
});
@@ -118,16 +125,84 @@
});
};
- onUnmounted(() => {
- console.log('xiezai');
- removeFun();
- });
+ // 获取弹框box
+ const getLabelDom = () => {
+ 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';
+ document.querySelector('.page-index').append(tooltipContainer);
+ render(vNode, tooltipContainer);
+ return tooltipContainer;
+ };
- onMounted(() => {
- console.log('触发');
- nextTick(() => {
- viewer = window.$viewer;
- init();
- });
- });
+ // 弹框位置刷新
+ const labelBox = () => {
+ let dom = document.querySelector('#mapPopUpBox');
+ if (!dom) {
+ dom = getLabelDom();
+ }
+ const screenPosition = viewer.scene.cartesianToCanvasCoordinates(positionC3);
+ if (screenPosition) {
+ dom.style.left = `${screenPosition.x}px`;
+ dom.style.top = `${screenPosition.y}px`;
+ dom.style.display = 'block';
+ }
+ };
+
+ // 左键单机事件
+ 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();
+ };
+ // 移除弹框标签
+ const removeLabel = () => {
+ viewer.scene.postRender.removeEventListener(labelBox);
+ const dom = document.querySelector('#mapPopUpBox');
+ if (dom && dom.parentNode) {
+ dom.parentNode.removeChild(dom);
+ }
+ };
+
+ // 移除所有监听事件，变量置空
+ 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();
+ // });
+ // });
+
+ return { init,removeAll };
};
--
Gitblit v1.9.3