使用BringToFront():leaflet时,Imageoverlay状态丢失

时间:2015-09-03 05:54:00

标签: javascript jquery leaflet angular-leaflet-directive dc.leaflet.js

简介

我正在使用传单api来创建一个使用两个图像重叠的应用程序(添加到地图中)。

问题

因为我加载了两个图像重叠以映射固定边界。 现在我已经把控件切换到图像重叠,即下一个和之前的

我用过函数bringToFront();这些控制背后......

但是当我绘制像矩形这样的东西并切换图像重叠时,那么在图像或点上绘制的形状将会丢失,或者我猜想会失去它们的外观......我现在不知道如何解决这个问题.....

具有不完整实施的脚本的一部分

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 ???

如果有人对此有所了解,请提供帮助,任何形式的帮助或参考都将不胜感激....感谢您的时间

1 个答案:

答案 0 :(得分: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

我个人原本希望在调用bringToFront L.FeatureLayer bringToFront方法之后调用L.ImageOverlay import Tkinter as tk import guiOpMenu2 class Omenu(object): def __init__(self): self.app = tk.Tk() self.app.title('test1') self.OpMenu() self.btn() def OpMenu(self): self.op = tk.StringVar() self.opt =['1', '2'] self.men = tk.OptionMenu(self.app, self.op, *self.opt) self.men.pack() def btn(self): self.btn_btn = tk.Button(self.app, text='newGui', command=self.test) self.btn_btn.pack() def test(self): win = guiOpMenu2.Omenu2() win = Omenu() win.app.mainloop() import Tkinter as tk class Omenu2(object): def __init__(self): self.app = tk.Tk() self.app.title('test1') self.OpMenu2() def OpMenu2(self): self.op2 = tk.StringVar() self.opt2 =['2', '3'] self.men2 = tk.OptionMenu(self.app, self.op2, *self.opt2, command=self.test) self.men2.pack() def test(self, num): print self.op2.get() print num 方法也可以做到这一点,但不知何故没有按'吨。由于图像和要素图都包含在传单的叠加窗格中,因此也应该有效。当我找到时间时,我需要做更多的测试。