javascript - Leaflet.PolylineMeasure 在新环境中不起作用

Question

我们有一个与 Leaflet 和 react-leaflet 一起工作的项目，我们还使用了一个名为 Leaflet.PolylineMeasure 的工具来进行测量距离。主要应用程序基于 babel 和老式的 React Classes 并且运行完美!最近，我们开始使用 TypeScript 和带有 hooks 的功能组件开发项目的新部分。在使用标尺功能时，我发现Leaflet.PolylineMeasure 在新环境中不起作用!根据添加所需库后插件的描述，新的 Measurer 函数 L.control.polylineMeasure(options) 应该会出现。但事实并非如此!在没有 TypeScript、hooks 的主应用程序中，使用相同包版本的 Leaflet 和 Leaflet.PolylineMeasure 一切仍然正常!我尝试将 map 组件重写为 React Class 组件，还尝试添加类型，但没有帮助。

知道问题的根源是什么吗？

Answer 1

我不确定错误是什么，因为您没有提供任何代码，但是这里是使用 react typescript，react-leaflet 的样子。您可以像这样扩展 MapControl 来实现 Leaflet.PolylineMeasure:

class PolylineMeasure extends MapControl {
  createLeafletElement() {
    return (L.control as any).polylineMeasure({
      position: "topleft",
      unit: "metres",
      showBearings: true,
      clearMeasurementsOnStop: false,
      showClearControl: true,
      showUnitControl: true
    });
  }

  componentDidMount() {
    const { map } = this.props.leaflet;
    const polylineMeasure = this.leafletElement;
    polylineMeasure.addTo(map);
  }
} 

然后在 Map 组件中使用它:

const Leaflet = () => {
  return (
    <Map
      style={{ height: "100vh" }}
      center={[48, 0]}
      zoom={4}
      minZoom={3}
      maxZoom={18}
    >
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?"
      />
      <PolylineMeasure />
    </Map>
  );
};

为了不出现 typescript 错误，您需要包含以下库:

1. @types/传单
2. @types/ react
3. @types/react-dom
4. @types/react-leaflet

有关更多详细信息，请查看此 demo