我应该如何迁移现有的 Leaflet 脚本以将 kml 文件上传到 React-Leaflet 中的 运行

Question

我想知道如何将下面的 javascript 代码（插件）迁移到 React 中的 运行。它允许在 html 中将 kml 文件上传到传单 运行ning 但在 React-Leaflet

中不起作用

https://www.npmjs.com/package/leaflet-filelayer

我已经在使用一个版本的 Leaflet for React，但它没有允许在地图上上传 kml 文件的对象...

感谢指导

Answer 1

创建一个自定义组件，您将在安装后加载传单文件图层库并将其与 togeojson 库一起导入。

因此安装并导入这两个库

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

调用fileLayer(null, L, togeojson)可以使用L.Control.fileLayerLoad(Source)

然后创建你在官方库中看到的组件并将逻辑放在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 以便能够对其进行测试。您必须先下载它们。

Demo