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

Posted 2023-03-29

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

【英文标题】：Calculate center coordinates, zoom, and stops of the layer dynamically

【发布时间】：2017-07-25 04:48:13

【问题描述】：

下面是我的代码，用于显示底图、设置中心坐标和缩放级别以在视口中显示加纳，并为我的源层（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。

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

【参考方案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

【讨论】：

嗯，现在我重新阅读了这个问题，我想我错过了重点 - 这是关于来源，而不是样式。哎呀。

那么，您知道实现它的最佳方法是什么吗？我需要处理至少 100 个不同区域的不同地图，我如何以编程方式计算停靠点、居中和缩放？