当我们遇到需要点击三维底图拾取图层做相关处理的需求时,需要怎么实现呢?
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);
以上就是鼠标左击拾取坐标、图层的实现方法^-^