React：传递 lonlat 数组时出现 FitBounts 问题 - react-mapbox-gl

Question

我正在尝试使用 fitBounds 以适当的缩放级别使我的所有标记可见。

getBounds(){
   return [[12.49637,41.90278],[12.319398,45.441906],[13.055054,47.809532],[16.373724,48.208244]]
}

<Map
   style="mapbox://styles/mapbox/streets-v9"
   containerStyle={{
     height: "100%",
     width: "100%"
   }}
   fitBounds={this.getBounds()}>
     <markers /> 
</Map>

我收到这个错误

Error: Invalid LngLat object: (12.49637,41.90278, 12.319398,45.441906)
 at new LngLat (bundle.js:118874)
 at Function.LngLat.convert (bundle.js:118874)
 at LngLatBounds.setSouthWest (bundle.js:118876)
 at new LngLatBounds (bundle.js:118876)
 at Function.LngLatBounds.convert (bundle.js:118876)
 at e.i.fitBounds (bundle.js:119021)
 at ReactMapboxGl.ReactMapboxFactory.ReactMapboxGl.componentDidMount (bundle.js:124648)
 at commons.js:19945
 at measureLifeCyclePerf (commons.js:19755)
 at commons.js:19944

我没有弄错。请帮我解决这个问题。

这里的反应组件正在使用alex3165/react-mapbox-gl

Answer 1

您将错误的边界格式传递给 fitBounds() 函数。

拟合边界期望作为参数：fitBounds : Array<Array<number>>

查看文档：https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md

在 mapbox 中，这称为 "LngLatBoundsLike Object"，请参见此处： https://www.mapbox.com/mapbox-gl-js/api/#lnglatlike

所以你的函数调用必须是这样的：

fitBounds([[12.49637,41.90278],[12.319398,45.441906]]);

第一个参数是西南角，第二个参数是所需边界框的东北角

Answer 2

传递给 fitBounds 的输入应采用 Array<Array<number>>

的形式

getMinOrMax(markersObj, minOrMax, latOrLng) {
 if(minOrMax == "max"){
  return _.maxBy(markersObj, function (value) {
      return value[latOrLng]
  })[latOrLng];
 }else{
  return _.minBy(markersObj, function (value) {
      return value[latOrLng]
  })[latOrLng];
 }
}

getBounds(markersObj) {
  var maxLat = this.getMinOrMax(markersObj, "max", "lat");
  var minLat = this.getMinOrMax(markersObj, "min", "lat");
  var maxLng = this.getMinOrMax(markersObj, "max", "lng");
  var minLng = this.getMinOrMax(markersObj, "min", "lng");

  var southWest = [minLng, minLat];
  var northEast = [maxLng, maxLat];
  return [southWest, northEast];
}

所以我使用上述方法从给定的标记位置对象数组中找出西南点和东北点。

标记样本对象应如下所示：

var markerPoints = [{lng:12.49637,lat:41.90278},{lng:12.319398,lat:45.441906},{lng:13.055054,lat:47.809532},{lng:16.373724,lat:48.208244}]

<Map
  style="mapbox://styles/mapbox/streets-v9"
  containerStyle={{
   height: "100%",
   width: "100%"
  }}
  fitBounds={this.getBounds(markerPoints)}>
  <markers /> 
</Map>

注意：我将 lodash 库用于示例中的 min 和 max 等实用函数。

谢谢，
乔桑

React：传递 lonlat 数组时出现 FitBounts 问题 - react-mapbox-gl

React: FitBounts issue when passing array of lonlat - react-mapbox-gl

javascript

mapbox

reactjs

mapbox-gl

mapbox-gl-js