使用传单点击地图绘制多边形答案

【问题标题】：Draw polygon on click of map using leaflet使用传单点击地图绘制多边形
【发布时间】：2016-07-20 08:03:40
【问题描述】：

下面是我在地图上绘制多边形的代码。使用它我可以绘制多边形，但是在点击地图时，它会启用绘制处理程序，并且在第二次点击时我可以绘制多边形。

预期输出 - 在第一次单击地图上时，我想在地图上绘制第一个点。

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

【问题讨论】：

标签： leaflet mapbox leaflet.draw

【解决方案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

【讨论】：