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

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

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

Error screenshot

最佳答案
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);

然后你只是听画:创建和绘制:删除的事件,你根据需要添加/删除它们:

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,这样你就可以看到它是如何工作的.

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...