反应传单测量/标尺插件

Question

我需要一个用于 React Leaflet 应用程序的标尺，但是，我能找到的只是列出的普通传单插件 https://leafletjs.com/plugins.html.

我试图将它们全部包含在我的应用程序中，但它们中的每一个都与当前版本的 React and/or Leaflet 存在不同的兼容性问题。这些插件中的大多数都缺乏适当的文档，并且许多插件是为以前版本的传单构建的。

是否有我可以使用的现代测量插件或工具？或者是否有一个有据可查的程序来使提到的插件适应 React-Leaflet 环境？

Answer 1

要继续评论中讨论的内容，您可以使用 leaflet-ruler plugin 但不使用 cdns，方法是在本地放置 js 和 css 文件。我尝试使用 cdns，但出现了一些错误，类似于我没有正确导入库时出现的错误。

因此转到 https://github.com/gokertanrisever/leaflet-ruler/tree/master/src 并将 .css 和 .js 文件复制粘贴到 React 项目中的两个单独的文件中（另请参阅提供的演示）。一旦你这样做，创建一个自定义的 react-leaflet 组件并导入库的 css 和 js 文件。

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import L from "leaflet";
import "./leaflet-ruler.css";
import "./leaflet-ruler";

export default function LeafletRuler() {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    L.control.ruler().addTo(map);
  }, [map]);

  return null;
}

完成后，您就可以像这样使用库了：

 <MapContainer center={position} zoom={13} style={{ height: "100vh" }}>
    ...
    <LeafletRuler />
 </MapContainer>

请注意，在沙盒插件中，按钮图像显示不正确，但在您的本地环境中应该没问题。

Demo

反应传单测量/标尺插件

react leaflet measurement / ruler plugin

measurement

react-leaflet