同时定位传单中的几个重叠特征

Question

我是传单的新手，但我正在尝试实现一个我无法在此处找到任何示例或问题的用例。提前感谢您帮助解决这个问题：

现场演示是here，here's 是 GitHub 存储库中感兴趣的代码。

当您将鼠标悬停在各种 geoJSON 功能上时，我使用 onEachFeature 将样式更改为“突出显示”地图上的特色区域，并在右上角的信息框中显示其名称：

function onEachFeature (feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight
    });
    layer.bindPopup(feature.properties.f2,customOptions);
}

var geojson;
geojson = L.geoJson(myData,{
    style: style,
    onEachFeature: onEachFeature,
}).addTo(map);

问题出现在特征重叠的地方。当鼠标悬停在重叠区域上时，只有一个是目标。相反，我希望在光标位置重叠的所有特征都被“突出显示”；并能够在信息框中列出所有名称。

我猜这个解决方案更像是我应该在所有 mousemove 事件上检索 latlng，确定 latlng 是否在任何 geoJSON 对象的边界内，如果是，遍历那些突出显示并获取名称全部。我不确定是否有一个插件可以为我更优雅地处理这个问题。

是否可以在 Leaflet 中同时定位多个重叠的 geoJSON 层？

Answer 1

您描述了一种简单的方法，我建议您使用它。我只为您建议一项优化。
不要捕获所有mousemove 事件。每个特征都需要一个mouseover，然后检查是否有其他特征被它重叠。

 function onEachFeature (feature, layer){
    layer.on('mouseover',function(e){
      var point = e.latlng;
      map.eachLayer(function(layer){
        var bounds = layer.getBounds();
        if(bounds.contains(point))
           highlite(layer);
      })
    })
 }

另一种方法是使用L.Canvas 渲染器并对其进行扩展，以便它为指针下的每一层触发mouseover 或其他处理程序。