cesium 根据鼠标点击位置,获取经纬度和高度以及创建点位

最新推荐文章于 2025-07-30 16:36:32 发布

原创最新推荐文章于 2025-07-30 16:36:32 发布 · 317 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

1.效果

2.需求

根据鼠标在屏幕上点击的位置在cesium地图上生成图元，并获取当前位置的经纬度和高度

3.具体的实现

实现的方式是通过new Cesium.ScreenSpaceEventHandler(element)

该API的作用是：处理用户输入事件。可以添加自定义函数，以便在用户输入输入时执行

参数：element：要监听的元素，在这里要监听的就是viewer.canvas

new Cesium.ScreenSpaceEventHandler生成的对象有个setInputAction(action, type, modifier)方法

action:要执行的方法

type:输入的事件类型

modifier:事件发生时要保留的键盘事件修饰符

`LEFT_DOWN`	number	鼠标左键向下事件
`LEFT_UP`	number	鼠标左键向上事件
`LEFT_CLICK`	number	鼠标左键单击事件
`LEFT_DOUBLE_CLICK`	number	鼠标左键双击事件
`RIGHT_DOWN`	number	鼠标右键向下事件
`RIGHT_UP`	number	鼠标右键向上事件
`RIGHT_CLICK`	number	鼠标右键单击事件
`MIDDLE_DOWN`	number	鼠标滚轮向下事件
`MIDDLE_UP`	number	鼠标滚轮向上事件
`MIDDLE_CLICK`	number	鼠标滚轮单击事件
`MOUSE_MOVE`	number	鼠标移动事件
`WHEEL`	number	鼠标滚轮事件
`PINCH_START`	number	触摸屏幕两指事件的开始
`PINCH_END`	number	触摸屏幕两指事件的结束
`PINCH_MOVE`	number	触摸屏幕两指事件的更改

//构建cesium
const viewer = new Cesium.Viewer('DOM元素或ID', {})
// 创建一个事件处理器来处理屏幕空间事件
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
//监听鼠标点击事件
//监听的鼠标事件：Cesium.ScreenSpaceEventType.LEFT_CLICK
handler.setInputAction((click)=>{
    // 使用pick函数获取点击位置的实际位置
    var cartesian = viewer.scene.pickPosition(click.position);
    //判断对象是否存在
    if(Cesium.defined(cartesian)){
        //将笛卡尔坐标转换为经纬度坐标
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        //将弧度转换为角度
        var lng = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
        var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
        var height = cartographic.height.toFixed(2);
        console.log('经度：' + lng + '，纬度：' + lat+ '，高度：' + height)

        //在cesium地图上添加点位
        let clickPosition = viewer.scene.camera.pickEllipsoid(click.position);
        viewer.entities.add({
            position:clickPosition,
            point:{
                color:Cesium.Color.GREEN,
                pixelSize:30
            }
        })
    }

    //使用Scene.pick来获取3DTiles的实际高度
    let pickedObject = viewer.scene.pick(click.position);
    if(Cesium.defined(pickedObject)){
        console.log(`3DTitle经度：${lng}、维度：${lat}、高度：{height}`)
    }
},
Cesium.ScreenSpaceEventType.LEFT_CLICK)