react-map-gl - 调用 fitBounds 后更新视口状态

Question

我使用 react-map-gl 创建了一个地图。每当我在地图上缩放或平移时，视口都会随着onViewStateChange道具调用设置新状态的 _updateViewPort 函数而更新。我遇到的问题是，当我使用 mapbox 函数放大到某个地方时，fitBoundsonViewStateChange 似乎没有触发，因此视口状态永远不会改变。结果，下次我在地图上平移或缩放时，它会将我带回到调用该fitBounds方法之前的位置。有没有人遇到过这种情况并有解决方案？

Answer 1

最终的工作是计算新的纬度、经度和缩放，我正在缩放到使用的新范围WebMercatorViewport，然后将其设置为新的视口状态。我使用FlyToInterpolatorreact-map-gl 提供的方法飞到那个位置。

const {longitude, latitude, zoom } = new WebMercatorViewport(this.state.viewport)
.fitBounds([[extent[0], extent[1]], [extent[2], extent[3]]], {padding: {top: 82, bottom: 30, left: leftPadding, right: 30}});
const viewport = {
  ...this.state.viewport,
  longitude,
  latitude,
  zoom,
  transitionDuration: 2000,
  transitionInterpolator: new FlyToInterpolator()
}
this.setState({viewport});