目录

前言

一. 全局注册事件

1.1 事件机制介绍

1.2 this.Cesium 和 this.viewer

1.3 全局注册

二. 常见事件分类

2.1 鼠标事件

2.1.1 点击事件 (click)

2.1.2 双击事件 (doubleClick)

2.1.3 鼠标移动事件 (mouseMove)

2.1.4 鼠标滚轮事件 (mouseWheel)

2.2 视图与摄像机事件

2.2.1 视图变化事件 (viewer.camera.changed)

2.3 时间与动画事件

2.3.1 时间更新事件 (viewer.clock.onTick)

2.3.2 时间开始事件 (viewer.clock.onStart)

2.4 实体事件

2.4.1 实体点击事件 (entity.clicked)

2.5 地图事件

2.5.1 拖动事件 (drag)

2.6 其他常用事件

2.6.1 场景渲染完成事件 (scene.postRender)

2.6.2 窗口大小变化事件 (resize)

三. 事件表格

2.1 鼠标事件

2.2 视图与摄像机事件

2.3 时间与动画事件

2.4 实体事件

2.5 地图事件

2.6 其他常用事件

四. 实际应用

3.1 交互式地图导航

3.2 动态数据展示

3.3 用户视图控制

五. 本文总结

前言

我们都知道 Cesium 是一个开源的 3D 地理信息系统（GIS）JavaScript 库，广泛应用于地图可视化、地理空间分析、以及 3D 地图展示等场景。Cesium 提供了丰富的事件机制，允许开发者根据用户的交互、数据的变化和视角的变化来进行响应。这里详细介绍 Cesium 中常用的事件类型、使用方法，以及如何在实际项目中利用这些事件来扩展功能。

一. 全局注册事件

1.1 事件机制介绍

Cesium 的事件机制基于事件监听和事件触发模型。我们可以通过监听事件，并为其绑定回调函数，响应用户在地图上的操作或其他变化。常见的事件包括鼠标事件、视图变化事件、摄像机控制事件、动画时间事件等。

1.2 this.Cesium 和 this.viewer

在使用 Cesium 的过程中，通常会通过 this.Cesium 和 this.viewer 来访问 Cesium API 和地图视图。确保这些引用在你使用事件时保持一致，尤其是在 Vue.js 或其他现代框架中，通常需要使用箭头函数来确保 this 的正确指向。

1.3 全局注册

这里直接在main.js中，挂载注册Cesium

// 挂载全局的Cesium地图
Vue.prototype.Cesium = window.Cesium;
Vue.prototype.viewer = null;

在 组件1 中，创建Cesium后，将初始化后的地图场景this.viewer，赋值给全局的this.$root.viewer

// 将初始化后的this.viewer赋值给全局的this.$root.viewer

this.$root.viewer = this.viewer; // 通过根实例访问

这里在 组件2 挂载以后，把全局的this.$root.viewer，再给组件2的this.viewer，形成闭环。这样就可以在另一个组件访问到同一个Cesium实例，然后就可以直接使用了。这样就实现了全局访问同一个Cesium地图实例。

mounted() {
        setTimeout(() => {
            const viewer = this.$root.viewer;
            if (viewer) {
                this.viewer = viewer;
            } else {
                console.log('Viewer is error');
            }
        }, 1000);
},

---

二. 常见事件分类

2.1 鼠标事件

鼠标事件是用户与地图交互时最常用的事件类型。Cesium 支持多种鼠标事件，如点击、双击、鼠标移动、滚轮等。

2.1.1 点击事件 (click)

点击事件在用户点击地图时触发。它通常用于响应用户点击地图或特定实体的操作。

// Vue 组件中，确保 this.Cesium 和 this.viewer 已经初始化
const handler = new this.Cesium.ScreenSpaceEventHandler(this.viewer.canvas);

handler.setInputAction((event) => {
    const pickedObject = this.viewer.scene.pick(event.position);
    if (this.Cesium.defined(pickedObject)) {
        console.log('Clicked object:', pickedObject);
    }
}, this.Cesium.ScreenSpaceEventType.LEFT_CLICK);

2.1.2 双击事件 (doubleClick)

双击事件在用户双击地图时触发。常用于缩放到特定位置或执行某些操作。

