Imageoverlay государство потеряло при использовании BringToFront(): листовка

Question

Введение

Я работаю с листком API, чтобы создать приложение, которое использует два imageoverlays (добавлены к карте).

Проблема

Как я загружен два imageoverlays для сопоставления с фиксированными границами. Теперь я поставил элементы управления для переключения изображений в i.e следующий и предыдущий

Я использовал функцию 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 который создает проблему, есть ли способ решить эту проблему roblem или с параметр id для imageoverlay ???

Если кто-то есть идея о том, что делать, пожалуйста, помощь, любой вид помощи или ссылки будут оценены .... спасибо за ваше время

Answer 1

Вы можете заставить его работать, делая прямо противоположное: вместо в результате чего 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: http://plnkr.co/edit/3Hd9FR?p=preview

Личные я бы ожидал, что вызов метода bringToFrontL.FeatureLayer после вызова метода bringToFrontL.ImageOverlay также сделал бы трюк, но это как-то не так. Так как изображение и любитель находятся в панели наложения листа, это также должно работать. Мне нужно будет провести еще несколько тестов, когда найду время.