在React Leaflet中在Canvas rerender上拖动多个多边形 [英] Dragging multiple polygons on Canvas rerender in React Leaflet

问题描述

我正在使用反应传单来呈现传单地图和演示.

I am using React Leaflet to render Leaflet map and Leaflet.Path.Drag to drag multiple polygons together. Here is a demo.

我有很多多边形，并且想使用 preferCanvas拖动多个多边形选项.如果我尝试使用 preferCanvas 拖动多个多边形，则不起作用.拖动使Canvas上的重复多边形消失，并且在拖动过程中看不到多边形.

I have a lot of polygons and would like to drag multiple polygons with preferCanvas options. If I try to drag multiple polygons with preferCanvas, it doesn't work. Dragging makes duplicate polygons on Canvas and polygons are not visible during dragging.

codesandbox.io

推荐答案

所以我有点被骗了才能使它正常工作.我注意到，当您拖动形状时，除非您通过平移或缩放来重置地图视图，否则不会清除旧的多边形.因此，在拖动事件结束时，您只需将地图的视图设置为已经存在的视图，它将为您清除旧的形状:

So I sort of cheated to get this working. I noticed that when you drag your shapes, the old polygons don't clear, unless you reset the map view by panning or zooming. So at the end of your drag event, you can just set the view of the map to what it already is, and it will clear the old shapes for you:

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

这篇关于在React Leaflet中在Canvas rerender上拖动多个多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！