如何将插件导入 Leaflet React App

Question

我正在尝试将传单插件导入 React 应用程序，我也有 Leaflet.js。我已经添加了传单和插件脚本标签以及指向 head 标签的链接——但我不确定如何调用或使用反应页面/组件的插件。

请注意，我没有使用 react-leaflet --- 尽管如果我可以使用它轻松导入插件，我会很乐意考虑。

<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 或 yarn 安装插件并导入它们的相关文件（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);

  }, []);

Demo

你得到的结果与 vanilla js demo

相同

如何将插件导入 Leaflet React App

How do I Import Plugins into Leaflet React App

reactjs

leaflet