时间轴动画
底部时间轴可以拖动、播放与暂停,航班从北京经济南、南京到上海, 高度按余弦曲线过渡,轨迹线随飞行逐步画出。
时间轴控件的开关
示例在 Viewer 构造时把 animation 与 timeline
都设为 true,于是左下角出现时钟、底部出现时间条。其他示例通常把它们关掉,
因为纯展示页面不需要时间控件。
时间条的可视范围由 viewer.timeline.zoomTo(start, stop) 指定,
不调用的话时间条会以默认的一整天为范围,240 秒的动画被压缩成一根细线,
根本拖不准。
采样点的密度
四个航段每段切 12 份,一共 49 个采样点,间隔 5 秒左右。 高度用余弦曲线在两端平滑过渡,避免航段接缝处高度突变, 不给插值算法制造尖角。
path 的 trailTime: 240 表示轨迹保留当前时间之前
240 秒的路径,配合 leadTime: 0 就是「只画走过的部分」。
可调参数
| 位置 | 改什么 | 效果 |
|---|---|---|
WAYPOINTS | 增删航点 | 航线形状与总时长按航段数变化 |
SAMPLES_PER_LEG | 12 改成 4 | 轨迹变折线,转角处出现硬拐 |
| 倍速按钮 | 1× / 8× / 30× | clock.multiplier 变化 |
trailTime | 改成 30 | 只显示最近 30 秒的尾迹 |
clockRange | 改成 CLAMPED | 播到终点停住,不循环 |
拖动时间条但画面不动。检查 clock.shouldAnimate
是否被暂停按钮置成了 false,以及 Viewer 是否开了
requestRenderMode。按需渲染模式下,时间推进不会自动请求新帧。
和 CZML 的分工
数据来自后端、时间区间由服务决定时,用 CZML 更省事:后端只发 JSON,
前端不需要写采样逻辑。数据由前端计算、或者要按业务条件动态生成轨迹时,
用示例里的 SampledPositionProperty 更灵活。两者都能挂时间轴,
视觉表现一致。