reliure formes dessinées/marqueurs avec couche de basculement spécifique: Brochure

Question

Je travaille avec l'application Beta_Here qui utilise un dépliant plugins, toutes les bibliothèques sont locales, sauf pour quelques-uns (css liés)

Utilisation de l'application en direct

First View: Cette application obtenir l'entrée de l'utilisateur et régler la distance formule de calcul en conséquence ....

seconde vue: Après avoir entré l'entrée par exemple 9, deuxième vue sera chargé où nous ca n dessiner des formes ....

Présentation

J'ai installé le script qui charge deux imageoverlays (couches) et nous pouvons les passer du haut à droite et nous pouvons dessiner ou mesurer à partir bas à gauche ....

problème

lorsque nous dessiner des formes ou des marqueurs mis sur une image, les contrôles fonctionnent presque parfait, mais quand on bascule la couche s, il commence le problème .... toutes les formes vont à l'arrière-plan ou (il semble qu'ils ont disparu)

question principale

Comment peut-on lier les dessins et marqueurs à la couche spécifique (imageoverlay) s'il y a un moyen que nous pouvons voir le dessin sont pas lier avec les images, mais le conteneur de la carte ..... (Pardonnez-moi si vous sens que je fais quelque chose de stupide parce que j'ai des connaissances limitées sur les couches de sorte Je suis venu avec ma question ici ....

Si quelqu'un a idée sur la façon de résoudre ce problème, s'il vous plaît faire de l'aide ou toute référence sera apprécié ... Merci pour votre temps

travail Script

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, 
        mainurl = 'assets/img/isbimg.jpg'; 
       childurl = '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 
       L.control.layers({ 
        Main: L.imageOverlay(mainurl, bounds), 
        Child: L.imageOverlay(childurl, bounds) 
       }, null, { collapsed: false }).addTo(map); 

       L.control.nanomeasure({ nanometersPerPixel: 10000 }).addTo(map); 

       // tell leaflet that the map is exactly as big as the image 
       map.setMaxBounds(bounds); 

       L.tileLayer({ 
        attribution: '<a href="http://smartminds.co">SmartMinds</a>', 
        maxZoom: 18 
       }).addTo(map); 

       //polygon area customization 
       function showPolygonAreaEdited(e) { 
        e.layers.eachLayer(function (layer) { 
         showPolygonArea({ layer: layer }); 
        }); 
       } 
       function showPolygonArea(e) { 
        var userInputCustom = prompt("Please enter image name : choose between a to f"); 
        featureGroup.addLayer(e.layer); 
        e.layer.bindPopup("<div style='width:200px;height:200px;background-image: url(assets/img/" + userInputCustom + ".png);background-size: 195px 195px;;background-repeat: no-repeat;'></div>"); 
        e.layer.openPopup(); 
       } 

      }); 

Answer 1

Je contiendraient les FeatureGroup et ImageOverlay paires en L.LayerGroup. Ensuite, vous pouvez basculer entre ces groupes. Ensuite, vous pouvez suivre le groupe actuellement sélectionné et ajouter vos fonctionnalités au featurelayer de ce groupe.Je peux l'expliquer mieux avec le code dans les commentaires:

carte de base, rien de spécial:

var map = L.map('map', { 
    'center': [0, 0], 
    'zoom': 1, 
    'layers': [ 
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     'attribution': 'Map data © OpenStreetMap contributors' 
    }) 
    ] 
}); 

// Bounds for the map and imageoverlays  
var bounds = L.latLngBounds([[40.712216, -74.22655],[40.773941, -74.12544]]); 

// Set bounds on the map 
map.fitBounds(bounds); 

La partie de regroupement:

// New layergroup, note it's not added to the map yet 
var layerGroup = new L.LayerGroup(), 
    imageOverlayUrl = 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Overlay 1&w=294&h=238', 
    // New imageoverlay added to the layergroup 
    imageOverlay = new L.ImageOverlay(imageOverlayUrl, bounds).addTo(layerGroup), 
    // New featuregroup added to the layergroup 
    featureGroup = new L.FeatureGroup().addTo(layerGroup); 

// Second layergroup not added to the map yet 
var layerGroup2 = new L.LayerGroup(), 
    imageOverlayUrl2 = 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Overlay 2&w=294&h=238', 
    // New imageoverlay added to the second layergroup 
    imageOverlay2 = new L.imageOverlay(imageOverlayUrl2, bounds).addTo(layerGroup2), 
    // New featuregroup added to the second layergroup 
    featureGroup2 = new L.FeatureGroup().addTo(layerGroup2); 

Par défaut drawcontrol et layercontrol avec les deux layergroups ajouté que baselayers:

var layerControl = new L.control.layers({ 
    'Group 1': layerGroup, 
    'Group 2': layerGroup2 
}).addTo(map); 

var drawControl = new L.Control.Draw().addTo(map); 

Voici où la magie se produit;):

// Variable to hold the selected layergroup's featuregroup. 
var currentFeatureGroup; 

// Catch the layer change event 
map.on('baselayerchange', function (layersControlEvent) { 
    // Loop over the layers contained in the current group 
    layersControlEvent.layer.eachLayer(function (layer) { 
    // If it's the imageoverlay make sure it's in the background 
    if (layer instanceof L.ImageOverlay) { 
     layer.bringToBack(); 
    // If not then it's the featuregroup, reference with variable. 
    } else { 
     currentFeatureGroup = layer; 
    } 
    }); 
}); 

// Catch draw created event  
map.on('draw:created', function (e) { 
    // Store created feature into the current featuregroup 
    currentFeatureGroup.addLayer(e.layer); 
}); 

C'est tout. Assez basique, mais juste comme un exemple, mais il fait ce que vous voulez qu'il fasse. Une implémentation réelle aurait un aspect différent, avec errorhandling car par exemple quand vous dessinez et sans couche de base sélectionnée, elle échoue etc. Voici un exemple de travail sur Plunker pour jouer avec: http://plnkr.co/edit/6cGceX?p=preview