Javascript 传单：鼠标点击，鼠标悬停在相交的矩形上，得到最内层

我试图在地图上显示一组矩形。我能够使用以下工具绘制所有这些图形：

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

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

在这种情况下，如何正确显示工具提示并在单击事件时检索适当的图层

---

Stackblitz:

问题是

Z2

矩形位于

Z1

后面（

Z1

包含

Z2

）

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

---

我正在从数据库中读取矩形边界，并有一个额外的“优先级”列，并基于此值渲染矩形。但这是一个很好的客户端解决方案。我将把它标记为答案。非常感谢。

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