单张点击事件无法仅收听地图图层

时间:2019-07-12 11:13:10

标签: javascript leaflet leaflet-draw

我的传单项目上有一些用户绘制的形状。单击形状时,其他元素(如边栏)将打印出统计信息。如果单击地图图层,则该元素应该重置。

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


map.on('click', onBackgroundClick);

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

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

我对该事件进行了哪些更改,使其仅侦听地图图层。有解决这个问题的更好方法吗?

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

要添加,请点击创建图层:

qux one -0.521636 -2.253847 -0.420486 1.354772

您始终可以使用L.featureGroup(arr).on('click', function(){/* Your Code*/ }); 方法添加事件监听器。

答案 2 :(得分:0)

尝试中的问题与other question中的问题具有相似的根本原因,即event.layerType仅由Leaflet.draw插件设置,仅当用户创建了新功能时。< / p>

这里的解决方案可能是测试单击的图层是否不是您的要素的一部分,如果后者全部属于图层组,那么使用Leaflet.draw可能就是这种情况:

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

另一种可能的解决方案可能与测试相反,即所单击的层是否为图块层:

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

// or
if (clickedLayer instanceof L.TileLayer)