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

文章目录

[一，Cesium 实际示例（含源代码）](#一，Cesium 实际示例（含源代码）)
- - [1，vue+cesium：围绕一个固定点自动左右旋转](#1，vue+cesium：围绕一个固定点自动左右旋转)
  - [2，vue+cesium： flyto一个具体的实体位置](#2，vue+cesium： flyto一个具体的实体位置)
  - [3，vue+cesium： flyto一个具体的点位置](#3，vue+cesium： flyto一个具体的点位置)
  - [4，vue+cesium：利用setView 动画定位到特定点和特定区域](#4，vue+cesium：利用setView 动画定位到特定点和特定区域)
  - [5，vue+cesium： lookAtTransform围绕一个固定点上下左右旋转查看](#5，vue+cesium： lookAtTransform围绕一个固定点上下左右旋转查看)
二，Camera基础知识
- - [1. Camera 基本概念](#1. Camera 基本概念)
  - [2. 常用操作方法](#2. 常用操作方法)
  - [3. 视锥体（Frustum）参数](#3. 视锥体（Frustum）参数)
  - [4. 相机控制事件](#4. 相机控制事件)
  - [5. 常用坐标转换](#5. 常用坐标转换)
  - [6. 关键注意事项](#6. 关键注意事项)
[三、Cesium 入门教程 -系列文章列表](#三、Cesium 入门教程 -系列文章列表)

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

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

二，Camera基础知识

1. Camera 基本概念

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

2. 常用操作方法

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

javascript 复制代码

// 设置相机位置（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）平滑飞行到目标位置

javascript 复制代码

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

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

javascript 复制代码

// 围绕某个点旋转相机（例如围绕一个地标）
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：远裁剪面距离（大于此值的物体不可见）。

javascript 复制代码

// 自定义相机视锥体
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 提供了默认的相机交互（鼠标拖拽旋转、滚轮缩放、右键平移），也可自定义事件：

javascript 复制代码

// 禁用默认相机控制
viewer.scene.screenSpaceCameraController.enableRotate = false; // 禁用旋转
viewer.scene.screenSpaceCameraController.enableZoom = false;   // 禁用缩放

// 监听相机移动事件
viewer.camera.moveEnd.addEventListener(() => {
  console.log("相机移动结束，新位置：", viewer.camera.position);
});

5. 常用坐标转换

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

javascript 复制代码

// 笛卡尔坐标（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 入门教程（十一）：Camera相机功能展示

文章目录

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

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

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

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

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

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

二，Camera基础知识

1. Camera 基本概念

2. 常用操作方法

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

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

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

3. 视锥体（Frustum）参数

4. 相机控制事件

5. 常用坐标转换

6. 关键注意事项

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

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

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