Leaflet.Draw edit and delete button not working

Question

I'm using Leaflet Draw to let users draw a polyline in a map in order to measure sections. First step is to use Leaflet.Draw to let users draw the line. Leaflet.Draw includes a delete and edit button. These buttons are, however not working.

I've (re)used working code from other projects to create the draw control and pass it a FeatureGroup and editable layers.

// My draw Toolbar
var drawnItems = new L.FeatureGroup()
map.addLayer(drawnItems)
var drawControl = new L.Control.Draw({
  draw:{polygon: false,
        marker: false,
        circlemarker: false,
        rectangle: false,
        circle: false,
    },
  edit: {
    featureGroup: drawnItems
  }
});

map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (e) {
   var layer = e.layer;
   map.addLayer(layer);
});

Seems like I'm linking the feature group correctly, but for some reason the delete and edit are not working :(

Answer 1

您正在添加绘制的项目，map但如果您想编辑它们，则应将它们添加到 指向的图层edit.featureGroup，即drawnItems：

map.on(L.Draw.Event.CREATED, function (e) {
    var layer = e.layer;
    drawnItems.addLayer(layer);
});

这是一个演示https://jsfiddle.net/4g5u071r/