Мое приложение позволяет пользователям рисовать полилинии и полигоны с помощью плагина Leaflet.draw и сохраняет геометрию в виде файлов .json на сервере. После загрузки фигур с сервера пользователи должны иметь возможность их редактировать. Любые изменения должны автоматически сохраняться на сервере после перезагрузки сеанса.
Я использовал событие map.on ('draw: editvertex'), чтобы обновить геометрию фигур в их объектах json. Затем они сохраняются в хранилище сеансов и отправляются на сервер.
map.on('draw:editvertex', function (e)
{
let newLatLng = [];
let layers = e.layers._layers;
for (let i in layers)
{
let lat = layers[i]._latlng.lat;
let lng = layers[i]._latlng.lng;
newLatLng.push([lng, lat]);
}
jsonObj.Project.Result[key].Layers[e.poly.id].
features[0].geometry.coordinates = newLatLng;
sessionStorage.jsonObj = JSON.stringify(jsonObj);
}
Когда пользователи перезагружают веб-страницу, сделанные изменения становятся видимыми. Однако геометрия, представленная из координат, выглядит совершенно иначе, чем моды. Например, многоугольник с измененной геометрией будет перерисован как многоугольник с отверстиями. Модифицированная ломаная линия выглядела бы как линии, нарисованные повсюду в случайных местах.
Я посмотрел на геойсон и заметил, что геометрия имеет больше координатных точек после изменений. Я мог видеть, что это происходит и во время редактирования, когда перетаскивание вершины будет генерировать дополнительные вершины по краям.
Я подозреваю, что сгенерированные дополнительные вершины являются причиной того, что перерисованные геометрии неверны. Как мне отредактировать фигуру с помощью Leaflet.draw, чтобы не было новых вершин?