使用 BringToFront() 时 Imageoverlay 状态丢失：传单

Question

简介

我正在使用 leaflet api 创建一个应用程序，它使用两个 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;
                });

I know, i havent saved the drawn vector or state of imageoverlay which creates problem, is there any method to solve this problem or with setting id to imageoverlay ???

如果有人对此有所了解，请提供帮助，我们将不胜感激....感谢您的宝贵时间

Answer 1

你可以通过完全相反的方式让它工作：不是把你想看到的图像层放在前面，你需要把另一个图像层放在后面：

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

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

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/3Hd9FR?p=preview

就我个人而言，我希望在调用 L.ImageOverlay 的 bringToFront 方法之后调用 L.FeatureLayer 的 bringToFront 方法也能达到目的，但是它不知何故没有。由于图像和要素图层都包含在传单的覆盖窗格中，因此这也应该有效。当我有时间的时候，我需要做更多的测试。

使用 BringToFront() 时 Imageoverlay 状态丢失：传单

Imageoverlay state lost when using BringToFront() : leaflet

javascript

jquery

leaflet

dc.leaflet.js

angular-leaflet-directive