ページを更新せずにリーフレット描画ツールで作成した以前のレイヤーをフラッシュするにはどうすればよいですか？

Question

トグルスタイルメニューリンクを使用してリーフレット描画ツールバーにアクセスしたいので、ユーザーは一度に1つの四角形を描くことができます（実際にはデータベースに挿入されます）。私がこれまで管理していたのは、ツールバーのトグル、矩形の描画、ツールバーからのトグル終了時です。これはユーザーが2回目のツールバーの切り替えを行うと、描かれた矩形の数増加する。なぜ私はうまくいかない。誰かが説明して解決策を提示できますか？ツールバーが有効になるたびに1つの矩形を生成する必要があります。

var map = L.map('map').setView([51.505, -0.09], 13); 
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    maxZoom: 18, 
}).addTo(map); 


var drawnItems = new L.FeatureGroup(); 
map.addLayer(drawnItems); 

var drawControl = new L.Control.Draw({ 
    position: 'topright', 
    draw: { 
      polyline: false, 
      circle: false, 
      marker: false, 
      polygon: false, 
      rect: { 
        shapeOptions: { 
          color: 'green' 
        }, 
      } 
    } 
}); 

var step1Enabled = 0; 
$('#step1').click(function(){ 
     if (step1Enabled){ 
      map.removeControl(drawControl); 
      drawnItems.clearLayers(); 
      step1Enabled = 0; 
     }else{ 
      step1Enabled = 1; 
      map.addControl(drawControl); 
      map.on('draw:created', function (e) { 
        var type = e.layerType, 
          layer = e.layer; 
        layer.addTo(map); 
        if (type === 'rectangle') { 
         console.log(type, ' drawn'); 
        } 
      }); 
     } 
}); 

Answer 1

あなたが描かれた層をclearする必要があります。

  // event handler 
     function drawCreated(e) { 
      var type = e.layerType, 
      layer = e.layer; 
      layer.addTo(drawnItems); 
      console.log(type, ' drawn', layer); 
      } 

      var step1Enabled = 0; 
      $('#step1').click(function(){ 
       if (step1Enabled){ 
        // remove event handler 
        map.off('draw:created', drawCreated); 
        map.removeControl(drawControl); 
        drawnItems.clearLayers(); 
        step1Enabled = 0; 
       }else{ 
        step1Enabled = 1; 
        map.addControl(drawControl); 
        // add event handler 
        map.on('draw:created', drawCreated); 
       } 
      });