如何获取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
});

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

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

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

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

for Mapbox GL JS表示它希望边界的格式为

[[minLng，minLat]，[maxLng，maxLat]]

---

有没有办法确定此GeoJSON层的mix/max latitude&longitude值？

基于的“获取边界框”部分，我提出了以下过程

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

---

在上面链接的原始帖子中，这一行写为

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

。如果您尝试这段代码&它崩溃了，这可能就是原因。

我使用的是turf扩展库，它由Mapbox bunch维护。是节点模块链接。 在代码中，您只需导入（ES6）或要求：

ES6/Webpack: import extent from 'turf-extent';
Via script tag: `<script src='https://api.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>`

然后可以使用数组值设置地图中心：

center: [orgBbox[0], orgBbox[1]]

或根据您的需要，调整边界：

map.fitBounds(orgBbox, {padding: 20});

以下是一个示例，在不使用webpack或浏览器的情况下，在常规html标记中使用turf.min.js：

---

快乐的编码和映射

根据詹姆斯·契瓦利埃的回答。对于在Mapbox Studio中辅助贴图的多边形/多多边形平铺集，我将使用此选项获取边界框：

getPolygonBoundingBox: function(feature) {
    // bounds [xMin, yMin][xMax, yMax]
    var bounds = [[], []];
    var polygon;
    var latitude;
    var longitude;

    for (var i = 0; i < feature.geometry.coordinates.length; i++) {
        if (feature.geometry.coordinates.length === 1) {
            // Polygon coordinates[0][nodes]
            polygon = feature.geometry.coordinates[0];
        } else {
            // Polygon coordinates[poly][0][nodes]
            polygon = feature.geometry.coordinates[i][0];
        }

        for (var j = 0; j < polygon.length; j++) {
            longitude = polygon[j][0];
            latitude = polygon[j][1];

            bounds[0][0] = bounds[0][0] < longitude ? bounds[0][0] : longitude;
            bounds[1][0] = bounds[1][0] > longitude ? bounds[1][0] : longitude;
            bounds[0][1] = bounds[0][1] < latitude ? bounds[0][1] : latitude;
            bounds[1][1] = bounds[1][1] > latitude ? bounds[1][1] : latitude;
        }
    }

    return bounds;
}

getPolygonBoundingBox:函数（功能）{
//界限[xMin，yMin][xMax，yMax]
变量边界=[]，[]；
var多边形；
纬度；
var经度；
对于（变量i=0；i经度？边界[1][0]：经度；
边界[0][1]=边界[0][1]<纬度？边界[0][1]：纬度；
边界[1][1]=边界[1][1]>纬度？边界[1][1]：纬度；
}
}
返回边界；
}

您可以使用

turp.js

库。它有一个

bbox

功能：

const bbox = turf.bbox(foo);

---

此函数可能应指定它仅适用于多边形。正如你所说，它不适用于其他没有相同结构的几何体，如点、多点和线串。它不适用于多边形。仅适用于多点，并且对它们非常有效。