Редактирование/удаление слоев GeoJSON из FeatureGroup в Mapbox с использованием Leaflet

Question

Я использую 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 undefined». Это также не позволяет мне отменить редактирование.

Когда я пытаюсь удалить многоугольник, он больше не отображается на карте, но он все еще не удаляется из featureGroup.

Что я здесь делаю неправильно?

Редактировать: Способ, которым я сейчас это делаю, аналогичен тому, что предложил ghybs. Но проблема в том, что после завершения всех изменений полигоны сохраняются в базе данных (я конвертирую ее в WKT-строку для сохранения в SQLServer). И когда страница загружается в следующий раз, полигоны загружаются из базы данных, и пользователь может редактировать или удалять их и сохранять обратно в базу данных.

Как сейчас, когда пользователь делает редактирование и сохраняет его снова, он создает только дубликаты полигонов. и я не знаю, как подключить отредактированные полигоны к тем из базы данных.

Поэтому я подумал, могу ли я преобразовать их в GeoJSON и присвоить свойству идентификатора каждому слою (что-то вроде ID = 0, если это новый слой, и соответствующий polygonID из базы данных, если он загружен из базы данных) , Так что, когда они будут сохранены снова, я могу проверить этот идентификатор и на основе этого, я могу либо обновить доступный полигон, либо создать новый многоугольник в базе данных.

Есть ли лучший способ сделать это?

Answer 1

Не знаете, почему именно в addPolygon вы проходите через объект GeoJSON, который вы преобразовываете обратно в группу слоев листового материала через L.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. 
    }); 
} 

Что касается причины для вас ошибки, это связано с тем, что вы добавить (в формате GeoJSON) группы слоев к вашему featureGroup , который плагин Leaflet.draw не знает, как обращаться. Вы должны добавить только «негрупповые» слои.

Смотрите также: https://gis.stackexchange.com/questions/203540/how-to-edit-an-existing-layer-using-leaflet