首页 / Leaflet / 使用示例
动画飞线
北京到五个城市的弧线，光点沿路径推进并拖出尾迹，循环播放，错峰启动。
源码与运行效果
说明
每条航线在经纬度空间里用二次贝塞尔曲线插值出 65 个点。控制点取两点中点的法线方向偏移， 偏移量按两点距离比例计算，弧高因此随航线长度变化，短航线不会拱得夸张。
| 部分 | 实现 |
|---|---|
| 底层航线 | 完整弧线的低透明度虚线，作为路径提示 |
| 尾迹 | 每帧取当前索引往前 14 个点，setLatLngs 更新 |
| 光点 | divIcon 圆点，颜色由行内样式控制发光 |
| 推进 | 按秒推进 26 个采样点，单帧时长截断到 50 ms |
| 循环 | 到达末端停 900 ms，清空尾迹后回到起点 |
| 错峰 | 第二至第五条分别延迟 650 ms 的整数倍启动 |
城市名用 divIcon 包一段文字，锚点上移 18 像素，避免压住弧线起点。
地图上再叠一层深色矩形，降低底图亮度，让高饱和飞线更突出。
经纬度空间的贝塞尔曲线不等距，长航线的中段可能显得速度偏慢。需要严格匀速时， 先在投影坐标或大圆路径上插值，再换算回经纬度，按弧长参数化推进。