Cesium `Camera.flyTo`：“飞过去“

Cesium `Camera.flyTo`："飞过去"

学习目标：读懂 Cesium 相机飞行动画的实现思路

源码位置：packages/engine/Source/Scene/Camera.js（Camera.prototype.flyTo）、packages/engine/Source/Scene/CameraFlightPath.js、packages/engine/Source/Core/EasingFunction.js

Cesium 里它长什么样

js 复制代码

viewer.camera.flyTo({
  destination: Cartesian3.fromDegrees(121.47, 31.23, 10000), // 飞到上海，高度 1 万米
  duration: 2,                                              // 秒；不传则按距离自动算
  easingFunction: EasingFunction.QUADRATIC_IN_OUT,          // 缓动函数（默认就是这个）
  complete: () => console.log("到达目的地"),
  cancel: () => console.log("飞行被打断"),
});

关键参数：

参数	作用
`destination`	目的地（3D 里是位置 + 朝向；2D 里是中心点）
`duration`	飞行时长（秒），不传时 Cesium 按距离自动计算
`easingFunction`	缓动函数，默认 `QUADRATIC_IN_OUT`（先慢后快再慢）
`complete`	到达后回调
`cancel`	被打断时回调

Cesium 内部是怎么实现的

读源码（Camera.js 的 flyTo），核心流程只有几步：

复制代码

1. this.cancelFlight()                      // 先取消上一次飞行
2. 如果 duration <= 0                        // 不要动画，直接瞬移
     → this.setView(...) + complete()       //   等价于"瞬间到达"
3. CameraFlightPath.createTween(scene, ...) // 生成一条飞行补间
4. scene.tweens.add(tween)                  // 交给 TweenCollection 驱动

CameraFlightPath 负责生成补间（tween）。补间的本质是：

js 复制代码

// 每帧：把当前时间归一化到 [0, 1]
const time = value.time / duration;
// 用缓动函数把 time 变一下（默认 QUADRATIC_IN_OUT）
const eased = easingFunction(time);
// 在起点和终点之间按 eased 插值，更新相机位置

EasingFunction 本身来自 tween.js（Cesium 对 @tweenjs/tween.js 的二次封装），QUADRATIC_IN_OUT 的公式就是：

js 复制代码

function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
}

一句话总结 Cesium 的飞行：把"起点 → 终点"在时间轴上做缓动插值，每帧应用到相机。 2D 地图、3D 地球、粒子动画，全是这一套。

Cesium `Camera.flyTo`：“飞过去“

Cesium Camera.flyTo："飞过去"

Cesium 里它长什么样

Cesium 内部是怎么实现的

Cesium `Camera.flyTo`："飞过去"