Leaflet使用flyToBounds缩放多边形边缘卡顿，求解决方案或替代方法

我正在使用flyToBounds方法实现带动画效果的多边形加载，但遇到了一个小问题。
缩放多边形过程中，多边形边缘会出现卡顿，直到达到最佳缩放级别才恢复正常。
请问如何解决该动画卡顿问题？或者是否有可替代flyToBounds的其他方法？

相关代码如下：

var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    weight: 2,
    radius: 500
}).addTo(map);

setTimeout(function(){
map.flyToBounds(circle.getBounds(), { 'duration': 7.5 })
}, 1000);

卡顿原因 #

Leaflet 默认的矢量图层渲染逻辑在缩放动画过程中仅会在整数缩放级别触发重绘，非整数缩放级别下矢量图形不会实时更新路径，因此长时间的缩放动画过程中会出现边缘锯齿、卡顿的观感，直到落到最终整数缩放级别才会恢复正常。

解决方法 #

方案1：修改地图初始化配置（最简单） #

初始化地图时增加以下参数，开启连续缩放过程中的矢量重绘优化：

var map = L.map('map', {
  // 保留你原有的其他配置项
  zoomAnimation: true,
  // 提高缩放动画阈值，适配长动画场景
  zoomAnimationThreshold: 16,
  // 改用Canvas渲染矢量图层，连续缩放时重绘性能更优
  preferCanvas: true
});

方案2：自定义平滑过渡动画替代flyToBounds #

如果不想修改全局配置，可以自己实现过渡动画完全控制重绘时机，替换原有的flyToBounds调用即可：

// 自定义平滑过渡到边界方法
function smoothFlyToBounds(map, bounds, duration) {
  const startZoom = map.getZoom();
  const targetZoom = map.getBoundsZoom(bounds);
  const startCenter = map.getCenter();
  const targetCenter = bounds.getCenter();
  const startTime = performance.now();

  function animate(time) {
    const elapsed = time - startTime;
    const progress = Math.min(elapsed / duration, 1);
    // 三次缓动函数让动画更自然
    const easeProgress = 1 - Math.pow(1 - progress, 3);
    
    const currentZoom = startZoom + (targetZoom - startZoom) * easeProgress;
    const currentCenter = L.latLng(
      startCenter.lat + (targetCenter.lat - startCenter.lat) * easeProgress,
      startCenter.lng + (targetCenter.lng - startCenter.lng) * easeProgress
    );
    
    map.setView(currentCenter, currentZoom, {animate: false});
    progress < 1 && requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
}

// 替换原调用，注意时长单位为毫秒
setTimeout(function(){
  smoothFlyToBounds(map, circle.getBounds(), 7500)
}, 1000);

额外优化 #

• 你当前设置的7.5秒动画时长过长，时长越久中间非整数缩放的停留时间越长，卡顿感越明显，业务允许的前提下缩短到1-2秒可大幅缓解卡顿问题。
• 如果你使用的是默认SVG渲染器，可以添加以下CSS提升缩放过程中的矢量渲染质量：

.leaflet-overlay-pane svg {
  shape-rendering: geometricPrecision;
  will-change: transform;
}

内容的提问来源于stack exchange，提问作者Furkan Penbegül