Question

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

 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托管的tilesets作为数据源，但我的服务器上也有原始的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); 
});

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

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

1 个答案: