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

城市飞线动画

一个枢纽城市连向六个目的地,弧线沿大圆展开并抬高到几十万米, 白色光点循环跑完整条弧线,用来表达流向与连接关系。

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

弧线怎么算

先把两端经纬度交给 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 的 STEP72 改成 24弧线折角变明显,顶点数减少

只连接经度差很小的城市时会看错。北京到上海经度差约 5 度, 大圆几乎沿纬线走,弧线在俯视图里看着像直线。把相机侧过来(pitch 调到 -20 左右) 才能看出抬升的高度。

性能与替代方案

每条弧线是一个独立的 polyline 实体,几十条没问题,几百条就要考虑合批: 把同一材质的弧线顶点合并成一个 Primitive,或者用 Cesium.PolylineCollection 一次性提交。光点数量过多时同理, 可以把光点改成一个沿着弧线移动的 billboard,或者干脆只保留弧线本身。