鼠标事件

Cesium 已经为我们提供了一些基础的交互功能，比如相机视角的控制，实体对象选中信息弹框等等。但是这些基础的交互功能在实际项目中肯定是不够的，我们还需要实现很多自定义的交互功能，比如图形交互绘制，图形交互编辑等等。要实现自定义的交互功能，那我们肯定是需要通过鼠标事件来完成的，Cesium 为开发者提供了一套鼠标事件的接口，封装在 ScreenSpaceEventHandler 类中。

该类的构造函数接收一个 HTMLCanvasElement 类型的参数，表示要在那个 Canvas 元素上监听鼠标事件，通常情况下，我们都是监听当前场景的画布对应的 canvas 元素，通过 viewer.canvas 属性获取。

事件类型

ScreenSpaceEventHandler 支持的鼠标事件类型定义在 ScreenSpaceEventType 中

除了正常的鼠标事件类型外，还提供了移动端的相关事件，因为 Cesium 不仅可以使用在 PC 端浏览器上，同样支持移动端浏览器。

事件订阅

通过 setInputAction(action, type, modifier) 方法订阅事件，action 表示事件处理函数，type 表示事件类型，modifier 表示键盘标识即是否同时按下了某个键

下面展示对鼠标左键的监听

let screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
screenSpaceEventHandler.setInputAction((e) => {
  console.log(e);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

取消订阅

通过 removeInputAction(type, modifier) 方法取消事件订阅 type 表示事件类型，modifier 表示键盘标识即是否同时按下了某个键

screenSpaceEventHandler.removeInputAction(
  Cesium.ScreenSpaceEventType.LEFT_CLICK
);

对象拾取

我们可以通过鼠标事件 + scene.pick() 方法来自定义对象拾取功能，scene.pick() 能够接受屏幕坐标并转换为世界坐标然后匹配与鼠标位置重叠的对象。

let screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
screenSpaceEventHandler.setInputAction((e) => {
  let pickId = viewer.scene.pick(e.position);
  alert(pickId ? "点击了示例标签" : "点击了空白处");
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);