Leaflet Draw verliert Formen nach dem Zeichnen

Question

Ich verwende leaflet, um eine Karte und die leaflet-draw plugin zu zeigen, um Formen auf dieser Karte zu zeichnen.

Ich habe den Code unten (see plunker), der Formen zu zeichnen erlaubt. Aber sobald die Form beendet ist, verschwindet sie.

Was fehlt, um die Formen nach dem Zeichnen auf der Karte sichtbar zu machen?

var mymap = L.map('mapid').setView([47.2090048, 7.7746663], 15); 

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZXJuc3RwIiwiYSI6ImNpcGdtMTUzOTAwMGV2Ymt3Z2JlYnMyejgifQ.gHxSIfBUM0-UiuWurWoEvQ', { 
     maxZoom: 18, 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
     '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
     'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
     id: 'mapbox.streets' 
    }).addTo(mymap); 

    var marker = L.marker([47.2090048, 7.7747663]).addTo(mymap); 

    // Initialise the FeatureGroup to store editable layers 
    var drawnItems = new L.FeatureGroup(); 
    mymap.addLayer(drawnItems); 

    // Initialise the draw control and pass it the FeatureGroup of editable layers 
    var drawControl = new L.Control.Draw({ 
     edit: { 
     featureGroup: drawnItems 
     } 
    }); 
    mymap.addControl(drawControl); 

Answer 1

Sie müssen für die draw:created event und fügen Sie die Schicht auf die L.FeatureGroup im Falle Zuhörer hören:

map.on('draw:created', function (e) { 
    var type = e.layerType, 
     layer = e.layer; 

    if (type === 'marker') { 
     // Do marker specific actions 
    } 

    // Do whatever else you need to. (save to db, add to map etc) 
    drawnItems.addLayer(layer); 
}); 

Answer 2

Sie erfolgreich die Formen gezeichnet haben, aber hier, was fehlt, ist man nicht zeige die gezeichnete Form oben auf deiner Kartenebene an, obwohl du versucht hast, sie anzuzeigen.

Was Sie tun müssen, ist nur die gezeichnete Ebene oben auf Ihrer Karte hinzuzufügen.

z.

mymap.on('draw:created', function (e) { 
    var type = e.layerType, 
     layer = e.layer; 

    if (type === 'marker') { 
     // Do marker specific actions 
    } 

    // Do whatever else you need to. (save to db, add to map etc) 
    mymap.addLayer(layer); 
}); 

Sie können diesen Code am Ende Ihrer js hinzuzufügen. Dies ist aus der docs

entnommen