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

要素位移动画

让点要素沿路线移动,用线要素长度把进度换算成真实距离。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

沿路线移动用 LineString.getCoordinateAt(fraction) 按比例取点,requestAnimationFrame 每帧推进进度,Point.setCoordinates() 更新位置。

示例按线要素长度与速度换算每帧进度,暂停、调速只改状态变量,几何本身不做插值。

要点

  • 进度用「米 / 路线总长」归一化,速度单位才直观。
  • 每帧时间差要封顶,切到后台再回来不会瞬移。
  • 循环播放时进度取模 1,位置自动回到起点。

大量要素同时移动时改用图层级的 postrender 动画,避免每帧重建样式。