用户创建形状时禁用Leaflet绘制工具栏,并在删除形状时启用它

时间:2016-09-05 11:56:27

标签: javascript leaflet leaflet.draw

我想阻止用户在地图上创建多个形状。例如,如果用户创建多边形,则应禁用工具栏上的所有形状图标。当用户删除先前创建的形状时,应启用工具栏上的图标。

我该怎么做?我尝试删除draw:created事件上的工具栏并在draw:deleted事件上添加一个新工具栏,但它会导致错误(参见附件截图)。

Error screenshot

1 个答案:

答案 0 :(得分:3)

Leaflet使我们能够使用remove()addTo()方法删除和添加工具栏。

您需要做的是创建两个工具栏。一个是默认L.Control.Draw,另一个没有'draw'组件:

self.drawControlFull = new L.Control.Draw();

self.drawControlEdit = new L.Control.Draw({
  edit: {
    featureGroup: editableLayers,
    edit: false
  },
  draw: false
});

map.addControl(drawControlFull);

然后,您只需收听draw:createddraw:deleted个事件,然后根据需要添加/删除它们:

map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;

    self.drawControlFull.remove();
    self.drawControlEdit.addTo(map);

  editableLayers.addLayer(layer);
});

map.on('draw:deleted', function (e) {
    self.drawControlEdit.remove();
    self.drawControlFull.addTo(map);
});

此解决方案可能并未涵盖所有用例,但它只是一个示例。我还为此创建了一个jsFiddle,以便您了解它是如何工作的。