如何将插件导入传单React应用程序

Question

我试图导入传单插件到一个反应应用程序，我也有Leaflet.js。我增加了传单和插件脚本标签和链接到head标签--但我不知道如何调用或使用插件-- react页面/组件。

请注意，我没有使用react传单--尽管如果我可以很容易地使用它导入插件，我很乐意考虑。

<script src="%PUBLIC_URL%/leaflet/leaflet.js"></script>
<script src="%PUBLIC_URL%/pan.js"></script>

github插件可以在这里找到：(我刚刚提取了js文件，重命名为pan.js并放入head标记)，我可以看到它成功地使用我的网络开发工具中的Get 200导入。

https://github.com/kartena/Leaflet.Pancontrol/

When called in script `L.control.pan()` does not work in React.

我希望使用一些插件我看到了几个具体的答案，但对于必须集成并使用这些插件的一般方法来说，这是一个损失。

理想情况下，不需要完全重写插件。

Answer 1

您需要使用npm或纱线安装插件，并导入它们的相关文件(js或css)。

在本例中，要安装Leaflet.Pancontrol，首先要安装插件：

npm i leaflet.pancontrol 

但是如果你检查官方页面，这个插件也需要安装和使用leaflet-tilejson。它没有提到这一点，但是您可以在它导入leaflet-tilejson和proj4leaflet的文件夹示例中看到它，所以也可以安装它们：

npm i leaflet-tilejson
npm i proj4leaflet

安装这些插件之后，您需要像导入es6模块一样导入它们。如果它们也像es6模块一样导出，则可以直接导入它们，但在这种情况下，您需要导入整个对象和css文件。

import * as TileJSON from "leaflet-tilejson";
import "leaflet.pancontrol/src/L.Control.Pan.css";
import * as PanControl from "leaflet.pancontrol/src/L.Control.Pan.js"

然后，您可以这样使用它们，而不是调用L.plugin：

useEffect(() => {
    const map = TileJSON.createMap("map", osmTileJSON, {
      mapConfig: { zoomControl: false }
    });

    new PanControl.default().addTo(map); // instead of  L.control.pan().addTo(map);
    new PanControl.Zoom().addTo(map); // instead of         L.control.zoom().addTo(map);

  }, []);

演示

得到与这个香草js演示相同的结果