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

Question

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

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

我已经在使用 React 的 Leaflet 版本，但它没有允许在地图上上传 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 以便能够对其进行测试。您必须先下载它们。

演示

Answer 2

react-leaflet-kml 是将 KML 与 React 和 leaflet 一起使用的另一种选择，链接中包含一个工作示例。

我可以确认它运行良好，但它缺乏文档或高级功能。