cesium实现自定义弹窗（随地球移动）vue3+cesium

 完成的效果

第一步添加地图点击事件(我是在onMounted中定义的)

    let handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas)
    handler.setInputAction((e) => {

         判断有没有地图的这个属性
        if (!viewer.value.scene) return
        
        let data = viewer.value.scene.pick(e.position)
        let { id } = data
           
        获取到数据返回的经纬度 
        let location = id.monitoItems.data.location.split(',')

        形成可以使用的px位置
        let cartesian = Cesium.Cartesian3.fromDegrees(Number(location[0]), Number(location[1]), 0)
     
        positionXy.xAxis = e.position.x - 100
        positionXy.yAxis = e.position.y - 100

        打开弹框
        proxy.$refs['popInfoRef'].openInfo()

        //实时更新位置 这个很重要 不然弹框会固定在屏幕的一个位置不随地图转动
        viewer.value.scene.postRender.addEventListener(() => {
            let windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.value.scene, cartesian)
            positionXy.xAxis = windowPosition.x - 100
            positionXy.yAxis = windowPosition.y - 100
        })
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

第二步 先自定义一个弹框的样式（vue3）

最重要的是 动态传入的 left和top 根据点击的位置实时更新弹框出现的位置。