使用 Leaflet 从 Mapbox 中的 featureGroup 编辑/删除 GeoJSON 图层

Question

我正在使用带有 Leaflet 的 Mapbox 来绘制、编辑和删除多边形等。每次创建新多边形时，我都会将它们转换为 GeoJSON 图层，然后将其添加到我创建的 featureGroup 中，因为我想关联每个层都有一个我可以稍后使用的 ID 属性。这就是我所拥有的：

var featureGroup = L.featureGroup().addTo(map);

var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: featureGroup
    },
    draw: {
        polygon: {
            allowIntersection: false
        },
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false
    }
}).addTo(map);

map.on('draw:created', addPolygon);
map.on('draw:edited', editPolygon);
map.on('draw:deleted', deletePolygon);

function deletePolygon(e) {
    featureGroup.removeLayer(e.layer);
}

function editPolygon(e) {
    featureGroup.eachLayer(function (layer) {
        layer.eachLayer(function (layer) {
            addPolygon({ layer: layer });
        });
    });
}

function addPolygon(e) {
    var geojsonstring = e.layer.toGeoJSON();
    var geojson = L.geoJson(geojsonstring);
    featureGroup.addLayer(geojson);
}

当我这样做时，创建多边形不是问题。但是当我尝试编辑或删除多边形时，它无法正常工作。

当我尝试编辑多边形时，它告诉我“TypeError: i.Editing is undefined”。它也不允许我取消编辑。

当我尝试删除多边形时，它不再显示在地图中，但仍未从要素组中删除。

我在这里做错了什么？

编辑：我目前这样做的方式与 ghybs 建议的方式相同。但问题是，一旦完成所有编辑，多边形就会保存到数据库中（我将其转换为 WKT 字符串以保存在 SQLServer 中）。并且下次加载页面时，多边形会从数据库中加载回来，用户可以对其进行编辑或删除，并将其保存回数据库中。

就像现在一样，当用户进行编辑并再次保存它们时，它只会创建重复的多边形。而且我不知道有什么方法可以将已编辑的多边形连接到数据库中的多边形。

所以我想我是否可以将它们转换为 GeoJSON 并为每个图层分配一个 ID 属性（如果它是一个新图层，则类似于 ID=0，如果它是从数据库加载的，则来自数据库的相应多边形ID）。这样当它们再次保存时，我可以检查此 ID，并基于此，我可以更新可用的多边形，或在数据库中创建一个新的多边形。

有没有更好的方法来做到这一点？

Answer 1

不知道为什么在addPolygon 中你会通过一个GeoJSON 对象，然后你会通过L.geoJson 将它转换回一个Leaflet 层组？

您可以直接添加创建的层，如Leaflet.draw "draw:created" example：

function addPolygon(e) {
  var layer = e.layer;
  var feature = layer.feature = layer.feature || {}; // Initialize layer.feature
  // use the feature.id: http://geojson.org/geojson-spec.html#feature-objects
  feature.id = 0; // you can change it with your DB id once created.
  featureGroup.addLayer(layer);

  // record into DB, assuming it returns a Promise / Deferred.
  recordToDb(layer.toGeoJSON()).done(function (result) {
    feature.id = result.id; // Update the layer id.
  });
}

至于您出错的原因，是因为您在featureGroup 中添加了一个（GeoJSON）图层组，Leaflet.draw 插件不知道如何处理。您必须只添加“非组”层。

另见：https://gis.stackexchange.com/questions/203540/how-to-edit-an-existing-layer-using-leaflet