React Leaflet：以编程方式更改道具的FlyToBounds

Question

react-leaflet map组件基于折线正确渲染。折线从屏幕中央完全开始居中。

[这是我的问题：我想以编程方式将地图重新​​定位到折线，因为界面像切换按钮一样占用了地图的空间。

没有反应，我知道该怎么做：

 map.invalidateSize();
 let bounds = L.latLngBounds(patharray);
 map.flyToBounds(bounds);

但是通过反应，我不知道如何访问这些方法。

我试图在组件中像这样：

ref={(ref) => this.mapRef = ref}

然后像这样使用ComponentWillReceiveProps（）中的引用：

componentWillReceiveProps() {
    const {flyToBounds} = this.props

    console.log(this.mapRef)

    if (flyToBounds) {
      this.mapRef.current.leafletElement.invalidateSize()
      this.mapRef.current.leafletElement.flyToBounds(this.bounds)
    }
 }

但是功能invalidateSize和flyToBounds不可用。所以，现在我被困住了。

Answer 1

我们在Map react-leaflet中可以使用bounds道具，它有助于根据所有提供的经纬度数组更新地图。

bounds：bounds（可选）：地图要包含的矩形。它将居中，地图将尽可能放大，同时仍显示完整范围。使用LatLngBounds的equals（）方法比较更改。

请查看链接https://react-leaflet.js.org/docs/en/components