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 地球、粒子动画,全是这一套。