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)
相关推荐
独立开阀者_FwtCoder14 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
独立开阀者_FwtCoder17 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder18 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥1 小时前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆2 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
bug爱好者2 小时前
原生小程序如何实现跨页面传值
前端·javascript
bug爱好者2 小时前
原生微信小程序最实用的工具函数合集
前端·javascript