So bearbeiten Sie ein Popup in Leaflet.draw

Question

Ich verwende Leaflet und Leaflet.draw, um eine Karte zu erstellen. Wenn ich ein Rechteck auf der Karte zeichne (als Benutzer), schreibt der folgende Code die LatLng-Grenzen des Rechtecks.

// add the newly drawn items to a layer 
    map.on('draw:created', function (e) { 
     var type = e.layerType, 
      layer = e.layer; 

     // binds things upon creation 
     if (type === 'rectangle') { 
      var bounds = layer.getBounds(); 
      layer.bindPopup(bounds.getNorthWest().toString() + "NW" + bounds.getSouthEast().toString() + "SE"); 
     } 

     drawnItems.addLayer(layer); 
    }); 

Ich möchte dies aktualisieren, wenn das Rechteck vom Benutzer bearbeitet wird. Ich denke, dass so etwas mit dem 'draw: edited' -Ereignis und '_popup.SetContent' aktualisiert werden sollte, aber das LatLng in dem wird nicht aktualisiert.

// update LatLng when edited 
    map.on('draw:edited', function (e) { 
     var type = e.layerType, 
      layer = e.layer; 

     // update popup 
     if (type === 'rectangle') { 
      var bounds = layer.getBounds(); 
      layer._popup.SetContent(bounds.getNorthWest().toString() + "NW" + bounds.getSouthEast().toString() + "SE"); 
     } 
    }); 

Hinzufügen, dass zweiter Codeblock bedeutet auch, dass ich nur das erste Rechteck jemals geschaffen bearbeiten kann. Es funktioniert also eindeutig nicht, aber ich weiß nicht warum.

Answer 1

Ich fand es heraus. Für das Ereignis draw:edited musste ich die Methode eachLayer verwenden, um jede Schicht in e.layers zu durchlaufen, und dann instanceof, um den Schichttyp zu überprüfen. Ich habe auch ein neues Popup gebunden, anstatt das alte Popup zu bearbeiten.

Hier ist der Code, der auch einen Zeilenumbruch im Popup, um es besser lesbar zu machen hat:

// update LatLng value 
    map.on('draw:edited', function (e) { 
     var layers = e.layers; 

     layers.eachLayer(function (layer) { 
      // do whatever you want to each layer, here update LatLng 
      if (layer instanceof L.Rectangle) { 
       var bounds = layer.getBounds(); 
       layer.bindPopup(bounds.getNorthWest().toString() + " NW<br>" + bounds.getSouthEast().toString() + " SE"); 
      } 
     }); 
    }); 

Dank this question about retrieving layer type on edit für mich in der richtigen Richtung.