Skip to content

相机交互

场景相机具有一些默认的交互行为,如下图所示

control1

  • 平移场景:按住鼠标左键拖拽

  • 缩放场景:鼠标滚轮滚动

  • 旋转场景:按住鼠标中键拖拽/Ctrl+按住鼠标左键或右键拖拽

这些默认的交互行为是通过scene.screenSpaceCameraController属性提供的,该属性类型为 ScreenSpaceCameraController ,可以称为场景相机控制器/屏幕空间相机控制器。

交互控制

我们可以控制场景相机默认的一些交互行为,如

ts
// 禁用缩放
scene.screenSpaceCameraController.enableZoom = false;

//禁用平移
scene.screenSpaceCameraController.enableRotate = false;

操作习惯修改

实际生产中 Cesium 的这套操作逻辑可能并不直觉化,如鼠标中键按下旋转,这跟其他一些三维平台如 three.js 的轨道控制器差别很大,且对笔记本触摸板操作很不友好,我们可以将右键与中键的事件对调:

ts
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
  Cesium.CameraEventType.RIGHT_DRAG, // 添加右键拖动旋转
  Cesium.CameraEventType.PINCH, // 保留多点触控旋转
  {
    eventType: Cesium.CameraEventType.LEFT_DRAG,
    modifier: Cesium.KeyboardEventModifier.CTRL, // 保留Ctrl+左键拖动旋转
  },
  {
    eventType: Cesium.CameraEventType.RIGHT_DRAG,
    modifier: Cesium.KeyboardEventModifier.CTRL, // 保留Ctrl+右键拖动旋转
  },
];

Cesium 中,相机实例在 Viewer 类的实例过程中已经被创建,所以我们无需再次创建。下面我们一起来看下相机的基本属性和操作方法。

ts
let viewer = new Viewer("container");
// 获取相机实例
let camera = viewer.camera;

相机属性

通过相机对象的 positiondirectionup 三个属性就可以确定相机的位置和方向

  • position:相机位置,世界坐标(笛卡尔空间直角坐标)

  • direction:相机的方向(世界坐标系下),一个向量,使用 Cartesian3 表示

  • up:相机的上方向(世界坐标系下),一个向量,使用 Cartesian3 表示

MGis 地理三维库