使用傳單在地圖上點擊繪製多邊形

Question

下面是我在地圖上繪製多邊形的代碼。使用這個我可以繪製多邊形，但點擊地圖時，它啓用繪圖處理程序，然後再次點擊我可以繪製多邊形。

預期輸出 - 第一次點擊在地圖上，我想在地圖上繪製第一個點。

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

您在開始一個新的多邊形編輯每次點擊在地圖上。你應該檢查用戶是否正在繪圖。

要使用兩次點擊（而不是一個），解決這個問題，你可以在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