Cesium 地图上点击某个位置获取该点的经纬度

问题:点击Cesium地图时获取当前点击位置的经纬度
解决过程:
1.添加用户输入监听范围handlePoint
2.new Cesium.ScreenSpaceEventHandler ( element )处理用户输入事件
3.window.cesium.viewer.scene.canvas是要为其创建场景的 HTML 画布元素
4.setInputAction (action, type, modifier )设置要在输入事件上执行的功能
5.setInputAction中action是当输入事件发生时要执行的函数
6.ScreenSpaceEventType 此枚举类型用于对鼠标事件进行分类:向下、向上、单击、双击、移动和按住按钮时移动等
7.Cesium.ScreenSpaceEventType.LEFT_CLICK表示鼠标左键单击事件
8.使用setTimeout函数创建的延迟计时器,避免连续点击重复获取同一个点的坐标,声明一个变量time来保存计时器的ID,并将其ID保存在变量time中
9.调用clearTimeout函数并传入之前保存的计时器ID可以停止计时器,避免不必要的资源消耗
10.使用cesium.viewer.scene.pickPosition执行拾取的窗口坐标
11.Cesium.Cartographic.fromCartesian从笛卡尔位置创建一个新的制图实例,转换为制图表示的笛卡尔位置,结果对象中的值将以弧度表示
12.拿到弧度后,使用Cesium.Math.toDegrees将弧度转为度数
13.removeInputAction是删除要在输入事件上执行的函数
14.最后返回所需要的经纬度值,获取到当前点击位置的经纬度
15.setInputAction要在onMounted组件挂载完成后进行,removeInputAction要在组件注销之前执行
解决结果:

import { onMounted, onUnmounted} from 'vue'
const getCartesianCoordinate = (pos) => {
    let cartesianCoordinate = window.cesium.viewer.scene.pickPosition(pos)
    if(!cartesianCoordinate){
        return null
    }
    let cartographic = Cesium.Cartographic.fromCartesian(cartesianCoordinate);
    let longitude = Cesium.Math.toDegrees(cartographic.longitude); 
    let latitude = Cesium.Math.toDegrees(cartographic.latitude); 
    let height = cartographic.height; 
    let position = {
        longitude: Number(longitude.toFixed(6)),
        latitude: Number(latitude.toFixed(6)),
        altitude: Number(height.toFixed(2))
    };
    return position
}

onMounted(() => {
    let handlePoint = new Cesium.ScreenSpaceEventHandler(window.cesium.viewer.scene.canvas);
    handlePoint.setInputAction(function (event) {
        // 避免双击重复获取点
        let time =  null
        clearTimeout(timer)
        time = window.setTimeout(function () {
            // 单击获取坐标点
            let coordinate = getCartesianCoordinate(event.position)
            console.log('坐标',coordinate)
            // {
            //     "longitude": 111.634259,
            //     "latitude": 44.577749,
            //     "altitude": 1237.97
            // }
        }, 200);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
})
onUnmounted(() => {
    handlePoint.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
})

  • 14
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值