如何在react-leaflet v3中动态修改scrollWheelZoom实现滚轮缩放开关控制

Leaflet v3（react-leaflet v3 底层依赖的原生Leaflet版本）对交互逻辑的处理做了调整，所有交互控制项（滚轮缩放、拖拽、双击缩放等）都对应独立的Handler实例，初始化阶段会读取配置决定是否启用对应Handler，后续直接修改map.options的属性值不会自动触发Handler的状态切换，所以仅改配置不会生效。

方法1：直接调用对应Handler的开关方法 #

不需要修改map.options，直接调用scrollWheelZoom实例的enable()/disable()方法即可切换功能，代码示例：

const map = useMap();
const someEventHandler = () => {
  // 启用滚轮缩放
  map.scrollWheelZoom.enable();
  // 如需禁用滚轮缩放，替换为 map.scrollWheelZoom.disable()
};

如果需要同步options的状态，可以在调用开关方法后同步修改map.options.scrollWheelZoom的值，保持配置和实际状态一致。

方法2：绑定React状态实现自动切换 #

如果要保持和v2版本类似的、通过React状态变量控制的使用方式，可以搭配useEffect监听状态变化自动切换：

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

// 组件内逻辑
const [scrollWheelZoom, setScrollWheelZoom] = useState(false);
const map = useMap();

useEffect(() => {
  scrollWheelZoom ? map.scrollWheelZoom.enable() : map.scrollWheelZoom.disable();
}, [scrollWheelZoom, map]);

后续只需要更新scrollWheelZoom状态变量的值，即可自动切换地图滚轮缩放功能。

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