/* * @Author: shuishen 1109946754@qq.com * @Date: 2025-04-15 22:41:40 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2025-04-16 19:02:39 * @FilePath: \command-center-dashboard\src\hooks\components\useMapHandlerClick.js * @Description: * * Copyright (c) 2025 by shuishen, All Rights Reserved. */ import * as Cesium from 'cesium' import EventPopUpBox from '@/hooks/components/EventPopUpBox.vue' /** * * @param {Object} options - 配置选项 */ export function useMapHandlerClick (viewer, options = { type: 'single-drone-event', customDom: EventPopUpBox }) { const { type } = options const currentClickEntity = ref(null) let handler = null // 查找特定类型的实体 const findEntityByType = (entities, type) => { return entities.find(entity => entity?.properties?.customData?._value?.data?.type === type ) } // 左键单机事件 const singleMachineEvent = async click => { let clickedEntities = viewer?.scene.drillPick(click.position).map(item => item.id) if (!clickedEntities.length) return currentClickEntity.value = findEntityByType(clickedEntities, type) removeLabel() if (currentClickEntity.value) { viewer?.scene.postRender.addEventListener(labelBoxRender) } } // 事件初始化 const handlerInit = () => { if (handler) return handler = new Cesium.ScreenSpaceEventHandler(viewer?.scene.canvas) handler.setInputAction(singleMachineEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK) } // 事件移除 const removeHandler = () => { handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) handler?.destroy() handler = null } // 获取弹框box const getLabelDom = data => { const vNode = h(customDom, { data, removeLabel }) const tooltipContainer = document.createElement('div') tooltipContainer.id = 'mapPopUpBox' tooltipContainer.style.position = 'absolute' tooltipContainer.style.transform = styleTransform tooltipContainer.style.pointerEvents = 'none' document.querySelector('.page-index').append(tooltipContainer) render(vNode, tooltipContainer) return tooltipContainer } // 弹框位置刷新 const labelBoxRender = () => { if (!currentEntity) return let dom = document.querySelector('#mapPopUpBox') if (!dom) { dom = getLabelDom(currentEntity.properties.customData._value.data) } const screenPosition = viewer?.scene.cartesianToCanvasCoordinates(currentEntity?.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(labelBoxRender) removeDom() } // 自动清理 onUnmounted(() => { removeHandler() removeLabel() }) return { currentClickEntity, handlerInit, removeHandler } }