反应传单测量/标尺插件

问题描述

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

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

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

解决方法

要继续评论中讨论的内容，您可以通过将 js 和 css 文件放置在本地来使用 leaflet-ruler plugin 但不使用 cdns。我尝试使用 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

measurement react-leaflet