Перетаскивание нескольких полигонов на холсте, повторная визуализация в React Leaflet

Я использую React Leaflet для визуализации карты Leaflet и Leaflet.Path.Drag, чтобы перетащить несколько полигонов вместе. Вот демонстрация.

У меня много полигонов, и я хочу перетащить несколько полигонов с помощью seekCanvas варианты. Если я попытаюсь перетащить несколько полигонов с помощью preferCanvas, это не сработает. При перетаскивании полигоны дублируются на холсте, а во время перетаскивания полигоны не видны.

codeandbox.io


canvas leaflet geojson react-leaflet html5-canvas
person Matt    schedule 02.03.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Так что я как бы обманул, чтобы заставить это работать. Я заметил, что когда вы перетаскиваете фигуры, старые многоугольники не очищаются, если только вы не сбросите вид карты путем панорамирования или масштабирования. Итак, в конце вашего события перетаскивания вы можете просто установить вид карты таким, какой он уже есть, и он очистит для вас старые формы:

layer.on("dragend", function (e) {
  setTransform({ matrix: layer.dragging._matrix, end: true });
  const map = layer._map;
  map.setView(map.getCenter());
});

Рабочие коды и ящик

person Seth Lutske    schedule 03.03.2021
comment
Спасибо! Это выглядит намного лучше, но есть проблема, когда полигоны не видны во время перетаскивания. - person Matt; 03.03.2021
comment
Это правда, но, насколько я могу судить, эта проблема присутствует даже без моей сдачи. Прямо сейчас вы применили handleFeature к каждой функции GeoJSON, вам также необходимо применить его к результирующей фигуре границ, содержащей первые две фигуры. Хотя это немного другое обсуждение. Кроме того, к вашему сведению, вы можете заменить большую часть своей логики на L.LatLngBounds extends, чтобы получить общие границы обоих. - person Seth Lutske; 03.03.2021
comment
Спасибо за подсказку с LatLngBounds. Что вы имеете в виду под словом handleFeature, которое нужно применить к полученной фигуре границ? Он уже имеет handleFeature, который устанавливает transform состояние. - person Matt; 03.03.2021