Question

我们有一个与 Leaflet 和 react-leaflet 一起使用的项目，我们也使用了称为 Leaflet.PolylineMeasure 的出色工具测量距离。主应用程序基于 babel 和旧时尚的 React Classes ，并且运行良好！最近，我们开始使用 TypeScript 和带有 hook 的功能组件来开发项目的新部分。在使用标尺功能时，我发现 Leaflet.PolylineMeasure在新环境中不起作用！根据插件的描述，添加所需的库后，应该会出现新的Measurer函数L.control.polylineMeasure(options)。但事实并非如此！在没有TypeScript的主应用程序中，使用钩子以及具有相同版本的Leaflet和Leaflet.PolylineMeasure的钩子，一切仍然正常！我试图将地图组件重写为 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>
  );
};

您需要包括以下库，以免出现打字错误：

@ types /传单
@ types / react
@ types / react-dom
@ types / react-leaflet

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

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

1 个答案: