react 传单测量/标尺插件

Question

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

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

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

Answer 1

要继续评论中讨论的内容，您可以使用 leaflet-ruler 插件，但无需 CDN，只需将 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>

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

演示

Answer 2

使用react-leaflet v4，这段代码对我有用。谢谢@kboul

import { useEffect } from 'react'
import { useMap } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet.measure' // from https://github.com/aprilandjan/leaflet.measure

const ShowMeasure = () => {
    var panelDiv = L.DomUtil.create('tiraLagAgua');
    if (L.Browser.chrome) {
        L.Browser.passiveEvents = true                                  
    }

    const map = useMap()
    useEffect(() => {
        if (!map) {
            console.log("Não encontrou o mapa", map)
            return
        }
            L.control.measure({                                              
            position: 'topright',
            lineColor: 'red',
            lineWeight: 4
        }).addTo(map)
    }, [map])
    return null
}

export default ShowMeasure

并称其为：

<ShowMeasure />

我使用的库：

"leaflet": "^1.9.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1"

Answer 3

这里是一个简单的react-leaflet标尺实现，可在这个GitHub存储库中找到：https://github.com/suwaloff/react-leaflet-ruler。

您可以将其适应您的项目，或者只需将“ruler”文件夹移动到您的项目。