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

自定义要素动画

在 requestAnimationFrame 循环里更新点与面的几何:标记绕中心画圆,面按同一角度旋转。

OpenLayers 10.3.1 · 对应官方 feature-animation.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

动画的本质是每一帧改几何:点用 setCoordinates() 移到圆周上的新位置, 面把每个顶点绕中心点旋转一个角度。ol.coordinate.rotate() 负责后者, 旋转中心用墨卡托坐标传入。

循环用 requestAnimationFrame,每帧调用 map.render() 触发重绘;时间差用 Math.min(60, dt) 截断,页面切到后台再回来时不会突然跳一大步。

操作结果
点击「播放」标记绕中心运动,面同步旋转
点击「暂停」循环停止,画面停在当前帧
缩放地图动画继续,几何按地图坐标定位

要素数量大时改用图层级的 render 回调或 WebGL 矢量渲染,逐帧改几何的开销会明显上升。