ImageOverlay和Rectangle Z索引问题

Question

我有一个函数可以在该图像的顶部添加一个imageOverlay和一个半透明矩形（以便为图像着色，并在其周围绘制一个keyline）。

activeUserImage = new L.imageOverlay(imageUrl, imageBounds).addTo(map);
activeUserTile = new L.rectangle(imageBounds, {stroke: true, color: "#ffffff", opacity:1, weight: 1, fillColor: "#003572", fillOpacity: 0.7, clickable:true}).addTo(map);

这很好用，但后来我想删除图像和矩形：

map.removeLayer(activeUserImage);
map.removeLayer(activeUserTile);

这似乎运作良好......

然而，当我尝试添加第二个Image＆amp;矩形（使用相同的功能）矩形SVG正在图像下方渲染，因此我看不到彩色叠加。

这似乎是因为元素在第一次创建时被遗忘，然后第二次添加图像时它出现在SVG前面。

问：

1. 这是一个错误吗？ SVG元素是否也应该被清除？
2. 我可以在创建时调整图像或SVG的z-index吗？
3. 我应该在图像的不同图层中包含矩形吗？怎么样？

非常感谢

Answer 1

好的，所以Leaflet bringToFront（）方法不起作用，但我使用了一些JQuery强制采用相同的方法。

svgObj = $('.leaflet-overlay-pane svg');
svgObj.css('z-index', 9999);

这样可行，但仍然感觉像是一个黑客...但是如果（？）LEaflet中有一个错误，那么这可能就要做了???

有更好的想法吗？

Answer 2

使用bringToFront（）函数可以将图层置于顶部。

在docs。

中搜索