From 63b869264fb32b9dd837baa643578caa08aff595 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 31 Mar 2025 10:28:11 +0800
Subject: [PATCH] feat: 事件点击交互
---
src/views/Home/useEventOperate/useEventOperate.js | 24 +++++++++++++++---------
1 files changed, 15 insertions(+), 9 deletions(-)
diff --git a/src/views/Home/useAggregation.js b/src/views/Home/useEventOperate/useEventOperate.js
similarity index 89%
copy from src/views/Home/useAggregation.js
copy to src/views/Home/useEventOperate/useEventOperate.js
index b724256..56033b9 100644
--- a/src/views/Home/useAggregation.js
+++ b/src/views/Home/useEventOperate/useEventOperate.js
@@ -1,16 +1,18 @@
import * as Cesium from 'cesium';
import data2 from '@/assets/images/home/homeRight/data2.png';
import data1 from '@/assets/images/home/homeRight/data1.png';
+import eventImg from '@/assets/images/home/useEventOperate/event.png';
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 EventPopUpBox from './EventPopUpBox.vue';
import { render } from 'vue';
+import store from '@/store';
/**
- * 机巢聚合功能
+ * 事件聚合功能
*/
-export const useAggregation = () => {
+export const useEventOperate = () => {
const scalingJudgment = [
{ name: '县', value: [0, 48651], gJson: null },
{ name: '市', value: [48651, 314863], gJson: jiangxishi },
@@ -54,7 +56,7 @@
),
label: {
// 随机整数
- text: Math.floor(Math.random() * 100) + '号机巢',
+ text: Math.floor(Math.random() * 100) + '号事件',
font: '14pt monospace',
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK,
@@ -64,7 +66,7 @@
pixelOffset: new Cesium.Cartesian2(0, -9),
},
billboard: {
- image: new Cesium.ConstantProperty(data1),
+ image: new Cesium.ConstantProperty(eventImg),
width: 24,
height: 24,
},
@@ -87,7 +89,7 @@
position: position,
label: {
// 随机整数
- text: feature.name + Math.floor(Math.random() * 100),
+ text: Math.floor(Math.random() * 100) + '个事件',
font: '14pt monospace',
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK,
@@ -127,11 +129,11 @@
// 获取弹框box
const getLabelDom = () => {
- const vNode = h(MapPopUpBox, { data: '参数', removeLabel });
+ const vNode = h(EventPopUpBox, { data: '参数', removeLabel });
const tooltipContainer = document.createElement('div');
tooltipContainer.id = 'mapPopUpBox';
tooltipContainer.style.position = 'absolute';
- tooltipContainer.style.transform = 'translateY(-50%)';
+ tooltipContainer.style.transform = 'translate(-50%,-110%)';
tooltipContainer.style.pointerEvents = 'none';
document.querySelector('.page-index').append(tooltipContainer);
render(vNode, tooltipContainer);
@@ -140,6 +142,9 @@
// 弹框位置刷新
const labelBox = () => {
+ store.commit('setSingleUavHome', {
+ id: '123'
+ });
let dom = document.querySelector('#mapPopUpBox');
if (!dom) {
dom = getLabelDom();
@@ -157,7 +162,8 @@
const pickedObject = viewer.scene.pick(click.position);
if (Cesium.defined(pickedObject) && pickedObject.id) {
const entity = pickedObject.id;
- positionC3 = entity.position._value;
+ positionC3 = entity?.position?._value;
+ if (!positionC3) return;
viewer.scene.postRender.removeEventListener(labelBox);
viewer.scene.postRender.addEventListener(labelBox);
}
--
Gitblit v1.9.3