Cesium弹窗可随地图移动

目录

项目地址

https://github.com/zhengjie9510/webgis-demo

实现效果

实现方法

javascript 复制代码
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction((click) => {
	if (listener) {
	  listener()
	  listener = undefined
	  this.visiable = false
	}
    // 球面
    if (viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
      earthPosition = viewer.scene.camera.pickEllipsoid(click.position);
    }
    // 地形
    else {
      const ray = viewer.camera.getPickRay(click.position);
      earthPosition = viewer.scene.globe.pick(ray, viewer.scene);
    }
    if (earthPosition) {
        const position = viewer.scene.globe.ellipsoid.cartesianToCartographic(earthPosition)
        const lon = Cesium.Math.toDegrees(position.longitude).toFixed(6)
        const lat = Cesium.Math.toDegrees(position.latitude).toFixed(6)
        const height = position.height.toFixed(2)
        this.info = { lon: lon, lat: lat, height: height }
        listener = viewer.scene.postRender.addEventListener(() => {
          const windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, earthPosition);
          if (windowPosition) {
            let position = { top: windowPosition.y - 115 + 'px', left: windowPosition.x - 200 / 2 + 'px' }
            this.style = Object.assign(this.style, position)
            this.visiable = true
          }
        })
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
相关推荐
saadiya~3 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
百锦再4 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
瓜瓜怪兽亚5 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院5 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233405 小时前
React组件完全指南
前端·javascript·react.js
EndingCoder5 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
qq7798233406 小时前
React Hooks完全指南
前端·javascript·react.js
Moment6 小时前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
软件技术NINI6 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
DoraBigHead6 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js