事件

Cesium 有自己的一套事件系统，封装在 Event 类中

事件方法

Event 类具有三个重要的方法

• addEventListener

添加事件侦听器，由关心此事件的对象调用，即事件的订阅。

let viewer = new Cesium.Viewer("cesiumContainer");
viewer.scene.preRender.addEventListener(handleRender);
function handleRender() {
  console.log("渲染事件");
}

• raiseEvent

触发事件，由事件拥有者进行调用，触发事件时，可以传递相关的事件数据。

• removeEventListener

取消事件侦听，与 addEventListener 相反。

常用事件

viewer 对象 ​

selectedEntityChange： 选中的实体改变事件

trackedEntityChanged：锁定的实体对象改变事件

sene 对象 ​

preUpdate：场景更新前的事件，每渲染一帧前先更新场景相关数据

postUpdate：场景更新完成事件，此时数据已更新完成

preRender：场景渲染前事件，每渲染一帧之前触发

postRender：场景渲染结束事件，每渲染一帧结束时触发

renderError：渲染发生错误事件

terrainProviderChanged：地形服务提供者改变事件

camera 对象 ​

moveStart：相机开始移动事件

moveEnd：相机移动结束事件

clock 对象 ​

onTick：时钟运行事件，此事件和 scene.preRender 等事件触发的频率相同

onStop：时钟暂停事件

注意事项

this 指向问题

事件处理函数中，this 默认的指向是函数的拥有者，比如下面的代码中是 window 对象

let viewer = new Cesium.Viewer("cesiumContainer");
viewer.scene.preRender.addEventListener(handleRender);
function handleRender() {
  console.log(this); // window
}

可以通过 addEventListener(listener, scope) 方法的第二个参数设置 this 指向，比如下面的代码将 this 指向设置为 viewer

let viewer = new Cesium.Viewer("cesiumContainer");
viewer.scene.preRender.addEventListener(handleRender, viewer);
function handleRender() {
  console.log(this);
}

避免使用箭头函数作为事件处理函数

使用箭头函数作为事件处理函数时，无法取消事件的订阅，所以尽量少用箭头函数，或者采用这种写法：

const handler = (e) => {
  console.log(this);
};
viewer.scene.preRender.addEventListener(handler, viewer);

不需的事件要及时取消订阅

像 scene.preRender 或者 clock.onTick 等事件的触发频率相当高，所以在不需要时要及时通过 removeEventLinstener 方法取消事件的订阅，否则可能会影响应用程序的性能

let viewer = new Cesium.Viewer("cesiumContainer");
viewer.clock.onTick.addEventListener(handleTick, viewer);
function handleTick() {
  console.log(this);
}
viewer.clock.onTick.removeEventListener(handleTick, viewer);