经纬志
首页 / Cesium / 使用示例

时间轴动画

底部时间轴可以拖动、播放与暂停,航班从北京经济南、南京到上海, 高度按余弦曲线过渡,轨迹线随飞行逐步画出。

CesiumJS 1.121 · 更新 2026-10-27
源码与运行效果
运行效果

时间轴控件的开关

示例在 Viewer 构造时把 animation 与 timeline 都设为 true,于是左下角出现时钟、底部出现时间条。其他示例通常把它们关掉, 因为纯展示页面不需要时间控件。

时间条的可视范围由 viewer.timeline.zoomTo(start, stop) 指定, 不调用的话时间条会以默认的一整天为范围,240 秒的动画被压缩成一根细线, 根本拖不准。

采样点的密度

四个航段每段切 12 份,一共 49 个采样点,间隔 5 秒左右。 高度用余弦曲线在两端平滑过渡,避免航段接缝处高度突变, 不给插值算法制造尖角。

path 的 trailTime: 240 表示轨迹保留当前时间之前 240 秒的路径,配合 leadTime: 0 就是「只画走过的部分」。

可调参数

位置改什么效果
WAYPOINTS增删航点航线形状与总时长按航段数变化
SAMPLES_PER_LEG12 改成 4轨迹变折线,转角处出现硬拐
倍速按钮1× / 8× / 30×clock.multiplier 变化
trailTime改成 30只显示最近 30 秒的尾迹
clockRange改成 CLAMPED播到终点停住,不循环

拖动时间条但画面不动。检查 clock.shouldAnimate 是否被暂停按钮置成了 false,以及 Viewer 是否开了 requestRenderMode。按需渲染模式下,时间推进不会自动请求新帧。

和 CZML 的分工

数据来自后端、时间区间由服务决定时,用 CZML 更省事:后端只发 JSON, 前端不需要写采样逻辑。数据由前端计算、或者要按业务条件动态生成轨迹时, 用示例里的 SampledPositionProperty 更灵活。两者都能挂时间轴, 视觉表现一致。