<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;
|
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;
|
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 || [];
|
|
if (isMapInitialized.value && viewer) {
|
renderDataPoint(dataPointList.value);
|
}
|
} catch (error) {
|
console.error('获取地图数据失败:', error);
|
}
|
};
|
const isViewerReady = ref(false);
|
|
const initEntityOrPopup = 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>
|
