Question

我使用Mapbox和Leaflet绘制，编辑和删除多边形等。每次创建一个新的多边形时，我将它们转换为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);
}

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

当我尝试编辑多边形时，它告诉我＆＃34; TypeError：i.Editing未定义＆＃34;。它也不允许我取消编辑。

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

我在这里做错了什么？

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

就像现在一样，当用户进行编辑并再次保存时，它只会创建重复的多边形。并且我不知道如何将编辑过的多边形连接到数据库中的多边形。

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

有更好的方法吗？

Answer 1

在addPolygon中确切地知道为什么要通过L.geoJson转换回Leaflet图层组的GeoJSON对象？

您可以直接添加已创建的图层，如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

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

1 个答案: