import * as Cesium from 'cesium'
|
import EventPopUpBox from '@/hooks/components/EventPopUpBox.vue'
|
|
/**
|
* 地图弹窗 Hook
|
* @param {Cesium.Viewer} viewer - Cesium 实例
|
* @param {Object} options - 配置选项
|
* @param {Component} options.popupComponent - 弹窗组件
|
*/
|
export function useMapPopup (viewer, options = {}) {
|
const { currentEntity } = options
|
|
// 获取弹框box
|
const getLabelDom = data => {
|
const vNode = h(EventPopUpBox, { 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 addLabel = () => {
|
removeLabel()
|
viewer?.scene.postRender.addEventListener(labelBoxRender)
|
}
|
|
// 移除弹框标签
|
const removeLabel = () => {
|
viewer?.scene.postRender.removeEventListener(labelBoxRender)
|
removeDom()
|
}
|
|
// 自动清理
|
onUnmounted(() => {
|
removeLabel()
|
})
|
|
return {
|
addLabel
|
}
|
}
|
