我應該如何遷移現有的 Leaflet 腳本以上傳 kml 文件以在 React-Leaflet 中運行

創建一個自定義組件，您將在安裝並將其與togeojson庫一起導入後加載傳單文件層庫。

因此安裝並導入兩個庫

import togeojson from 'togeojson'
import fileLayer from 'leaflet-filelayer'

調用fileLayer(null, L, togeojson)能夠使用L.Control.fileLayerLoad（源）

然後創建你在官方庫中看到的組件，並將邏輯放在 useEffect 下

...imports

fileLayer(null, L, togeojson);
...

export default function LeafletFileLayer() {
  const map = useMap();

  useEffect(() => {
    const control = L.Control.fileLayerLoad({
      fitBounds: true,
      layerOptions: {
        style: style,
        pointToLayer: function (data, latlng) {
          return L.circleMarker(latlng, { style: style });
        }
      }
    });
    control.addTo(map);
    control.loader.on("data:loaded", function (e) {
      var layer = e.layer;
      console.log(layer);
    });
  }, [map]);

  return null;
}

像這樣使用它

 <MapContainer ...>
    ...
    <LeafletFileLayer />
 </MapContainer>

我在沙箱上上傳了來自官方傳單站點的 geojson 和一個 kml 以便能夠對其進行測試。您必須先下載它們。

演示