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

Question

下面是我在 map.Using 上绘制多边形的代码，我可以绘制多边形，但是在单击地图时，它启用了绘制处理程序，第二次单击时我可以绘制多边形。

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

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

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

Draw polygon on click of map using leaflet

leaflet

mapbox

leaflet.draw