`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

飞行动画

飞机沿航线推进,视图跟随并留下逐渐延伸的尾迹。

OpenLayers 10.3.1 · 更新 2026-10-27
`r`n
源码与运行效果
运行效果
`r`n

说明

动画分三部分:LineString 取点推进飞机坐标、把经过的坐标追加到 LineString 尾迹、用 view.setCenter() 跟随。 三者都在同一帧内完成,视觉上就是一个连续飞行过程。

机头角度由前后两点的方向计算,赋给 ol.style.RegularShape 的 rotation,转弯时朝向会跟着变化。

操作结果
点「起飞」飞机沿航线移动,尾迹逐渐变长
点「暂停」动画停止,当前尾迹保留
点「重置」飞机回到起点,尾迹清空

跟随视图要留出前方视野,纯 setCenter 会让飞机永远在正中;用 view.padding 或像素偏移能更好地表现航向。

`r`n
`r`n