【Cesium】鼠标点击底图拾取坐标、图层

最新推荐文章于 2024-08-01 15:30:17 发布

cjsnyxz

最新推荐文章于 2024-08-01 15:30:17 发布

阅读量899

点赞数

文章标签： java 前端 javascript

本文链接： https://blog.csdn.net/cjsnyxz/article/details/130779598

版权

文章介绍了如何使用Cesium的ScreenSpaceEventHandler来处理鼠标点击事件，特别是左击时拾取地图上的经纬度坐标和图层。通过监听LEFT_CLICK事件，结合pickPosition和getPickRay方法，可以获取到点击位置的地理坐标和图层信息。

摘要由CSDN通过智能技术生成

当我们遇到需要点击三维底图拾取图层做相关处理的需求时，需要怎么实现呢？

Cesium常用的鼠标事件包括左击、右击，左键双击等，分别对应Cesium.ScreenSpaceEventType.LEFT_CLICK、Cesium.ScreenSpaceEventType.RIGHT_CLICK、Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK。

其他诸如鼠标中键点击、左键按下/弹起等，若有需要可自行百度查询。用法如下：

let handler1 = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
handler1.setInputAction(async function(event) {}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

当进入页面，添加鼠标的点击事件监听，以鼠标左击为例。该事件返回鼠标在屏幕点击的位置，再调用 pickPosition 方法即可转为笛卡尔坐标，通过笛卡尔坐标可以转换成经纬度坐标。

		const that = this
        const _viewer = window.viewer
        let handler1 = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
        handler1.setInputAction(async function(event) {
            // 1. 拾取经纬度坐标
           	let cartesian
         	if(viewer.scene.pickPosition(event.position)){
            	cartesian = viewer.scene.pickPosition(event.position);
          	}else{
            	cartesian = viewer.camera.pickEllipsoid(event.position)
          	}
            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
            let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
            // 2. 拾取图层
            let pickRay = viewer.camera.getPickRay(event.position);
            let pickLayer = viewer.imageryLayers.pickImageryLayers(pickRay, viewer.scene)
           
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

以上就是鼠标左击拾取坐标、图层的实现方法^-^