如何获取 mapboxgl.GeoJSONSource 对象的边界框？

我正在设置一个 Mapbox GL JS 地图，如下所示：

mapboxgl.accessToken = 'pk.my_token';
var cityBoundaries   = new mapboxgl.GeoJSONSource({ data: 'http://domain.com/city_name.geojson' } );
var map              = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v8',
  center: [cityLongitude,cityLatitude],
  zoom: 13
});

然后我将 GeoJSON 数据加载到地图上，如下所示：

map.on('style.load', function(){
  map.addSource('city', cityBoundaries);
  map.addLayer({
    'id': 'city',
    'type': 'line',
    'source': 'city',
    'paint': {
      'line-color': 'blue',
      'line-width': 3
    }
  });
});

此时，我有一个以我在中指定的位置为中心的地图new mapboxgl.Map，缩放级别为 13。因此，地图上仅可见一部分 GeoJSON 数据。我想重新居中并重新缩放地图，以便整个 GeoJSON 数据可见。

在 Mapbox JS 中，我将通过将 GeoJSON 数据加载到featureLayer然后将地图拟合到其边界：

map.fitBounds(featureLayer.getBounds());

The fitBounds 文档 https://www.mapbox.com/mapbox-gl-js/api/#Map.fitBounds对于 Mapbox GL JS 表示它想要以下格式的边界[[minLng, minLat], [maxLng, maxLat]].

有没有办法确定此 GeoJSON 层的混合/最大纬度和经度值？

基于“获取边界框”部分这个帖子 http://mikefowler.me/2014/06/10/drawing-geojson-in-a-canvas/，我已经想出了这个过程......

map.on('style.load', function(){
  $.getJSON('http://citystrides.dev/city_name.geojson', function(response){
    var boundingBox = getBoundingBox(response);
    var cityBoundary = new mapboxgl.GeoJSONSource({ data: response } );

    map.addSource('city', cityBoundary);
    map.addLayer({
      'id': 'city',
      'type': 'line',
      'source': 'city',
      'paint': {
        'line-color': 'blue',
        'line-width': 3
      }
    });
    map.fitBounds([[boundingBox.xMin, boundingBox.yMin], [boundingBox.xMax, boundingBox.yMax]]);
  })
});

function getBoundingBox(data) {
  var bounds = {}, coords, point, latitude, longitude;

  for (var i = 0; i < data.features.length; i++) {
    coords = data.features[i].geometry.coordinates;

    for (var j = 0; j < coords.length; j++) {
      longitude = coords[j][0];
      latitude = coords[j][1];
      bounds.xMin = bounds.xMin < longitude ? bounds.xMin : longitude;
      bounds.xMax = bounds.xMax > longitude ? bounds.xMax : longitude;
      bounds.yMin = bounds.yMin < latitude ? bounds.yMin : latitude;
      bounds.yMax = bounds.yMax > latitude ? bounds.yMax : latitude;
    }
  }

  return bounds;
}

以下是代码功能的演练，供需要详细解释的任何人使用：

• map.on('style.load', function(){
  • 当地图加载时，让我们在这个函数中做一些事情。
• $.getJSON('http://citystrides.dev/city_name.geojson', function(response){
  • 获取城市的 GeoJSON 数据。这是一个异步调用，因此我们必须将使用此数据的所有代码（response）在此函数内。
• var boundingBox = getBoundingBox(response);
  • 获取此 GeoJSON 数据的边界框。这是调用, function(){出现在“样式加载映射”块之后。
• var cityBoundary = new mapboxgl.GeoJSONSource({ data: response } );
  • 构建 Mapbox 的 GeoJSON 数据。
• map.addSource('city', cityBoundary);
  • 将源添加到 Mapbox。
• map.addLayer({
  • 将图层添加到 Mapbox。
• map.fitBounds([[boundingBox.xMin, boundingBox.yMin], [boundingBox.xMax, boundingBox.yMax]]);
  • 调整地图以将 GeoJSON 数据固定在视图中。
• function getBoundingBox(data) {
  • 此函数迭代返回的 GeoJSON 数据，查找最小和最大纬度和经度值。

中需要注意的一件事getBoundingBox函数是这一行：

coords = data.features[i].geometry.coordinates;

在上面链接的原始帖子中，这一行写为coords = data.features[i].geometry.coordinates[0];因为它们的坐标列表数据是数组的数组。我的数据不是这样格式化的，所以我不得不放弃[0]。如果你尝试这段代码并且它崩溃了，这可能就是原因。