城市飞线动画
一个枢纽城市连向六个目的地,弧线沿大圆展开并抬高到几十万米, 白色光点循环跑完整条弧线,用来表达流向与连接关系。
弧线怎么算
先把两端经纬度交给 EllipsoidGeodesic,它按椭球面的大圆给出
中间点;再对每个中间点叠加一个高度函数 4 × peak × t × (1 - t)。
这个抛物线在 t = 0.5 处取得最高点,两端高度归零,
所以弧线永远不会脱离地面起点。
peak 是弧线最高点的高度而不是平均高度。跨省航线取 24 万到 36 万米,
在地球尺度下能看出明显的拱形;如果取几十米,视觉上就是一条贴地直线。
光点怎么跑
光点的位置用 CallbackProperty 每帧计算:把当前时间对单程时长取余,
得到 0 到 1 之间的进度,再换算成弧线数组的下标。每个城市错开
idx / 总数 的相位,看上去就是多点同时流动。
顶点数组预先算好,回调里只做下标取值,不做三角函数,六个城市同时跑也不会掉帧。
可调参数
| 位置 | 改什么 | 效果 |
|---|---|---|
CITIES 数组 | 增加城市、改 peak 与 color | 弧线条数、高度、配色一起变 |
/ 2600 | 改成 1200 | 光点跑得更快 |
glowPower: 0.16 | 调到 0.4 | 光晕更宽,远看更亮 |
arcPoints 的 STEP | 72 改成 24 | 弧线折角变明显,顶点数减少 |
只连接经度差很小的城市时会看错。北京到上海经度差约 5 度, 大圆几乎沿纬线走,弧线在俯视图里看着像直线。把相机侧过来(pitch 调到 -20 左右) 才能看出抬升的高度。
性能与替代方案
每条弧线是一个独立的 polyline 实体,几十条没问题,几百条就要考虑合批:
把同一材质的弧线顶点合并成一个 Primitive,或者用
Cesium.PolylineCollection 一次性提交。光点数量过多时同理,
可以把光点改成一个沿着弧线移动的 billboard,或者干脆只保留弧线本身。