From f1c3131872fc49e58db3e7ef6bbc0ba124f9d93c Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 21 Jun 2025 11:04:05 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/test' into test
---
src/views/dataCenter/components/dataCenterMap.vue | 341 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 341 insertions(+), 0 deletions(-)
diff --git a/src/views/dataCenter/components/dataCenterMap.vue b/src/views/dataCenter/components/dataCenterMap.vue
new file mode 100644
index 0000000..39930fd
--- /dev/null
+++ b/src/views/dataCenter/components/dataCenterMap.vue
@@ -0,0 +1,341 @@
+<template>
+ <el-dialog modal-class="mapDialog" v-model="isShow" width="80%">
+ <div class="mapBox">
+ <div v-if="isShow" id="dataCenterMap" class="ztzf-cesium"></div>
+ </div>
+ </el-dialog>
+</template>
+
+<script setup>
+import EventBus from '@/utils/eventBus';
+import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue';
+import { getMapInfoAPI } from '@/api/dataCenter/dataCenter';
+import { useStore } from 'vuex';
+import { PublicCesium } from '@/utils/cesium/publicCesium';
+import { Cartesian3 } from 'cesium';
+import * as Cesium from 'cesium';
+import EventPopUpBox from '@/hooks/components/EventPopUpBox.vue';
+import { render, nextTick, watch, onMounted, onBeforeUnmount, shallowRef, ref, h } from 'vue';
+import panoramaPoint from '@/assets/images/panorama/panorama-point.png'; //全景图标
+import defaultIcon from '@/assets/images/dataCenter/datamap/eventCompleted.png'; //默认图标
+import activeIcon from '@/assets/images/dataCenter/datamap/activeevent.png'; // 激活图标
+import { getEventActiveImage, getEventImage } from '@/utils/stateToImageMap/event'; //点
+const emit = defineEmits(['lookDetail']);
+const isShow = defineModel('show');
+const viewerRef = shallowRef(null);
+let viewer = null;
+const store = useStore();
+const currentAreaPosition = ref({ height: 1987280, latitude: 27.636112, longitude: 115.732975 });
+let handler = null;
+const props = defineProps(['jobId', 'dotData']);
+let currentClickEntity = null;
+// 存储地图实体引用
+const dataPointEntities = ref([]);
+const isMapInitialized = ref(false); //地图加载
+const dataPointList = ref([]);
+const activeEntity = ref(null); // 当前激活的点
+// 获取弹框box
+const detailId = ref('');
+const createLabelDom = data => {
+ detailId.value = data;
+ const vNode = h(EventPopUpBox, { data, removeLabel, detailClick });
+ const tooltipContainer = document.createElement('div');
+ tooltipContainer.id = 'mapPopUpBox';
+ tooltipContainer.style.position = 'absolute';
+ tooltipContainer.style.transform = 'translate(-50%,-125%)';
+ tooltipContainer.style.pointerEvents = 'none';
+ document.querySelector('#dataCenterMap')?.append(tooltipContainer);
+ render(vNode, tooltipContainer);
+ return tooltipContainer;
+};
+// 弹框位置刷新
+const labelBoxUpdate = () => {
+ if (!currentClickEntity) return;
+ const mapPopUpBox = document.querySelector('#mapPopUpBox');
+ let dom = mapPopUpBox
+ ? mapPopUpBox
+ : createLabelDom(currentClickEntity.properties?.customData._value.data || currentClickEntity);
+ const screenPosition = viewer?.scene.cartesianToCanvasCoordinates(
+ currentClickEntity?.position?._value
+ );
+ if (screenPosition) {
+ dom.style.left = `${screenPosition.x}px`;
+ dom.style.top = `${screenPosition.y}px`;
+ dom.style.display = 'block';
+ }
+};
+
+const removeDom = () => {
+ const dom = document.querySelector('#mapPopUpBox');
+ if (dom && dom.parentNode) {
+ dom.parentNode.removeChild(dom);
+ }
+};
+// 移除弹框标签
+const removeLabel = () => {
+ viewer?.scene.postRender.removeEventListener(labelBoxUpdate);
+ removeDom();
+};
+// 点击去到详情页面
+const detailClick = () => {
+ removeLabel();
+ // 给父组件传值
+ // emit('update:show', false); //关闭地图弹框
+ emit('lookDetail', detailId.value);
+};
+
+// 恢复所有点的默认图标
+const restoreAllIcons = () => {
+ dataPointEntities.value.forEach(entity => {
+ if (entity.billboard) {
+ const status = entity?.properties?._customData?._value?.data.status;
+ entity.billboard.image =
+ status === 1 || status === null ? defaultIcon : getEventImage(status);
+ }
+ });
+ activeEntity.value = null;
+};
+// 左键单机事件
+const singleMachineEvent = async click => {
+ let clickedEntities = click
+ ? viewer?.scene.drillPick(click.position).map(item => item.id)
+ : [currentClickEntity];
+ if (!clickedEntities.length) {
+ // 点击空白处恢复所有图标并移除弹窗
+ restoreAllIcons();
+ removeLabel();
+ return;
+ }
+ currentClickEntity = clickedEntities[0];
+ // 恢复所有点的默认图标
+ restoreAllIcons();
+ if (currentClickEntity.billboard) {
+ const status = currentClickEntity?.properties?._customData?._value?.data.status;
+ console.log('stayus', currentClickEntity?.properties?._customData?._value?.data);
+ currentClickEntity.billboard.image =
+ status === 1 || status === null ? activeIcon : getEventActiveImage(status);
+ currentClickEntity.billboard.scale = 1; // 可选缩放效果
+ activeEntity.value = currentClickEntity;
+ }
+
+ removeLabel();
+ viewer.scene.postRender.addEventListener(labelBoxUpdate);
+};
+
+// 事件初始化
+const handlerInit = () => {
+ if (handler) return;
+ handler = new Cesium.ScreenSpaceEventHandler(viewer?.scene.canvas);
+ handler.setInputAction(singleMachineEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+};
+
+// 清除所有数据点实体
+const clearDataPoints = () => {
+ if (!viewer) return;
+ dataPointEntities.value.forEach(entity => {
+ viewer.entities.remove(entity);
+ });
+ dataPointEntities.value = [];
+ activeEntity.value = null;
+};
+
+const removeHandler = () => {
+ handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ handler?.destroy();
+ handler = null;
+};
+
+const renderDataPoint = mapList => {
+ if (!viewer || !mapList?.length) return;
+
+ // 清除旧实体
+ clearDataPoints();
+
+ // 添加新实体
+ mapList.forEach((item, index) => {
+ const entity = viewer?.entities.add({
+ id: `dataCenter-point-${index}-${Date.now()}`,
+ position: Cesium.Cartesian3.fromDegrees(
+ Number(item.metadata.shootPosition.lng),
+ Number(item.metadata.shootPosition.lat)
+ ),
+ label: {
+ font: '12pt Source Han Sans CN',
+ fillColor: Cesium.Color.WHITE,
+ outlineColor: Cesium.Color.BLACK,
+ outlineWidth: 2,
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ eyeOffset: new Cesium.Cartesian3(0, 0, -9),
+ pixelOffset: new Cesium.Cartesian2(0, 55),
+ },
+ billboard: {
+ image: item.status == null || item.status === 1 ? defaultIcon : getEventImage(item.status), // 初始为默认图标
+ width: 40,
+ height: 40,
+ pixelOffset: new Cesium.Cartesian2(0, -15),
+ },
+ properties: {
+ customData: {
+ data: item,
+ },
+ },
+ });
+ // 点击定位点位触发
+ if (props.dotData.id === item.id) {
+ currentClickEntity = entity;
+ activeEntity.value = entity;
+ singleMachineEvent();
+ }
+
+ dataPointEntities.value.push(entity);
+ });
+};
+const initMap = () => {
+ if (viewer || isMapInitialized.value) return;
+
+ const container = document.getElementById('dataCenterMap');
+ if (!container) {
+ console.error('地图容器未找到');
+ return;
+ }
+ try {
+ const publicCesiumInstance = new PublicCesium({
+ dom: 'dataCenterMap',
+ flatMode: false,
+ terrain: false,
+ mapFilter: true,
+ });
+ viewer = publicCesiumInstance.getViewer();
+ viewerRef.value = viewer;
+
+ isViewerReady.value = true;
+
+ // 初始化事件处理器
+ handlerInit();
+ isMapInitialized.value = true;
+ console.log('地图初始化完成');
+ // 初始化后立即渲染已有数据
+ if (dataPointList.value.length > 0) {
+ renderDataPoint(dataPointList.value);
+ }
+ } catch (error) {
+ console.error('地图初始化失败:', error);
+ }
+};
+const flyToEntity = position => {
+ const longitude = Number(position.lng);
+ const latitude = Number(position.lat);
+ viewer?.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, 1000),
+ duration: 1,
+ orientation: {
+ heading: Cesium.Math.toRadians(0.0),
+ pitch: Cesium.Math.toRadians(-90.0),
+ roll: 0.0,
+ },
+ });
+};
+
+// 地图接口
+const loading = ref(false);
+const getMapInfoAPIFun = async ids => {
+ try {
+ const res = await getMapInfoAPI(ids);
+ dataPointList.value = res.data.data || [];
+ console.log('dataPointList.value', dataPointList.value);
+
+ // 确保地图已初始化后再渲染
+ if (isMapInitialized.value && viewer) {
+ renderDataPoint(dataPointList.value);
+ }
+ } catch (error) {
+ console.error('获取地图数据失败:', error);
+ }
+};
+const isViewerReady = ref(false);
+
+/**
+ * 初始化标注添加
+ * @param data 数据
+ */
+const initEntityOrPopup = data => {
+ console.log('data', data);
+
+ //地图点在范围内
+ watch(
+ () => isMapInitialized.value,
+ ready => {
+ if (ready) {
+ flyToEntity(data.metadata.shootPosition);
+ labelBoxUpdate();
+ }
+ },
+ { deep: true, immediate: true } // 初始化时立即执行
+ );
+};
+watch(
+ () => props.jobId,
+ newVal => {
+ if (newVal) {
+ getMapInfoAPIFun(newVal);
+ }
+ },
+ { immediate: true }
+);
+
+// 监听对话框状态
+watch(isShow, newVal => {
+ if (newVal) {
+ nextTick(() => {
+ initMap();
+ });
+ } else {
+ // 清理资源
+ if (viewer) {
+ viewer.destroy();
+ viewer = null;
+ }
+ isMapInitialized.value = false;
+ removeHandler();
+ clearDataPoints();
+ }
+});
+
+onMounted(() => {});
+onBeforeUnmount(() => {
+ if (viewer) {
+ viewer.destroy();
+ }
+ removeHandler();
+ clearDataPoints();
+});
+
+// 暴露方法给父组件
+defineExpose({
+ initEntityOrPopup,
+});
+</script>
+
+<style>
+.mapDialog .el-dialog__body {
+ height: 700px !important;
+ padding: 0 !important;
+}
+</style>
+
+<style scoped lang="scss">
+.mapBox {
+ z-index: 2;
+ height: 650px;
+ width: 98%;
+ position: absolute;
+ left: 13px;
+ top: 50px;
+
+ #dataCenterMap {
+ width: 100%;
+ height: 100%;
+ }
+}
+</style>
--
Gitblit v1.9.3