Berechnen Sie Zentrumskoordinaten, Zoom und Stopps der Ebene dynamisch

Question

Unten ist mein Code, um eine Basiskarte anzuzeigen, Mittelkoordinaten und Zoomstufe einzustellen, um Ghana im View-Port zu zeigen und auch die Ghana Map für NDVI Property von Mein Quelllayer (mappbox hosted tileset) 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", 
     }); 
    }); 

Nun, wenn Sie in obigen Code sehe ich die hart codiert haben Zentrum koordiniert, Zoomstufe und stoppt Array, die für diese Ghana NDVI Trends Beispiel typisch ist.

Jetzt ist dieser Ansatz in Ordnung, wenn ich mit nur einer Datenquelle (in diesem Fall Ghana Datenquelle) zu tun habe, aber ich kann diese Werte nicht fest codieren, da sich meine Datenquelle ändern könnte und jede Region der Welt sein könnte und die Eigenschaft könnte auch alles andere als NDVI sein.

Ich verwende Mapbox gehostete Tilesets als Datenquelle, aber ich habe auch die ursprüngliche geoJson Datenquelle auf meinem Server.

Gibt es in Mapbox eine Möglichkeit, die Mitte, den Zoom und die Stopps dynamisch zu berechnen, abhängig von der Quelle, die wir laden? Der andere Ansatz, den ich dachte, besteht darin, die Tileset-Quell-ID an meinen Server zu übergeben und das ursprüngliche geoJSON zu lokalisieren und die Mitte zu berechnen, zu zoomen und auf dem Server anzuhalten und diese Werte dann an meinen Client zu übergeben und dann die Karte zu rendern in den js.

Lassen Sie mich wissen, was der beste Weg ist, um diese Werte dynamisch zu berechnen.

Answer 1

Jeder Kartenstil in Mapbox Studio kann eine center und zoom Eigenschaft haben. Erstens, stellen Sie sicher, dass Ihr Fall ist, durch "Lock-Standardposition" ermöglicht:

Es sieht aus wie:

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

Dies ist jedoch nicht durch die MapboxGLJS API ausgesetzt, und wenn Sie map.getStyle() nennen , diese Eigenschaften sind nicht vorhanden.

Wenn Sie jedoch die Style-Datei direkt zugreifen (durch die Stile API, anstatt die MapBox-GL-JS API), können Sie diese Eigenschaften zugreifen:

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