cesium鼠标控制键盘_Cesium开发工具篇 | 02事件应用

无论是前端系统，还是二维/三维GIS应用系统，都离不开各种事件的应用，尤其是鼠标的单击、双击事件。 Cesium 根据事件的类型、用途，将事件应用分成了三大类。一种是以鼠标操作(左键、中键、右键操作等)为主的 ScreenSpaceEventHandler 类，另一种是通用的事件类 Event ，该类通常在容器类内部实例化，并作为某个属性的类型直接被调用，比如 viewer.clock.onTick、viewer.selectedEntityChanged、camera.moveStart、camera.moveEnd、scene.preRender、cesium3DTileset.allTilesLoaded等这些属性都是 Event 类型；最后一种则是相机控制方面的事件类 screenSpaceCameraController，该类通过与CameraEventType类配合实现相机的控制。下面我主要介绍几个比较常用的事件应用。

鼠标事件

鼠标事件可以说是GIS系统里面关于事件应用最常用的一个了，点击地图上的某一个 graphic，并获取其属性信息，就是鼠标事件应用最熟悉的一个场景了。Cesium为实现这一功能，分成了两个过程。首先，传递viewer.canvas参数实例化ScreenSpaceEventHandler类，比如实例化后的名称为handler；其次，为 handler 注册鼠标事件的监听；最后，在监听事件的回调方法中获取 event.position ，并将其作为参数执行scene.pick 方法获取对应的选中对象。

1)ScreenSpaceEventHandler

对 ScreenSpaceEventHandler 类进行实例化，注册事件、注销事件代码如下：

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

let eventType = Cesium.ScreenSpaceEventType.LEFT_CLICK;

//注册事件

handler.setInputAction((event) => {

console.log(event);

}, eventType);

//注销事件

handler.removeInputAction(eventType);

上面代码中的事件类型 eventType 直接采用了 ScreenSpaceEventType 中的常量，示例中注册鼠标左击事件。根据实际场景需求，eventType 的值可按需赋值，包括以下几种：