React-Leaflet集成Leaflet-Geoman：移除模式仅生效一次的解决方法

默认情况下Leaflet-Geoman的removalMode是单次触发模式——删除一个元素后会自动退出移除状态，所以你需要点击按钮重新进入模式才能继续删除。要实现点击一次按钮就能批量删除多个标记，只需要开启持久化移除模式即可。

修改步骤及代码实现： #

1. 将addControls中的removalMode: true改为配置对象，添加persistent: true属性，让移除模式保持激活状态。
2. 修复useEffect的清理逻辑：返回清理函数移除事件监听并销毁控件，避免内存泄漏。
3. 确保正确获取Leaflet地图实例，避免上下文对象类型问题。

修改后的完整代码：

import { useLeafletContext, useEffect } from "@react-leaflet/core";

const Geoman = (props) => {
    const context = useLeafletContext();

    useEffect(() => {
        const leafletContainer = context.layerContainer || context.map;
        // 确保获取到正确的Leaflet Map实例
        const map = leafletContainer instanceof L.Map 
            ? leafletContainer 
            : leafletContainer._map;

        // 初始化Geoman控件，开启持久化移除模式
        map.pm.addControls({
            drawMarker: true,
            dragMode: false,
            removalMode: {
                enabled: true,
                persistent: true // 核心配置：保持移除模式不自动退出
            },
        });

        // 自定义移除按钮标题
        map.pm.Toolbar.buttons.removalMode._button.title = 'Delete Data';

        // 监听标记移除事件
        const handleMarkerRemove = (e) => {
            // 在这里编写你的标记删除逻辑，比如更新组件state移除对应数据
            console.log('已删除标记:', e.marker);
        };
        map.on("pm:remove", handleMarkerRemove);

        // 组件卸载时清理资源
        return () => {
            map.off("pm:remove", handleMarkerRemove);
            map.pm.removeControls();
        };
    }, [context]);

    return null; // 该组件无需渲染DOM元素，返回null即可
};

export default Geoman;

关键说明： #

• persistent: true：开启后，进入移除模式后不会因为删除单个标记而自动退出，直到你再次点击移除按钮手动关闭模式。
• 清理函数：必须在useEffect中返回清理函数，移除事件监听并销毁Geoman控件，防止组件卸载后出现内存泄漏或无效事件触发。
• 地图实例判断：由于context.layerContainer可能是图层容器而非地图本身，通过判断类型确保获取到正确的Map实例，避免调用pm方法时出错。

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