Cesium 入门教程（十一）：Camera相机功能展示

Cesium 中的 Camera（相机）是控制场景视图的核心组件，用于定义用户在 3D 场景中的观察位置、方向和视角。

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

1，vue+cesium： 围绕一个固定点自动左右旋转

https://dajianshi.blog.csdn.net/article/details/131106456

2，vue+cesium： flyto一个具体的实体位置

https://dajianshi.blog.csdn.net/article/details/131080372

3，vue+cesium： flyto一个具体的点位置

https://dajianshi.blog.csdn.net/article/details/131073605

4，vue+cesium： 利用setView 动画定位到特定点和特定区域

https://dajianshi.blog.csdn.net/article/details/145736119

5，vue+cesium： lookAtTransform围绕一个固定点上下左右旋转查看

https://dajianshi.blog.csdn.net/article/details/131106086

二，Camera基础知识

1. Camera 基本概念

• 作用：决定场景中可见的区域，类似于现实世界中相机的取景范围。
• 核心属性：
  • position：相机在三维空间中的位置（Cartesian3 坐标）。
  • direction：相机的观察方向（单位向量）。
  • up：相机的上方向（单位向量，通常为 (0,0,1) 即垂直向上）。
  • frustum：视锥体参数（决定视野范围、近/远裁剪面等）。

2. 常用操作方法

（1）设置相机位置和方向

// 设置相机位置（WGS84经纬度：经度116°，纬度40°，高度1000米）
viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(116, 40, 1000),orientation: {heading: Cesium.Math.toRadians(0),   // 水平旋转（0表示向北）pitch: Cesium.Math.toRadians(-30),   // 俯仰角（-90°为俯视，0°为平视）roll: 0                              // 翻滚角（0表示无倾斜）}
});

（2）平滑飞行到目标位置

// 平滑飞行到指定位置
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(116, 40, 5000),  // 目标位置duration: 3,                                               // 飞行时间（秒）orientation: {heading: Cesium.Math.toRadians(90),                      // 最终朝向（向东）pitch: Cesium.Math.toRadians(-45)}
});

（3）围绕目标旋转（视角控制）

// 围绕某个点旋转相机（例如围绕一个地标）
const center = Cesium.Cartesian3.fromDegrees(116, 40); // 旋转中心
viewer.camera.lookAt(center, new Cesium.Cartesian3(1000, 1000, 500) // 相机相对中心点的偏移量
);// 更新旋转角度（例如鼠标拖动时）
viewer.camera.lookAtTransform(Cesium.Transforms.eastNorthUpToFixedFrame(center),new Cesium.Cartesian3(1000, 1000, 500)
);

3. 视锥体（Frustum）参数

视锥体定义了相机可见的空间范围，常用参数：

• fov：垂直视野角度（Field of View），默认 60°。
• aspectRatio：宽高比（场景宽度/高度）。
• near：近裁剪面距离（小于此值的物体不可见）。
• far：远裁剪面距离（大于此值的物体不可见）。

// 自定义相机视锥体
viewer.camera.frustum.fov = Cesium.Math.toRadians(90); // 扩大视野到90°
viewer.camera.frustum.near = 1.0;                     // 近裁剪面1米
viewer.camera.frustum.far = 1000000.0;                // 远裁剪面1000公里

4. 相机控制事件

Cesium 提供了默认的相机交互（鼠标拖拽旋转、滚轮缩放、右键平移），也可自定义事件：

// 禁用默认相机控制
viewer.scene.screenSpaceCameraController.enableRotate = false; // 禁用旋转
viewer.scene.screenSpaceCameraController.enableZoom = false;   // 禁用缩放// 监听相机移动事件
viewer.camera.moveEnd.addEventListener(() => {console.log("相机移动结束，新位置：", viewer.camera.position);
});

5. 常用坐标转换

相机位置通常需要在不同坐标系统间转换：

// 笛卡尔坐标（Cartesian3）转经纬度高度
const cartographic = Cesium.Cartographic.fromCartesian(viewer.camera.position);
const longitude = Cesium.Math.toDegrees(cartographic.longitude); // 经度
const latitude = Cesium.Math.toDegrees(cartographic.latitude);   // 纬度
const height = cartographic.height;                              // 高度

6. 关键注意事项

• 性能影响：相机的 far 值过大会导致渲染性能下降，应根据场景需求合理设置。
• 视角限制：避免极端俯仰角（如接近 90°）可能导致的渲染异常。
• 动画控制：flyTo 方法可通过 complete 回调处理飞行结束后的逻辑。

通过灵活控制 Camera，可实现漫游、聚焦、环绕等多样化的场景浏览效果。

三、Cesium 入门教程 -系列文章列表