ユーザーがシェイプを作成し、シェイプが削除されたときにリーフレット描画ツールバーを無効にする

Question

ユーザーがマップ上に複数のシェイプを作成しないようにしたいとします。たとえば、ユーザーがポリゴンを作成した場合は、ツールバーのすべてのシェイプアイコンを無効にする必要があります。ユーザーが以前に作成した図形を削除すると、ツールバーのアイコンが有効になります。

どうすればいいですか？私はdraw：createdイベントのツールバーを削除して、draw：deletedイベントに新しいツールバーを追加しようとしましたが、エラーにつながります（添付のスクリーンショットを参照）。

Answer 1

リーフレットはremove()とaddTo()方法でツールバーを削除して追加することが可能になります。

2つのツールバーを作成するだけです。一つは、デフォルトL.Control.Drawであり、もう一つは「描く」コンポーネントなしです：

self.drawControlFull = new L.Control.Draw(); 

self.drawControlEdit = new L.Control.Draw({ 
    edit: { 
    featureGroup: editableLayers, 
    edit: false 
    }, 
    draw: false 
}); 

map.addControl(drawControlFull); 

その後、必要に応じてそれらを削除/あなただけdraw:createdとdraw:deletedイベントに耳を傾け、あなたが追加します。

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

    self.drawControlFull.remove(); 
    self.drawControlEdit.addTo(map); 

    editableLayers.addLayer(layer); 
}); 

map.on('draw:deleted', function (e) { 
    self.drawControlEdit.remove(); 
    self.drawControlFull.addTo(map); 
}); 

このソリューションは、すべてのユースケースをカバーしているわけではありませんが、単なる例です。私はこのためにjsFiddleを作成しました。どのように動作するかを見ることができます。