javascript - leafletjs 覆盖层被隐藏

Question

我的 map 中有 3 层。所有图层都是imageOverlay类型，以便显示大图像而不是平铺样式。前两层是我可以在( radio )之间切换的基本图像，第三层是如果选中(复选框)则应显示在它们之上的覆盖层。

我的问题是，当我选择其中一个基础层时，覆盖层(第三层)被隐藏而不是显示在其顶部。

这就是我启动层的方式:

var image1Layer = L.imageOverlay(image1Url, imageBounds);
var image2Layer = L.imageOverlay(image2Url, imageBounds);
var image3Layer = L.imageOverlay(image3Url, imageBounds);

L.control.layers({
  'New': image2Layer,
  'Old': image1Layer
}, 
{
  'Changes': image3Layer
}, 
{collapsed:false}).addTo(map);

Answer 1

您可以检查覆盖层是否存在于 map 上，如果存在，则每当基础层发生更改时将其置于前面。

map.on('baselayerchange', function() {
    if (map.hasLayer(image3Layer)) {
        image3Layer.bringToFront();
    }
});