Leaflet.draw에서 팝업을 편집하는 방법

Question

나는 Leaflet 및 Leaflet.draw를 사용하여지도를 만듭니다. 지도 상에 (사용자로서) 사각형을 그릴 때, 다음 코드는 직사각형의 LatLng 경계를 작성합니다.

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

사용자가 사각형을 편집 할 때이를 업데이트하고 싶습니다. 이 무언가는 'draw : edited'이벤트와 '_popup.SetContent'를 사용하여 업데이트해야한다고 생각하지만 LatLng는 업데이트되지 않습니다.

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

두 번째 코드 블록을 추가하면 내가 만든 첫 번째 사각형 만 편집 할 수 있습니다. 그래서 명확하게 작동하지 않지만, 나는 왜 그런지 모릅니다.

Answer 1

알아 냈습니다. draw:edited 이벤트의 경우 메서드를 사용하여 e.layers의 각 레이어를 반복하고 레이어 유형을 확인하려면 instanceof을 사용해야했습니다. 이전 팝업을 편집하는 대신 새 팝업을 바인딩했습니다. 올바른 방향으로 날을 가리키는위한 this question about retrieving layer type on edit에

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

감사 :

여기에 또한 더 읽기 쉽게 할 수있는 팝업에서 줄 바꿈이있는 코드입니다.