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

Question

我想知道如何迁移下面的javascript代码(插件(以在React中运行。它允许上传kml文件到运行在html中的传单，但不能在React传单中工作

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

我已经在使用React的传单版本，但它没有允许在地图上上传kml文件的对象。。。

感谢的指导

Answer 1

创建一个自定义组件，在安装并导入传单文件层库以及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来测试它。你必须先下载它们。

演示