0

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

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

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

1 回答 1

0

每次单击地图时，您都会开始新的多边形编辑。您应该检查用户当前是否正在绘图。

要解决两次单击（而不是一次）的问题，您可以将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

于 2016-07-22T21:12:56.467 回答