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

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

1 个答案: