在 Canvas 上拖動多個多邊形在 React Leaflet 中重新渲染

Question

我正在使用React Leaflet來渲染 Leaflet map 和ZA093F3DF6E3335D95B893054一起拖動到多個多邊形0。 這是一個演示。

我有很多多邊形，想用preferCanvas選項拖動多個多邊形。 如果我嘗試使用preferCanvas拖動多個多邊形，它就不起作用。 拖動會在 Canvas 上生成重復的多邊形，並且在拖動過程中多邊形不可見。

代碼框.io

Answer 1

所以我有點欺騙讓這個工作。 我注意到，當您拖動形狀時，舊的多邊形不會清除，除非您通過平移或縮放重置 map 視圖。 因此，在您的拖動事件結束時，您只需將 map 的視圖設置為原來的樣子，它就會為您清除舊的形狀：

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

工作代碼框