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

还是大剑师兰特

于 2025-09-01 00:00:00 发布

阅读量1.4k

点赞数 43

CC 4.0 BY-SA版权

分类专栏： # GIS入门教程文章标签：大剑师 cesium教程 cesium示例 cesium基础 cesium入门

本文链接：https://blog.csdn.net/cuclife/article/details/150959076

GIS入门教程专栏收录该内容

49 篇文章

订阅专栏

文章目录

一、Cesium 实际示例（含源代码）
二、鼠标键盘交互基础知识
三、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

在这里插入图片描述

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

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：触摸结束