javascript - 当用户创建形状时禁用 Leaflet 绘图工具栏，并在删除形状时启用它

Question

我想阻止用户在 map 上创建多个形状。例如，如果用户创建了一个多边形，那么工具栏上的所有形状图标都应该被禁用。当用户删除之前创建的形状时，工具栏上的图标应该被启用。

我该怎么做？我尝试在 draw:created 事件上删除工具栏并在 draw:deleted 事件上添加一个新工具栏，但这会导致错误(请参阅随附的屏幕截图)。

Answer 1

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:created 和 draw: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为此，您可以了解它是如何工作的。