传单：在鼠标单击和鼠标悬停在相交矩形上时获取最内层

Question

我正在尝试在地图上显示一组矩形。我可以使用以下方法绘制所有这些：

var rec = L.rectangle(bounds, {color: "#ff7800", weight: 1})
                .bindTooltip('Z1', { sticky: true}).addTo(map);

但是，当我将鼠标悬停在矩形上时，工具提示仅针对最外面的矩形显示。此外，在点击事件中，只有最外面的矩形被选中。（请注意，较大的矩形可以叠加在较小的矩形上）

鉴于这种情况 - 如何正确显示工具提示并在单击事件时检索正确的图层？

堆栈闪电战：click here

Answer 1

问题是 Z2 矩形位于 Z1 后面（Z1 包含 Z2）。

data.sort((a, b) => {
   return L.bounds(a.bounds).contains(b.bounds) ? -1 : 1;
});

这里我使用contains方法对边界进行了排序

Leaflet: Get inner-most layer on mouse click and mouse hover on intersecting rectangles