レイヤーの中心座標、ズーム、停止を動的に計算します

Question

以下は私のコードでベースマップを表示し、中心座標とズームレベルを設定してビューポートにガーナを表示し、また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動向例えば典型的な配列を停止するコード化されてきました。

このアプローチは、1つのデータソース（この場合はガーナデータソース）のみを扱っていますが、データソースが変更される可能性があり、これらの値をハードコードすることはできません。プロパティはNDVI以外のものでもあります。

私はデータソースとしてマップボックスホスト型のタイルセットを使用していますが、私のサーバー上にもオリジナルのgeoJsonデータソースがあります。

私たちがロードしているソースに応じて、センター、ズーム、および停止を計算する方法はありますか？

私が思った他のアプローチは、サーバにタイルセットソースIDを渡し、元のgeoJSONを探し、それを使ってセンターを計算し、ズームしてサーバーで停止してから、これらの値をクライアントに渡してマップをレンダリングしますjsで。

これらの値を動的に計算する最良の方法は何か教えてください。

Answer 1

Mapbox Studioの各マップスタイルは、centerとzoomのプロパティを持つことができます。まず、「ロックのデフォルトの位置」を有効にすることで、あなたがすることを確認してください。ただし、これはMapboxGLJS APIを介して公開されていない

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

、そしてあなたがmap.getStyle()を呼び出す場合：

それは次のようになりますこれらの特性は存在しない。

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