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

相关推荐
JustHappy25 分钟前
「vConsole MCP🛠️」我让 AI 直接看见任何 H5 的日志和请求帮你 debug
前端·javascript·程序员
xieter2 小时前
【技术精选】Node.js 核心事件循环机制与异步 I/O 深度剖析 (2026-10-02)
前端·javascript
想吃火锅10052 小时前
【leetcode】238.除了自身以外数组的乘积js
javascript·算法·leetcode
web打印社区3 小时前
政务办事大厅:叫号小票、办理回执网页怎么静默出纸
前端·javascript·vue.js·pdf·html·政务
MZ_ZXD0014 小时前
【关注可白嫖源码】--课程设计--毕业设计-- 29210 Vue.js 3+Springboot中药材基本信息与图片查询系统
javascript·spring boot·课程设计·毕设·大作业·程序开发·毕设代做
Ai-_Man4 小时前
您您这可以把Google AI Studio的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑
两个西柚呀4 小时前
JS事件总结
前端·javascript·css
小狼154544 小时前
拼多多订单数据导出 CSV 实战:接口分页、字段平铺与 5 个数据坑,多多开票助手
java·前端·javascript
搬砖的小码农_Sky4 小时前
AI Agent:Node.js和浏览器运行环境的本质区别
javascript·node.js·人机交互
想吃火锅10055 小时前
【leetcode】189.轮转数组js
开发语言·javascript·leetcode