当前位置：首页 > news >正文

Cesium 入门教程（十四）：鼠标键盘交互

news 2025/9/4 8:03:35

文章目录

一、Cesium 实际示例（含源代码）
- - 1.vue+cesium：更改多种鼠标形状样式
  - 2.vue+cesium：鼠标点击显示屏幕位置、笛卡尔坐标、地理坐标
  - 3.vue+cesium：点击广告牌,更换图片
  - 4.vue+cesium：移动鼠标显示球体的经度、纬度和视角高度
  - 5.vue+cesium：鼠标不同事件（移动、左点击、左双击、滚轮、LEFT_DOWN，LEFT_UP）
二、鼠标键盘交互基础知识
- - 1. 默认交互行为
  - 2. 交互控制器配置
  - 3. 自定义鼠标事件
  - 4. 自定义键盘事件
  - 5. 拾取（Picking）功能
  - 6. 交互事件类型
  - 7. 性能与最佳实践
三、Cesium 入门教程 -系列文章列表

Cesium 提供了丰富的鼠标和键盘交互功能，允许用户与 3D 场景进行直观交互，同时也支持自定义交互逻辑。

一、Cesium 实际示例（含源代码）

1.vue+cesium：更改多种鼠标形状样式

查看源代码：https://dajianshi.blog.csdn.net/article/details/129633696

2.vue+cesium：鼠标点击显示屏幕位置、笛卡尔坐标、地理坐标

查看源代码：https://dajianshi.blog.csdn.net/article/details/145826572

在这里插入图片描述

3.vue+cesium：点击广告牌,更换图片

查看源代码：https://dajianshi.blog.csdn.net/article/details/145711766
在这里插入图片描述

4.vue+cesium：移动鼠标显示球体的经度、纬度和视角高度

查看源代码：https://dajianshi.blog.csdn.net/article/details/129671701

5.vue+cesium：鼠标不同事件（移动、左点击、左双击、滚轮、LEFT_DOWN，LEFT_UP）

查看源代码：https://dajianshi.blog.csdn.net/article/details/129670287

二、鼠标键盘交互基础知识

1. 默认交互行为

Cesium 视图器（Viewer）默认提供了一套完整的交互方式：

操作方式	效果
左键拖拽	旋转场景
右键拖拽	平移场景
滚轮滚动	缩放场景
中键拖拽	倾斜视图（改变俯仰角）
`W`/`S`/`A`/`D`	前后左右平移
`↑`/`↓`/`←`/`→`	旋转视图
`+`/`-`	缩放场景
双击	放大到点击位置

2. 交互控制器配置

通过 screenSpaceCameraController 可配置默认交互行为：

// 获取控制器
const controller = viewer.scene.screenSpaceCameraController;// 禁用旋转
controller.enableRotate = false;// 禁用缩放
controller.enableZoom = false;// 禁用平移
controller.enableTranslate = false;// 禁用倾斜
controller.enableTilt = false;// 禁用双击放大
controller.enableDoubleClickZoom = false;// 设置旋转速度
controller.rotateRate = 0.005;// 设置缩放速度
controller.zoomRate = 0.1;

3. 自定义鼠标事件

使用 ScreenSpaceEventHandler 监听鼠标事件并实现自定义逻辑：

// 创建事件处理器
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);// 监听左键点击
handler.setInputAction((movement) => {// 获取点击的屏幕坐标const position = movement.position;// 将屏幕坐标转换为场景中的地理坐标const ray = viewer.camera.getPickRay(position);const cartesian = viewer.scene.globe.pick(ray, viewer.scene);if (cartesian) {// 转换为经纬度const cartographic = Cesium.Cartographic.fromCartesian(cartesian);const longitude = Cesium.Math.toDegrees(cartographic.longitude);const latitude = Cesium.Math.toDegrees(cartographic.latitude);console.log(`点击位置: 经度 ${longitude}, 纬度 ${latitude}`);// 在点击位置添加标记viewer.entities.add({position: cartesian,point: {pixelSize: 10,color: Cesium.Color.RED}});}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// 监听鼠标移动
handler.setInputAction((movement) => {console.log(`鼠标位置: x=${movement.endPosition.x}, y=${movement.endPosition.y}`);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);// 移除事件监听（不再需要时）
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

4. 自定义键盘事件

通过 ScreenSpaceEventHandler 监听键盘事件：

// 监听键盘按下事件
handler.setInputAction((event) => {switch (event.key) {case ' ': // 空格键console.log('空格键被按下');// 暂停/播放动画viewer.clock.shouldAnimate = !viewer.clock.shouldAnimate;break;case 'r': // R键console.log('重置视图');// 重置相机到初始位置viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(116, 40, 10000)});break;}
}, Cesium.ScreenSpaceEventType.KEY_DOWN);

5. 拾取（Picking）功能

Cesium 提供了实体拾取功能，用于检测鼠标是否指向场景中的对象：

// 监听左键点击，检测是否点击了实体
handler.setInputAction((movement) => {// 拾取指定位置的实体const pickedObject = viewer.scene.pick(movement.position);if (Cesium.defined(pickedObject) && pickedObject.id) {// 获取被点击的实体const entity = pickedObject.id;console.log('点击了实体:', entity.name);// 高亮显示被点击的实体entity.point.color = Cesium.Color.GREEN;}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

6. 交互事件类型

常用的 ScreenSpaceEventType 类型：

鼠标事件：
- LEFT_CLICK：左键点击
- RIGHT_CLICK：右键点击
- MIDDLE_CLICK：中键点击
- LEFT_DOUBLE_CLICK：左键双击
- MOUSE_MOVE：鼠标移动
- WHEEL：鼠标滚轮
键盘事件：
- KEY_DOWN：按键按下
- KEY_UP：按键释放
触摸事件（移动设备）：
- TOUCH_START：触摸开始
- TOUCH_MOVE：触摸移动
- TOUCH_END：触摸结束