如何在react-leaflet项目中实现平滑缩放？

方案一：集成 Leaflet.SmoothWheelZoom 插件 #

react-leaflet 本质是对原生 Leaflet 的封装，直接获取原生地图实例即可对接插件，步骤如下：

1. 安装插件

npm install leaflet-smooth-wheel-zoom

2. 在 React 组件中集成

import { useMap, MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet-smooth-wheel-zoom';
import { useEffect } from 'react';

// 自定义平滑缩放控制组件
function SmoothZoomControl() {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    // 初始化平滑滚轮缩放，参数可按需调整
    map.smoothWheelZoom({
      step: 0.1, // 每次滚动的缩放增量，值越小缩放越平缓
      zoomDelay: 60, // 缩放动画的延迟时间，值越大耗时越长
      minZoom: 2.5, // 对应你的地图最小缩放级别
      maxZoom: 5    // 对应你的地图最大缩放级别
    });

    // 组件卸载时清理插件
    return () => {
      map.removeControl(map.smoothWheelZoomControl);
    };
  }, [map]);

  return null;
}

// 你的地图组件
function MyMap() {
  return (
    <MapContainer
      center={[51.505, -0.09]} // 替换为你的地图中心点
      zoom={2.5}
      minZoom={2.5}
      maxZoom={5}
      zoomSnap={0} // 允许非整数缩放级别，必须设置
      zoomDelta={0} // 禁用默认的增量式缩放
      style={{ height: '100vh', width: '100%' }}
    >
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <SmoothZoomControl /> {/* 加入平滑缩放控制 */}
    </MapContainer>
  );
}

方案二：自定义平滑缩放逻辑 #

如果插件适配有问题，可以手动监听滚轮事件，通过缓动动画实现平滑缩放：

import { useMap, MapContainer, TileLayer } from 'react-leaflet';
import { useEffect } from 'react';

function CustomSmoothZoom() {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    let animationFrameId;
    let targetZoom = map.getZoom();
    let currentZoom = targetZoom;

    // 处理滚轮事件
    const handleWheel = (e) => {
      e.preventDefault(); // 阻止默认滚轮缩放行为
      // 根据滚动方向计算缩放增量，可调整0.1来改变每次滚动的缩放幅度
      const delta = e.deltaY > 0 ? -0.1 : 0.1;
      // 限制缩放范围在你的minZoom和maxZoom之间
      targetZoom = Math.max(2.5, Math.min(5, targetZoom + delta));
    };

    // 缓动更新缩放级别
    const updateZoom = () => {
      if (Math.abs(currentZoom - targetZoom) < 0.01) {
        currentZoom = targetZoom;
      } else {
        // 缓动系数，0.15越小，缩放动画越平滑、耗时越长
        currentZoom += (targetZoom - currentZoom) * 0.15;
        map.setZoom(currentZoom);
        animationFrameId = requestAnimationFrame(updateZoom);
      }
    };

    map.addEventListener('wheel', handleWheel);
    animationFrameId = requestAnimationFrame(updateZoom);

    // 组件卸载时清理事件和动画
    return () => {
      map.removeEventListener('wheel', handleWheel);
      cancelAnimationFrame(animationFrameId);
    };
  }, [map]);

  return null;
}

// 使用方式同方案一，在MapContainer中加入<CustomSmoothZoom />即可

关键注意事项 #

• 必须设置 zoomSnap={0} 和 zoomDelta={0}，解除Leaflet默认的整数缩放级别限制，否则平滑缩放会被打断。
• 调整缩放增量（如方案一的step、方案二的delta）和缓动系数，可以精准控制缩放的平缓程度和耗时。
• 地图尺寸不会直接影响滚轮滚动次数，核心是调整每次滚动对应的缩放幅度，缩小增量就能增加从最小到最大缩放所需的滚动次数。

内容的提问来源于stack exchange，提问作者Horkos