Zeichnen Polygon auf Klick der Karte mit Prospekt

Question

Unten ist mein Code, um Polygon auf Karte zu zeichnen.Mit diesem kann ich zeichnen Polygon aber auf Klick der Karte, es ermöglicht Zeichnungshandler und auf den zweiten Klick kann ich Polygon zeichnen .

Erwartete Ausgabe - Auf den ersten Klick auf Karte Ich möchte den ersten Punkt auf der Karte zeichnen.

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

Sie starten ein neues Polygon bearbeiten auf jeden Klick auf Ihre Karte. Sie sollten überprüfen, ob der Benutzer gerade zeichnet oder nicht.

Um das Problem mit den zwei Klicks (anstelle von einem) zu beheben, können Sie die onclick -Ereignis latlng-Eigenschaft an L.Draw.Polygon(map).addVertex(latlng) übergeben, um den ersten Polygon-Scheitelpunkt beim ersten Klick zu zeichnen.

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

Hier ist eine Demo: https://plnkr.co/edit/NCXOfUF1NAh66Wq1gWJO?p=preview