handler.setInputAction((event) => {
    const pickedObject = this.viewer.scene.pick(event.position);
    if (this.Cesium.defined(pickedObject)) {
        console.log('Double-clicked object:', pickedObject);
    }
}, this.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

2.1.3 鼠标移动事件 (mouseMove)

鼠标移动事件会在用户移动鼠标时触发。此事件常用于显示动态信息，如实时的经纬度位置或鼠标位置的坐标。

handler.setInputAction((event) => {
    const cartesian = this.viewer.camera.pickEllipsoid(event.endPosition);
    if (this.Cesium.defined(cartesian)) {
        const cartographic = this.Cesium.Cartographic.fromCartesian(cartesian);
        console.log(`Mouse moved to: 
Lat: ${this.Cesium.Math.toDegrees(cartographic.latitude)}, 
Lon: ${this.Cesium.Math.toDegrees(cartographic.longitude)}`);
    }
}, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);

2.1.4 鼠标滚轮事件 (mouseWheel)

鼠标滚轮事件用于响应用户的缩放操作，常用于地图的缩放功能。

handler.setInputAction((event) => {
    const delta = event.deltaY;
    console.log('Wheel scroll delta:', delta);
}, this.Cesium.ScreenSpaceEventType.WHEEL);

这里面最重要的就是 this.Cesium.ScreenSpaceEventType ，这个属性是 Cesium 中用于定义不同类型用户交互事件的枚举对象。它包含了多种常见的事件类型，通常与用户在 Cesium 地图中的鼠标操作和触摸操作相关联。通过这些事件，我们可以监听用户行为，并作出相应的响应。

2.2 视图与摄像机事件

这些事件与摄像机的视角变化和状态变化有关，用于在视角发生变化时做相应的处理。

2.2.1 视图变化事件 (viewer.camera.changed)

viewer.camera.changed 是一个事件处理函数，它会在相机的位置或方向发生改变时触发。这个事件对于监听相机的变化非常有用，例如当用户通过界面交互（如平移、缩放、旋转等）改变了视角时，或者当程序代码直接修改了相机属性时。

this.viewer.camera.changed.addEventListener(() => {
    const cameraPosition = this.viewer.camera.positionWC;
    console.log('Camera position changed:', cameraPosition);
});

请注意，从 Cesium 的某些版本开始，事件处理的方式可能有所改变。如果你使用的是较新的版本，确保查阅最新的官方文档以获取准确的信息。此外，camera.changed 事件不会告诉你具体发生了什么变化（比如位置还是方向），它只是通知你相机的状态已经改变。如果你需要更详细的信息，你可能需要自己保存和比较相机的状态。

2.3 时间与动画事件

Cesium 提供了多种与时间流逝、动画播放相关的事件。通常用于动态数据展示和场景动画控制。

2.3.1 时间更新事件 (viewer.clock.onTick)

viewer.clock.onTick 是 Cesium 中的一个事件处理函数，它会在模拟时钟每“滴答”一次（即每经过一个时间步长）时触发。这个事件非常有用，可以用于更新场景中的动态内容、执行定时任务或响应时间变化。

要监听 onTick 事件，你可以添加一个事件处理函数，该函数将在每次时钟滴答时被调用。每当时间流逝时触发 onTick 事件。它常用于实时更新场景或与动画同步。

this.viewer.clock.onTick.addEventListener(() => {
    const currentTime = this.viewer.clock.currentTime;
    console.log('Current time:', currentTime);
});

2.3.2 时间开始事件 (viewer.clock.onStart)

viewer.clock.onStart 是 Cesium 中的一个事件处理函数，它在模拟时钟开始运行时触发。这个事件对于执行初始化操作 或 设置当时间模拟启动时需要进行的动作非常有用。

要监听 onStart 事件，你可以添加一个事件处理函数，该函数将在时钟开始运行时被调用。当时间开始流动时触发 onStart 事件，适用于控制基于时间的逻辑。

this.viewer.clock.onStart.addEventListener(() => {
    console.log('Time started');
});

2.4 实体事件

Cesium 中的实体（Entity）是地图上重要的元素，例如模型、标记等。你可以为实体绑定事件，用来响应与这些实体的交互。

2.4.1 实体点击事件 (entity.clicked)

当用户点击某个实体时触发该事件。常用于展示实体的详细信息或其他交互。

const entity = this.viewer.entities.add({
    name: 'Car',
    position: this.Cesium.Cartesian3.fromDegrees(118.88021, 32.037136),
    model: {
        uri: './car.glb',
    },
});

this.viewer.screenSpaceEventHandler.setInputAction((event) => {
    const pickedEntity = this.viewer.scene.pick(event.position);
    if (this.Cesium.defined(pickedEntity) && pickedEntity.id === entity) {
        console.log('Entity clicked:', entity);
    }
}, this.Cesium.ScreenSpaceEventType.LEFT_CLICK);

2.5 地图事件

Cesium 支持响应用户对地图的各种交互操作，如拖动、旋转、缩放等。

2.5.1 拖动事件 (drag)

当用户拖动地图时，触发该事件。常用于实时反馈用户操作或更新地图状态。

const handler = new this.Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
handler.setInputAction((event) => {
    console.log('Map dragged:', event);
}, this.Cesium.ScreenSpaceEventType.PINCH_MOVE);

2.6 其他常用事件

2.6.1 场景渲染完成事件 (scene.postRender)

该事件在每帧渲染完成后触发，适用于渲染完成后的操作，例如更新 UI。

this.viewer.scene.postRender.addEventListener(() => {
    console.log('Scene rendered.');
});

2.6.2 窗口大小变化事件 (resize)

当浏览器窗口大小发生变化时触发 resize 事件。通常用于调整 Cesium 地图的尺寸。

window.addEventListener('resize', () => {
    this.viewer.resize();
    console.log('Window resized');
});

共计6种，11个事件。

---

三. 事件表格

2.1 鼠标事件

序号	事件类型	描述	应用场景	关键字
1	LEFT_CLICK	左键点击	用于对象选择、拾取等操作	左键点击、拾取
2	LEFT_DOUBLE_CLICK	左键双击	用于快速定位或缩放操作	双击、定位、缩放
3	MOUSE_MOVE	鼠标移动	用于显示动态信息或交互效果	鼠标移动、动态
4	WHEEL	鼠标滚轮	用于缩放操作	滚轮、缩放

2.2 视图与摄像机事件

序号	事件类型	描述	应用场景	关键字
1	camera.changed	摄像机视角变化	用于视角变化后的状态更新	视角变化、更新

2.3 时间与动画事件

序号	事件类型	描述	应用场景	关键字
1	clock.onTick	时钟更新	用于实时更新或动画同步	时钟更新、同步
2	clock.onStart	时钟开始	用于控制基于时间的逻辑	时钟开始、控制

2.4 实体事件

序号	事件类型	描述	应用场景	关键字
1	entity.clicked	实体点击	用于展示实体信息或交互	实体点击、交互

2.5 地图事件

序号	事件类型	描述	应用场景	关键字
1	PINCH_MOVE	捏合手势移动（缩放）	用于触摸设备上的缩放与平移	捏合、触摸、移动

2.6 其他常用事件

序号	事件类型	描述	应用场景	关键字
1	scene.postRender	渲染以后	用于更新UI元素、处理自定义渲染逻辑	渲染触发、逻辑
2	resize	窗口变化	用于调整 Cesium 地图自适应尺寸	窗口变化、调整

同样，共计6种，11个事件。

---

四. 实际应用

3.1 交互式地图导航

通过监听 click、doubleClick 和 mouseMove 等鼠标事件，可以实现用户点击地图定位、根据鼠标轨迹显示实时信息，或控制地图缩放和移动。

3.2 动态数据展示

结合 clock.onTick 和实体点击事件，可以实现实时数据展示，比如实时更新车辆位置、状态信息，动态展示场景变化。

3.3 用户视图控制

利用 camera.changed 事件，可以在用户改变视角时自动调整地图上的元素位置，提供更加智能的用户体验。

---

五. 本文总结

Cesium 提供了丰富的事件机制，支持多种用户交互，如鼠标点击、视角变化、实体交互等。通过这些事件，开发者可以为用户提供更加丰富和互动性强的地图应用。在实际开发中，结合 Cesium 强大的 3D 引擎和事件系统，开发者能够构建多样化的地图应用，满足不同场景需求。通过深入理解和灵活应用这些事件机制，可以使开发更加高效、功能更加丰富。同时，随着技术的不断发展，Cesium 的事件机制也可能会不断更新和扩展，我们需要持续关注官方文档，以获取最新的信息和技术支持。

Cesim 官方网址https://cesium.com/