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

Question

下面是我的代码，用于显示底图、设置中心坐标和缩放级别以在视口中显示加纳，并为我的源层（mapbox 托管的瓦片集）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 趋势示例的典型示例。

现在，当我只处理一个数据源（在本例中是加纳数据源）时，这种方法很好，但我无法对这些值进行硬编码，因为我的数据源可能会改变并且可能是世界上的任何地区，并且该属性也可以是 NDVI 以外的任何东西。

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

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

我认为的另一种方法是将tileset源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()，这些属性将不存在。

但是，如果您直接访问样式文件（通过 Styles 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); 
});

代码笔：http://codepen.io/stevebennett/pen/OpXezm