反应传单测量/标尺插件答案

【问题标题】：react leaflet measurement / ruler plugin反应传单测量/标尺插件
【发布时间】：2021-05-28 23:04:11
【问题描述】：

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

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

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

【问题讨论】：

你想用哪一个？
@kboul 我没有特别的偏好。但是让我们这样说：makinacorpus.github.io/Leaflet.MeasureControl
Leaflet 1.0 及更高版本不支持此库source
是的，这就是我要说的。所有这些库都有一个或另一个问题。如果您有任何建议，我们将不胜感激。
@kboul 它就像一个魅力！感谢您花时间整理所有这些内容。

标签： react-leaflet measurement

【解决方案1】：

要继续在 cmets 中讨论的内容，您可以使用 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

【讨论】：