首页 / MapLibre / 使用示例
飞行动画
跨越半个地球的视角切换用 flyTo,缩放会先拉远再推近, 比直接跳转更容易让观看者建立方位感。
源码与运行效果
说明
每个城市一组中心、缩放、俯仰、方向参数。
点击按钮后 flyTo 按 speed 与
curve 计算路径与时长,duration
是期望值,实际时长会随距离调整。
map.flyTo({
center: [116.391, 39.907],
zoom: 4,
pitch: 40,
bearing: -18,
speed: 0.9,
curve: 1.4,
essential: true
});
| 参数 | 作用 | 常用取值 |
|---|---|---|
speed | 飞行速度 | 0.6 慢,1.2 快 |
curve | 路径弯曲程度 | 1.42 接近默认弧线 |
duration | 期望时长,毫秒 | 2000–3000 |
essential | 无障碍设置下仍执行动画 | true |
飞行动画期间 moveend 还未触发,顶部读到的仍是旧视角。
示例在点击时先标记「飞行中」,等动画结束再刷新真实数值,
避免界面显示与画面不同步。
用户开启「减少动态效果」时,飞行动画会被跳过。 需要确保动画不是唯一的信息来源,例如同时在按钮上标出目标城市名称。