leaflet.Control扩展导致react-leaflet eventHandlers点击事件不生效问题

问题根源 #

你自定义的LeafletMapExtensions控件创建了一个铺满全屏的<span>容器，层级默认高于地图矢量图层，所有点击事件都被这个上层容器拦截，下层Polygon的点击事件根本无法触发，并非eventHandlers没有注册成功。
另外你代码里还存在一处拼写错误：注册控件时用的是L.control.leafletMapExtensions，但实际调用时写的是L.control.mapExtension()，两者不匹配可能导致控件初始化异常。

解决方案 #

方案1：透传非交互区域事件（推荐） #

给全屏容器设置pointer-events: none，让非交互区域的事件直接穿透到下层地图，仅给需要交互的控制组件单独开启事件响应：

1. 修改自定义控件的创建逻辑，添加pointer-events配置：

L.Control.LeafletMapExtensions= L.Control.extend({
    onAdd: (map) => {
        var div = L.DomUtil.create('span');
        div.setAttribute('id', 'leafletExtensions');
        div.style.height = '100vh';
        div.style.width = '100vw';
        div.style.margin = 0;
        div.style.padding = 0;
        div.style.cursor = 'pointer';
        // 新增：默认不拦截鼠标事件
        div.style.pointerEvents = 'none';
        return div;
    },
});

2. 给ExtensionController的根容器开启事件响应：

function ExtensionController({ ...props }) {
    return (
            // 新增pointerEvents配置，仅控制组件区域响应事件
            <div style={{ display: 'flex', pointerEvents: 'auto' }}>
                <SidebarController {...props} />
                <ToolbarControll {...props} />
                <TimeControl {...props} />
            </div>
    );
}

3. 修复控件调用的拼写错误：

// 原来的错误写法：useEffect(() => L.control.mapExtension().addTo(map), [map]);
// 修改为正确的注册名
useEffect(() => L.control.leafletMapExtensions().addTo(map), [map]);

方案2：修改控件尺寸，避免全屏覆盖 #

如果不需要全屏容器承载功能，直接调整控件容器的尺寸为自适应，仅覆盖控制组件本身的区域，不会拦截地图其他位置的点击事件：

L.Control.LeafletMapExtensions= L.Control.extend({
    onAdd: (map) => {
        var div = L.DomUtil.create('span');
        div.setAttribute('id', 'leafletExtensions');
        // 删掉全屏宽高配置，改成自适应
        // div.style.height = '100vh';
        // div.style.width = '100vw';
        div.style.margin = 0;
        div.style.padding = 0;
        div.style.cursor = 'pointer';
        return div;
    },
});

两种方案修改后，Polygon的click事件就可以正常触发。

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