首页 / MapLibre / API 文档

easeTo

先看结论

按固定时长插值到目标视图：中心、缩放、方位、倾斜同时平滑过渡，不经过缩放拉远。

最后验证 2026-11-03 · MapLibre GL JS 4.x · 更新 2026-10-29 · 引用本文

map.easeTo(options) → this

参数

参数	默认	说明
`center`	不变	目标中心
`zoom`	不变	目标缩放
`bearing`	不变	目标方位角
`pitch`	不变	目标倾斜角
`padding`	0	视口内边距
`offset`	`[0, 0]`	中心点偏移，单位像素
`duration`	`500`	动画时长，毫秒
`easing`	内置缓动	缓动函数或预设名
`animate`	`true`	为假时直接跳到目标视图
`essential`	`false`	忽略系统的「减少动态效果」偏好

基本用法

map.easeTo({
  center: [116.391263, 39.907359],
  zoom: 11,
  duration: 800
});

改写缓动

map.easeTo({
  center: [116.391263, 39.907359],
  zoom: 12,
  duration: 1200,
  easing: function (t) {
    return t * t * (3 - 2 * t);
  }
});

easing 接收 0 到 1 的进度，必须返回 0 到 1 的值。返回超出区间会得到超出目标再回弹的过冲效果，多数场景不需要。

与其它视角方法的分工

方法	过渡方式	适用
`jumpTo`	无动画，立即生效	初始化、需要同步完成的场景
`easeTo`	固定时长插值	同级别平移、小范围缩放、旋转
`flyTo`	缩放曲线，时长自适应	跨级别、跨城市的远距离跳转

从 5 级直接缓动到 15 级时，中间帧的瓦片会大面积缺失，画面出现灰块。跨多个级别优先用 flyTo，让缩放与加载节奏匹配。

动画结束再操作

map.easeTo({ center: [116.4, 39.9], zoom: 12, duration: 600 });

map.once('moveend', function () {
  map.setFilter('poi', ['==', ['get', 'visible'], true]);
});

moveend 在动画结束或用户停止拖动后触发。动画进行中频繁改过滤条件会与瓦片加载抢资源，放到结束后更稳。

关闭动画

传 animate: false 时忽略 duration 与 easing，直接应用目标状态。测试、截图、以及需要与其它同步逻辑对齐时用这个开关。

连续调用会从当前帧重新计算。 上一段动画没结束时再次 easeTo，新动画以当前视图为起点，时长重新计时，因此可能出现「越点越慢」的观感。交互频繁时先判断是否已有动画在跑，或合并目标值。

引用本文

经纬志（2026）。《easeTo》。https://www.jingweizhi.com/maplibre/api/ease-to.html（访问日期 2026-11-03）。