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

分段飞行动画

单段动画跨省移动会一路糊过去;拆成拉远、横移、放大三段,镜头节奏更接近地图应用的飞行效果。

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

说明

view.animate() 支持一次传入多个配置对象,按顺序播放。 第一段把 zoom 降到 6 获得视野,第二段在低层级完成 center 切换, 第三段再升到 13 收束。每段各自指定 duration 与缓动函数, 避免长距离移动时底图瓦片反复重载。

操作结果
点击「飞往上海」先拉远,再横移,最后放大到上海
点击「飞回北京」反向执行同样的三段动画
动画进行中再点按钮上一段被取消,从当前位置重新出发

跨大洲飞行把中间层级降到 3 左右更自然,但瓦片请求会集中在低层级,注意首屏加载耗时。