リーフレットを使用して地図をクリックするとポリゴンを描画します

Question

以下は私のコードです。これを使用してポリゴンを描くことができますが、地図のクリックでドローハンドラを有効にし、2回目のクリックでポリゴン。

予想される出力 - 最初のクリック時マップ上の最初の点を描画したい。

map = new L.Map('map', {layers: [osm], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 }); 

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

    var shapeOptions = { 
      color: '#0066FF', 
      fillColor: '#0066FF', 
      // clickable: false 
      weight: 10 
    }; 
    var opt = { 
    position: 'topright', 
    draw: { 
     polygon: { 
      allowIntersection: false, 
      drawError: { 
       color: '#FF0000', 
       message: '' 
      }, 
      repeatMode: true, 
      shapeOptions: shapeOptions 
     } 
    }, 
    edit: { 
     featureGroup: drawnItems, //REQUIRED!! 
     remove: false 
    } 
}; 

map.on('click', function(e) { 
    new L.Draw.Polygon(map).enable(); 
}); 

Answer 1

あなたがマップ上のすべてのクリックに新しいポリゴン編集を始めています。ユーザーが現在描画しているかどうかを確認する必要があります。

2つのクリックで問題を解決するには、onclickイベントのlatlngプロパティをL.Draw.Polygon(map).addVertex(latlng)に渡して、最初のクリックで最初のポリゴン頂点を描画します。

var editing = false; 
map.on('click', function(e) { 
    if(!editing){ // do not start multiple "edit sessions" 
    editing = true; 
    var polyEdit = new L.Draw.Polygon(map); 
    polyEdit.enable(); 
    polyEdit.addVertex(e.latlng); 
    } 
}); 

map.on('draw:created', function (e) { 
    editing = false; 
    var type = e.layerType, 
     layer = e.layer; 
    drawnItems.addLayer(layer); 
}) 

ここでデモです：https://plnkr.co/edit/NCXOfUF1NAh66Wq1gWJO?p=preview