动态计算图层的中心坐标，缩放和停止

Question

下面是我的代码，用于显示基本地图，设置中心坐标和缩放级别以在视口中显示加纳，并为我的源图层（由地图框托管的图集）ghanaNDVILayer的NDVI属性设置样式/颜色。

 mapID='myMapID';
    mapboxgl.accessToken = 'accessToken';

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-1.41, 6.32],
        zoom: 5
    });

    map.on('load', function () {
        map.addLayer({
            'id': 'main',
            'type': 'fill',
            'layout': {},
            'paint': {
                'fill-color': {
                  property: 'NDVI',
                    stops: [
                        [0, '#F2F12D'],
                        [1, '#EED322'],
                        [2, '#E6B71E'],
                        [3, '#DA9C20'],
                        [4, '#CA8323'],
                        [5, '#B86B25'],
                        [6, '#A25626'],
                        [7, '#8B4225'],
                        [8, '#723122']
                    ]
                },
                'fill-opacity': 0.8
            },
            'source': {
                'type': 'vector',
                'url': 'mapbox://' + mapID
            },
           "source-layer": "ghanaNDVILayer",
        });
    });

现在，如果您在上面的代码中看到了，我已经硬编码了中心坐标，缩放级别和停止数组 ，这是此加纳NDVI趋势示例的典型代表。

现在，当我仅处理一个数据源（在本例中为ghana数据源）时，这种方法很好，但是由于我的数据源可能会更改并且可能在世界的任何区域，并且属性可以也可以是NDVI以外的任何东西。

我使用的是mapbox托管的图块集作为数据源，但是我的服务器上也有原始的geoJson数据源。

Mapbox中是否有任何方法可以根据加载的源来动态计算中心，缩放和停止？

我认为的另一种方法是将tileet源ID传递到我的服务器，并找到原始的geoJSON，并使用它来计算中心，缩放并在服务器上停止，然后将这些值传递给我的客户端，然后在js中渲染地图。

让我知道动态计算这些值的最佳方法是什么。

Answer 1

Mapbox Studio中的每种地图样式都可以具有center和zoom属性。 首先，通过启用“锁定默认位置”来确保您这样做：

看起来像：

{
"version":8,
"name":"svglines",
"metadata":{"mapbox:autocomposite":true},
"center":[-100.93913338752408,21.154227435559193],
"zoom":17.327947082278016,"bearing":0,"pitch":0,
"sources":{"composite":...

但是，这不会通过MapboxGLJS API公开，如果调用map.getStyle() ，则这些属性将不存在。

但是，如果您直接访问样式文件（通过样式API，而不是Mapbox-GL-JS API），则可以访问以下属性：

d3.json('https://api.mapbox.com/styles/v1/stevage/cinxfhzqs002nawma56kr6ww4?_=2&access_token=' + mapboxgl.accessToken, function(style) { 
  map.setCenter(style.center)
  //console.log(style.center); 
});

CodePen： http ://codepen.io/stevebennett/pen/OpXezm