Cesium中的相机系统

Cesium中的相机系统

Cesium相机系统

Camera核心类

相机控制器

视角管理

位置(position)

方向(direction)

变换矩阵

ScreenSpaceCameraController

CameraFlightPath

透视投影

正射投影

⭐ Camera核心概念

Camera是Cesium中最核心的类之一，控制观察3D世界的视角。Camera对象通常通过viewer.camera访问：

// 获取相机实例
const camera = viewer.camera;

// 设置相机位置和方向
camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 1000), // 北京上空
  orientation: {
    heading: Cesium.Math.toRadians(20),  // 朝向角
    pitch: Cesium.Math.toRadians(-20),   // 俯仰角
    roll: 0                              // 翻滚角
  }
});

相机位置与朝向控制

关键属性：

• ⭐ position: 相机位置（Cartesian3坐标）
• ⭐ direction: 相机朝向
• up: 相机上方向
• right: 相机右方向
• heading/pitch/roll: 航向角/俯仰角/翻滚角

相机

位置position

朝向direction

上向量up

方向控制

heading航向角

pitch俯仰角

roll翻滚角

常用相机操作

相机移动方法

方法	描述	示例
⭐ flyTo	平滑飞行到位置	camera.flyTo({destination: position})
⭐ setView	立即设置位置	camera.setView({destination: position})
lookAt	看向特定点	camera.lookAt(target, offset)
move*	相对移动	camera.moveForward(distance)
zoomIn/Out	缩放	camera.zoomIn(amount)

飞行控制示例

// 平滑飞行到指定位置
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(121.5, 31.2, 5000),  // 上海
  orientation: {
    heading: Cesium.Math.toRadians(45),
    pitch: Cesium.Math.toRadians(-30),
    roll: 0
  },
  duration: 3,  // 飞行时间(秒)
  complete: function() {
    console.log('飞行完成');
  }
});

视锥体与投影模式

相机投影模式

透视投影
(默认)

正射投影
(2D/2.5D)

frustum: PerspectiveFrustum

frustum: OrthographicFrustum

fov: 视野角度

aspectRatio: 宽高比

near/far: 近/远裁剪面

切换投影模式

// 切换到正射投影(2D效果)
viewer.camera.frustum = new Cesium.OrthographicFrustum({
  aspectRatio: canvas.clientWidth / canvas.clientHeight,
  width: 2000000 // 视野宽度(米)
});

// 恢复透视投影(3D效果)
viewer.camera.frustum = new Cesium.PerspectiveFrustum({
  aspectRatio: canvas.clientWidth / canvas.clientHeight,
  fov: Cesium.Math.toRadians(60)
});

⚙️ 相机控制器

⭐ScreenSpaceCameraController：管理用户交互，如鼠标拖拽、滚轮缩放等

// 获取相机控制器
const controller = viewer.scene.screenSpaceCameraController;

// 自定义相机控制
controller.enableRotate = true;       // 允许旋转
controller.enableTranslate = true;    // 允许平移
controller.enableZoom = true;         // 允许缩放
controller.enableTilt = true;         // 允许倾斜
controller.enableLook = false;        // 禁用lookAt模式

// 限制缩放范围
controller.minimumZoomDistance = 1000;    // 最小缩放距离
controller.maximumZoomDistance = 10000000; // 最大缩放距离

实用相机技巧

1. 跟踪实体

// 相机跟踪实体
viewer.trackedEntity = entity;

// 停止跟踪
viewer.trackedEntity = undefined;

2. 保存与恢复相机状态

// 保存相机状态
const cameraPosition = {
  position: viewer.camera.position.clone(),
  direction: viewer.camera.direction.clone(),
  up: viewer.camera.up.clone()
};

// 恢复相机状态
viewer.camera.position = cameraPosition.position;
viewer.camera.direction = cameraPosition.direction;
viewer.camera.up = cameraPosition.up;

3. 限制相机视角范围

// 限制相机范围到特定区域
viewer.camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z; // 限制z轴旋转
viewer.scene.screenSpaceCameraController.constrainedAxis = Cesium.Cartesian3.UNIT_Z;

// 设置相机边界矩形
viewer.camera.setViewRectangle(
  Cesium.Rectangle.fromDegrees(115, 30, 118, 40)
);

常见相机事件监听

// 监听相机移动事件
viewer.camera.changed.addEventListener(function(percentage) {
  console.log('相机移动:', percentage);
});

// 监听相机移动结束事件
viewer.camera.moveEnd.addEventListener(function() {
  const position = viewer.camera.position;
  const cartographic = Cesium.Cartographic.fromCartesian(position);
  const lon = Cesium.Math.toDegrees(cartographic.longitude);
  const lat = Cesium.Math.toDegrees(cartographic.latitude);
  const height = cartographic.height;
  
  console.log(`相机位置: 经度=${lon}, 纬度=${lat}, 高度=${height}米`);
});

互动控制模式

Cesium提供多种相机交互模式，适应不同应用场景：

相机交互模式

3D模式
(默认)

2D模式
(地图式)

Columbus模式
(2.5D)

自由旋转

平面平移

倾斜视图

// 切换到2D模式
viewer.scene.mode = Cesium.SceneMode.SCENE2D;

// 切换到3D模式
viewer.scene.mode = Cesium.SceneMode.SCENE3D;

// 切换到Columbus模式(2.5D)
viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;

// 切换模式时添加动画效果
viewer.scene.morphTo2D(2.0); // 2秒内变换到2D
viewer.scene.morphTo3D(2.0); // 2秒内变换到3D

Cesium相机系统功能丰富，是实现各种三维地球交互的基础。通过合理控制相机，可以实现飞行浏览、目标追踪、场景漫游等多种应用效果。