Editing/Removing 使用 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，如果它是数据库中相应的 polygonID从数据库加载）。这样当它们再次保存时，我可以检查这个 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插件不知道如何处理。您只能添加 "non group" 层。

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

Editing/Removing 使用 Leaflet 从 Mapbox 中的 featureGroup 获取 GeoJSON 图层

Editing/Removing GeoJSON layers from a featureGroup in Mapbox using Leaflet

geojson

leaflet

mapbox