调用 fitBounds 后更新视口状态

【问题标题】：Update viewport state after fitBounds is called调用 fitBounds 后更新视口状态
【发布时间】：2019-01-16 21:17:33
【问题描述】：

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

【问题讨论】：

标签： react-map-gl

【解决方案1】：

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

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});

【讨论】：

这是我能找到的最好的。在这里，您所说的“范围”实际上是具有[min, max, min, max] 值的“界限”。