在 React Leaflet 中重新渲染 Canvas 上的多个多边形

Question

我使用 React Leaflet 渲染 Leaflet 地图，使用 Leaflet.Path.Drag 将多个多边形拖到一起。这是一个 demo。

我有很多多边形，想用 preferCanvas 选项拖动多个多边形。如果我尝试使用 preferCanvas 拖动多个多边形，它不起作用。拖动会使 Canvas 上出现重复的多边形，并且在拖动过程中多边形不可见。

codesandbox.io

Answer 1

所以我有点作弊才能让它工作。我注意到当你拖动你的形状时，旧的多边形不会清除，除非你通过平移或缩放来重置地图视图。因此，在拖动事件结束时，您只需将地图视图设置为原来的样子，它就会为您清除旧形状：

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

Working codesandbox