état Imageoverlay perdu lors de l'utilisation BringToFront(): dépliant

Question

Présentation

Je travaille avec dépliant api, pour créer une application qui utilise deux imageoverlays (ajoutés à la carte).

Problème

Comme je l'ai chargé deux imageoverlays à la carte avec des limites fixes. Maintenant, j'ai mis les contrôles pour basculer les imagesoverlays i.e suivant et précédent

J'ai utilisé la fonction bringToFront(); derrière ces contrôles ....

Mais quand je dessine quelque chose comme rectangle et bascule l'imageoverlay, puis les formes dessinées sur l'image ou les points seront perdus ou je suppose que perd leur apparence ... je ne sais pas comment résoudre ce problème .....

une partie de script qui a la mise en œuvre incomplète

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; 
       }); 

Je sais, je havent sauvé le vecteur tiré ou de l'état de imageoverlay qui crée problème, est-il une méthode pour résoudre ce p roblem ou avec définition d'id à imageoverlay ???

Si quelqu'un a idée à ce sujet s'il vous plaît faire de l'aide, tout type d'aide ou de référence sera apprécié .... merci pour votre temps

Answer 1

Vous pouvez obtenir de travailler en faisant exactement le contraire: au lieu d'amener le ImageLayer que vous voulez voir à l'avant, vous devez apporter l'autre ImageLayer à l'arrière:

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

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

Voici un exemple de travail sur Plunker: http://plnkr.co/edit/3Hd9FR?p=preview

personnelles ly je m'attendais à ce qu'un appel à la méthode bringToFront de L.FeatureLayer après avoir appelé la méthode bringToFront de L.ImageOverlay aurait également fait l'affaire, mais il ne le fait pas. Comme l'image et le featurelayer sont tous deux contenus dans le volet de superposition de la feuille, cela devrait également fonctionner. Je devrais faire d'autres tests quand je trouverai le temps.