Javascript 使用BringToFront（）时图像覆盖状态丢失：传单

导言

我正在使用传单api创建一个使用两个imageoverlays（添加到地图）的应用程序

问题

当我加载两个imageoverlays以固定边界进行映射时。 现在，我已经设置了切换imageoverlays的控件，即下一个和上一个

我使用了函数bringToFront（）；在这些控制之下

但当我画矩形并切换imageoverlay时，在图像或点上绘制的形状将丢失，或者我猜它们将丢失外观…我现在不知道如何解决这个问题

实现不完整的脚本部分

var map = L.map('map', {
                    minZoom: 1,
                    maxZoom: 4,
                    center: [0, 0],
                    zoom: 0,
                    crs: L.CRS.Simple
                });

                // dimensions of the image
                var w = 3200,
                    h = 1900,
                    url = 'assets/img/isbimg.jpg';
                url1 = 'assets/img/fjmap.png';
                // calculate the edges of the image, in coordinate space
                var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
                var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
                var bounds = new L.LatLngBounds(southWest, northEast);

                var featureGroup = L.featureGroup().addTo(map);

                var drawControl = new L.Control.Draw({
                    edit: {
                        featureGroup: featureGroup
                    },
                    draw: {
                        polygon: true,
                        polyline: true,
                        rectangle: true,
                        circle: true,
                        marker: true
                    }
                }).addTo(map);


                map.on('draw:created', showPolygonArea);
                map.on('draw:edited', showPolygonAreaEdited);
                // add the image overlay,
                // so that it covers the entire map

                var iii = L.imageOverlay(url1, bounds);
                var jjj = L.imageOverlay(url, bounds);
                var ggg = iii.addTo(map);
                var hhh = jjj.addTo(map);

                jjj.addTo(map);
                $('#layerControl').on('click', function layerControl() {
                    ggg.bringToFront();
                    return this;
                });

                $('#layerControl2').on('click', function layerControl2() {
                    hhh.bringToFront();
                    return this;
                });

我知道，我还没有保存绘制的矢量或imageoverlay的状态 制造问题，有没有解决这个问题的方法或方法 将id设置为imageoverlay

---

如果有人对此有想法，请提供帮助，任何形式的帮助或参考都将不胜感激。。。。感谢您的时间

您可以通过完全相反的方式让它工作：您需要将另一个imagelayer放在后面，而不是将您想要查看的imagelayer放在前面：

$('#layerControl').on('click', function layerControl() {
    // ggg.bringToFront();
    hhh.bringToBack();
    return this;
});

$('#layerControl2').on('click', function layerControl2() {
    // hhh.bringToFront();
    ggg.bringToBack();
    return this;
});

下面是一个关于Plunker的工作示例：

---

就我个人而言，在调用

L.ImageOverlay的
bringToFront
方法之后，调用
L.FeatureLayer
的
bringToFront
方法也会起到作用，但不知何故没有。因为图像和featurelayer都包含在传单的覆盖窗格中，所以这也应该起作用。当我有时间的时候，我需要做更多的测试。
谢谢你的回复，我一定会接受答案，+1感谢你的努力。。。再次感谢您的帮助事实上我对imageoverlay没有清楚的了解，我愿意这样做，当我在image1上绘制一些形状时，这些形状应该只适用于image1，，，图二有自己的形状或德拉青…如果可能的话，请让我知道…感谢您的努力，尽管答案对于我的另一个要求有完美的实现…不，谢谢，欢迎光临。我认为你想要的是可能的，尽管这需要写大量的逻辑。为什么不贴一个新问题，这样其他人也能帮上忙呢？我会留意的。祝你的项目好运。明白了，是的，我将发布关于它的问题