传单：在相交的矩形上单击鼠标并悬停鼠标，可获取最里面的一层

Question

我正在尝试在地图上显示一组矩形。我可以使用以下命令绘制所有图像：

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

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

在这种情况下-如何正确显示工具提示并在点击事件后恢复正确的图层？

Stackblitz：click here

Answer 1

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

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

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

Stackblitz