Leaflet 点击事件无法仅监听 map 层

Question

我的 leaflet 项目上有一些用户绘制的形状。 单击形状时，另一个元素（例如侧边栏）将打印出统计信息。 如果我点击 map 层，该元素应该重置。

我尝试使用 map.on('click') 事件，但它会监听所有用户绘制的图层以及 map 图层。 我只希望事件监听 map 层。

map.on('click', onBackgroundClick);

function onBackgroundClick(e)
{
    let type = e.layerType;

    if (type !== 'polygon' && type !== 'polyline' && type !== 'marker' && type != 'rectangle')
    {
          //reset sidebar state
    }
}

我对事件进行了哪些更改，使其仅侦听 map 层。 有没有更好的方法来解决这个问题？

Answer 1

或者，您可以在子组件中调用stopPropagation ，因此子组件上的click事件不会通过DOM树传播，而只会在地图上传播。

Answer 2

要添加，请单击创建层：

L.featureGroup(arr).on('click', function(){/* Your Code*/ });

您可以始终使用on方法添加事件侦听器。

Answer 3

您尝试的问题与其他问题具有相似的根本原因，即event.layerType仅由Leaflet.draw插件设置，仅当用户创建了新功能时才设置。

这里的解决方案可能是测试单击的图层是否不属于您的要素，如果后者不是图层组的一部分，则可能是使用Leaflet.draw的情况：

const clickedLayer = e.target;
if (!myLayerGroup.hasLayer(clickedLayer))

另一个可能的解决方案可能与测试相反：单击的图层是否为图块图层：

const clickedLayer = e.target;
if (clickedLayer === myTileLayer)

// or
if (clickedLayer instanceof L.TileLayer)

Answer 4

这是我采用的解决方案。

我对此不太满意，但它适用于我的情况。

它基本上只是检查单击的元素是否属于路径类型，如果是，则停止执行 map 单击处理程序主体

map.on('click', function(e) {
    if (e.originalEvent.target.nodeName == 'path')
        return;
    
    // map-only click logic below
    sidebar.classList.remove('active');