用鼠标、相机和数据事件征服Cesium三维地球

前端

2022-12-09 18:46:40

驾驭事件系统，掌控 Cesium 三维地球

在虚拟宇宙的浩瀚中，Cesium 以其逼真的三维地球可视化震撼世界。作为开发者，我们不仅要构建出令人惊叹的虚拟世界，更要赋予其生机与互动性。而 Cesium 的事件系统正是实现这一目标的利器。

一、探索事件世界，掌控全局

Cesium 中的事件五花八门，可分为以下四大类型：

鼠标键盘事件： 轻松探索，点按之间，尽在指尖。
相机事件： 遨游太空，视角转换，尽享自由。
数据加载事件： 数据在手，实时更新，随心所欲。
场景加载事件： 加载完成，画面呈现，震撼登场。

二、鼠标键盘事件：触手可及，直击用户内心

鼠标键盘事件是 Cesium 事件中最基础、最常用的类型。它们允许你在场景中添加交互元素，让用户通过鼠标点击、键盘输入等方式与场景进行互动。

单击事件： 轻触一下，触发动作，触手可及。

viewer.screenSpaceEventHandler.setInputAction(function(movement) {
  console.log('单击位置：', movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

双击事件： 双击一下，更进一步，事半功倍。

viewer.screenSpaceEventHandler.setInputAction(function(movement) {
  console.log('双击位置：', movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

移动事件： 鼠标滑动，位置改变，尽在掌握。

viewer.screenSpaceEventHandler.setInputAction(function(movement) {
  console.log('鼠标移动位置：', movement.endPosition);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

滚轮事件： 滚动滚轮，缩放画面，咫尺千里。

viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.ScreenSpaceEventType.WHEEL];

按键事件： 键盘敲击，命令执行，所向披靡。

document.addEventListener('keydown', function(event) {
  if (event.keyCode === Cesium.KeyboardEventModifiers.LEFT_CONTROL) {
    console.log('按住 Ctrl 键');
  }
});

三、相机事件：纵横驰骋，纵览三维地球风采

相机事件让你能够控制相机的行为，从不同的视角探索三维地球。

相机移动事件： 穿越空间，漫游宇宙，无拘无束。
```
viewer.camera.moveRight(100000);
```
相机缩放事件： 拉近拉远，细节尽收眼底，一览无余。
```
viewer.camera.zoomIn(1.2);
```

相机旋转事件： 左右翻转，上下俯仰，全方位探索。

viewer.camera.setView({
  direction: Cesium.Cartesian3.normalize({ x: -1, y: 1, z: 0 }),
  up: Cesium.Cartesian3.normalize({ x: 0, y: 0, z: 1 })
});

四、数据加载事件：实时更新，数据涌现，尽享信息盛宴

数据加载事件允许你在场景中加载和更新数据。你可以动态地添加或移除数据，以实现实时更新的效果。

数据加载完成事件： 数据加载完毕，精彩呈现，焕然一新。

Cesium.GeoJsonDataSource.load('data.geojson').then(function(dataSource) {
  viewer.dataSources.add(dataSource);
  console.log('数据加载完成');
});

数据加载失败事件： 数据加载失败，及时反馈，从容应对。

Cesium.GeoJsonDataSource.load('data.geojson').catch(function(error) {
  console.log('数据加载失败', error);
});

五、场景加载事件：华丽登场，震撼全场

场景加载事件在场景加载完成后触发。你可以利用场景加载事件来执行一些初始化操作，如添加对象、设置灯光等。

场景加载开始事件： 加载启动，期待满怀，蓄势待发。

viewer.scene.preRender.addEventListener(function() {
  console.log('场景加载开始');
});

场景加载完成事件： 加载完成，激动人心，美轮美奂。

viewer.scene.postRender.addEventListener(function() {
  console.log('场景加载完成');
});

六、结语：让三维地球活起来

Cesium 事件系统是通往三维地球可视化殿堂的钥匙。熟练掌握事件的类型和使用方法，你将能够为用户打造出一个交互性强、生动逼真、充满活力的三维地球应用。让我们一起，用 Cesium 事件系统，征服三维地球的可视化世界！

七、常见问题解答

如何监听鼠标单击事件？

viewer.screenSpaceEventHandler.setInputAction(function(movement) {
  console.log('单击位置：', movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

如何控制相机的缩放？
```
viewer.camera.zoomIn(1.2);
```

如何加载 GeoJSON 数据源？

Cesium.GeoJsonDataSource.load('data.geojson').then(function(dataSource) {
  viewer.dataSources.add(dataSource);
});

如何在场景加载完成后执行操作？

viewer.scene.postRender.addEventListener(function() {
  console.log('场景加载完成');
});

如何监听键盘事件？

document.addEventListener('keydown', function(event) {
  if (event.keyCode === Cesium.KeyboardEventModifiers.LEFT_CONTROL) {
    console.log('按住 Ctrl 键');
  }
});