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

飞行动画

跨越半个地球的视角切换用 flyTo,缩放会先拉远再推近, 比直接跳转更容易让观看者建立方位感。

MapLibre GL JS 4.x · 更新 2026-10-27
源码与运行效果
运行效果

说明

每个城市一组中心、缩放、俯仰、方向参数。 点击按钮后 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 还未触发,顶部读到的仍是旧视角。 示例在点击时先标记「飞行中」,等动画结束再刷新真实数值, 避免界面显示与画面不同步。

用户开启「减少动态效果」时,飞行动画会被跳过。 需要确保动画不是唯一的信息来源,例如同时在按钮上标出目标城市名称。