Cesium开发工具篇｜02事件应用

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

1

鼠标事件

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

1）ScreenSpaceEventHandler

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

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

2）要素拾取

假如应用场景是点击要素获取其属性信息，这个时候就需要在鼠标左键的注册事件中获取 event 结果，核心代码如下：

3）Entity选择

Cesium 针对于通过 Entity 方式添加的几何图形，提供了一个非常方便的属性selectedEntityChanged（viewer类事件类型的属性）来帮助我们获取选中的Entity，通过这个属性，用户无需再写注册鼠标事件了。示例代码如下：

在某些场景中，我们可能需要跟踪某一辆车或某一个人员，这是我们可以把车辆或人员Entity赋给viewer.trackedEntity，相机就会自动跟踪你绑定的Entity了。实际场景中，我们并不是始终跟踪某一个车辆，有时需要切换到另一个车辆，当你切换正在跟踪的车辆时，其实我们触发了viewer.trackedEntityChanged事件，这样我们就可以在此事件中实时获取车辆行驶状态了。

2

相机事件

1）通过鼠标控制

通过鼠标控制相机的方式取决于CameraEventType的常量，包括以下几种：

其中，鼠标的默认操作如下：

下面我们修改默认的鼠标操作，实现中键缩放、右键旋转。核心代码如下：

2）通过键盘控制

主要是通过操作键盘实现相机的漫游，比如前进、后退、向上、向下等等，是不是感觉自己在玩穿越火线游戏，响起熟悉的声音：headshot、double kill、multi kill、fire in the hole、…，打住！！！狂点鼠标也不会发射子弹的。好了，我们把感觉拉回来现场，继续学习Cesium。实现键盘漫游主要是通过键盘调用相机的moveForward、moveBackward、moveLeft、moveRight、moveUp、moveDown方法。下面为部分核心代码，查看完整代码请浏览GitHub地址https://github.com/ls870061011/cesium_training/tree/main/examples中的3_2部分。

3

场景渲染事件

场景渲染事件主要包括以下四种：

scene.preUpdate：更新或呈现场景之前将引发的事件

scene.postUpdate：场景更新后以及渲染场景之前立即引发的事件

scene.preRender：场景更新后以及渲染场景之前将引发的事件

scene.postRender：渲染场景后立即引发的事件

事件的添加和移除代码示例如下：

比如我们自己写了一个指北针、标签，都可以在scene.preRender监听事件的回调函数中更新指北针状态或者是标签的位置信息。下面的部分核心代码，为场景重新选然后更新自定义标签位置。

end