Блог

Главная - Вопросы по программированию - Перетаскивание нескольких полигонов на Canvas rerender в листовке React

Перетаскивание нескольких полигонов на Canvas rerender в листовке React

#canvas #leaflet #html5-canvas #geojson #react-leaflet

#холст #листовка #html5-холст #geojson #реакция-листовка

Вопрос:

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

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

codesandbox.io

Ответ №1:

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

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

Рабочий codesandbox

Комментарии:

1. Спасибо! Это выглядит намного лучше, но есть проблема, из-за которой полигоны не видны при перетаскивании.

2. Это правда, но, насколько я могу судить, эта проблема существует даже без моего изменения. Прямо сейчас вы handleFeature применили его к каждому объекту GeoJSON, вам также необходимо применить его к результирующей форме границ, которая содержит первые две фигуры. Однако это немного другое обсуждение. Кроме того, к вашему сведению, вы можете заменить большую часть своей логики методом L.LatLngBounds extends , чтобы получить общие границы обоих.

3. Спасибо за совет LatLngBounds . Что вы подразумеваете под handleFeature необходимостью применения к результирующей форме границ? У него уже есть handleFeature какое установленное transform состояние.