admin管理员组

文章数量:1388046

I would like to prevent a user from creating more than one shape on the map. For example if the user creates a polygon, then all shape icons on the toolbar should be disabled. When the user deletes the previously created shape, then icons on the toolbar should get enabled.

How can I do this? I tried removing the toolbar on the draw:created event and adding a new toolbar on draw:deleted event but it lead to errors (see attached screenshot).

I would like to prevent a user from creating more than one shape on the map. For example if the user creates a polygon, then all shape icons on the toolbar should be disabled. When the user deletes the previously created shape, then icons on the toolbar should get enabled.

How can I do this? I tried removing the toolbar on the draw:created event and adding a new toolbar on draw:deleted event but it lead to errors (see attached screenshot).

  • javascript
  • leaflet
  • leaflet.draw
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Sep 5, 2016 at 11:56 codejunkiecodejunkie 9682 gold badges21 silver badges34 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

Leaflet enables us to remove and add the toolbars with remove() and addTo() methods.

What you need to do is to create two toolbars. One is a default L.Control.Draw and the other one is without the 'draw' ponent:

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

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

map.addControl(drawControlFull);

Then you just listen to the draw:created and draw:deleted events and you add/remove them as needed:

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

This solution maybe doesn't cover all the use cases but it's just an example. I have also created a jsFiddle for this so you can see how it works.

本文标签：

版权声明：本文标题：javascript - Disable Leaflet draw toolbar when user creates a shape and enable it when the shape is deleted - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744485838a2608443.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。