如何在不使用 refs 和手动修改 DOM 的情况下使用 React 传单向地图添加图例？

Question

我正在使用 react-leaflet 并想在地图上添加图例。

我目前可以通过将地图的引用传递给自定义组件并呈现 null 来实现，同时让函数创建 HTML 并将其添加到地图。裁判是使用 Jest 和 Enzyme 进行测试的噩梦。

有没有办法使用 react-leaflet 组件来完成此操作？

Answer 1

您可以通过扩展 react-leaflet 的 MapControl class 并使用例如 Leaflet 官方页面教程为 Using GeoJSON with Leaflet 提供的图例代码来实现。

class Legend extends MapControl {
   componentDidMount() {
      // place your code here

      ...
      const legend = L.control({ position: "bottomright" });

      ...
      const { map } = this.props.leaflet;
      legend.addTo(map);
   }
}

然后在此处导入：

 <Map style={{ height: "100vh" }} center={position} zoom={13}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <Legend />
 </Map>

Demo

如何在不使用 refs 和手动修改 DOM 的情况下使用 React 传单向地图添加图例？

How to add a legend to the map using react leaflet, without using refs and manually modifying the DOM?

javascript

leaflet

reactjs

react-leaflet