首页 / OpenLayers / 使用示例
自定义要素动画
在 requestAnimationFrame 循环里更新点与面的几何:标记绕中心画圆,面按同一角度旋转。
源码与运行效果
说明
动画的本质是每一帧改几何:点用 setCoordinates() 移到圆周上的新位置,
面把每个顶点绕中心点旋转一个角度。ol.coordinate.rotate() 负责后者,
旋转中心用墨卡托坐标传入。
循环用 requestAnimationFrame,每帧调用 map.render()
触发重绘;时间差用 Math.min(60, dt) 截断,页面切到后台再回来时不会突然跳一大步。
| 操作 | 结果 |
|---|---|
| 点击「播放」 | 标记绕中心运动,面同步旋转 |
| 点击「暂停」 | 循环停止,画面停在当前帧 |
| 缩放地图 | 动画继续,几何按地图坐标定位 |
要素数量大时改用图层级的 render 回调或 WebGL 矢量渲染,逐帧改几何的开销会明显上升。