Mapbox GL JS getBounds()/fitBounds()

Question

Sto utilizzando Mapbox GL JS v0.14.2 e ho cercato in alto e in basso nella documentazione e molto poco è chiaro su questo.

Se si utilizza l'API JS standard, è molto chiaro "adatta la mappa ai marcatori" utilizzando un esempio fornito (https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to-markers/); tuttavia l'installazione quando si usa il GL api è abbastanza diversa. L'API GL ha getBounds() (https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds) ma poiché non si dispone di un livello denominato, ad esempio l'API JS standard, quindi non riesco proprio a capire come utilizzare getBounds().

Ho trovato questo (Mapbox GL JS API Set Bounds) ma sicuramente non può essere la risposta giusta?

Questa è la maggior parte del mio setup; esclusa la configurazione JSON e altre opzioni.

mapboxgl.accessToken = 'pk.eyJ1IjoicmljaGdjIiwiYSI6ImNpa3lpcWIzYjAwNWZ3bm0wMHJvOWV5enYifQ.l55SYYn9MVjEN8CM3Q1xdw'; 

var markers = <?php echo $programme_json; ?>; 

var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/richgc/cikyo5bse00nqb0lxebkfn2bm', 
    center: [-1.470085, 53.381129], 
    zoom: 15 
}); 

map.on('style.load', function() { 
    map.addSource('markers', { 
     'type': 'geojson', 
     'data': markers 
    }); 

    map.addLayer({ 
     "id": "markers", 
     "interactive": true, 
     "type": "symbol", 
     "source": "markers", 
     "layout": { 
      "icon-image": "venue-map-icon-blue", 
      'icon-size': 0.5, 
      "icon-allow-overlap": true 
     } 
    }); 

    map.scrollZoom.disable(); 

}); 

Ho provato quanto segue:

alert(map.getBounds()); // LngLatBounds(LngLat(-1.4855345239256508, 53.37642500812015), LngLat(-1.4546354760740883, 53.38583247227842)) 
var bounds = [[-1.4855345239256508, 53.37642500812015],[-1.4546354760740883, 53.38583247227842]] 
map.fitBounds(bounds); 

quindi so come a fitBounds, ma sono sicuri di come farli map.getBounds() sembra proprio di restituire il set posizione centrale lng/lat.

Marcatori JSON: proprio geojson-extent plug

var markers = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"title":"Site Gallery","url":"\/Freelance\/art-sheffield-2016\/programme\/site-gallery\/","summary":"Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Donec id justo. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Suspendisse feugiat. Etiam rhoncus.","image":"\/Freelance\/art-sheffield-2016\/site\/assets\/files\/1032\/site_gallery.jpg","marker-symbol":"venue-map-icon-blue","colour":"blue"},"geometry":{"type":"Point","coordinates":["-1.466439","53.376842"]}},{"type":"Feature","properties":{"title":"Moore Street Substation","url":"\/Freelance\/art-sheffield-2016\/programme\/moore-street-substation\/","summary":"","image":null,"marker-symbol":"venue-map-icon-green","colour":"green"},"geometry":{"type":"Point","coordinates":["-1.477881","53.374798"]}},{"type":"Feature","properties":{"title":"S1 Artspace","url":"\/Freelance\/art-sheffield-2016\/programme\/s1-artspace\/","summary":"","image":null,"marker-symbol":"venue-map-icon-red","colour":"red"},"geometry":{"type":"Point","coordinates":["-1.459620","53.380562"]}}]}; 

Answer 1

Se si vuole adattare mappa marcatori, è possibile creare limiti che contiene tutti i marcatori.

var bounds = new mapboxgl.LngLatBounds(); 

markers.features.forEach(function(feature) { 
    bounds.extend(feature.geometry.coordinates); 
}); 

map.fitBounds(bounds); 

Answer 2

di Mapbox farà il trucco. Supponendo che il tuo oggetto markers sia valid GeoJSON, puoi semplicemente passarlo alla funzione geojsonExtent() per ottenere un set di limiti che puoi quindi passare a fitBounds().

Una volta che si carica il file geojson-extent.js (ad esempio, utilizzando un nome <script> nel codice HTML), si dovrebbe essere in grado di fare questo per soddisfare la vostra mappa per i limiti della vostra GeoJSON markers oggetto:

map.fitBounds(geojsonExtent(markers)); 

UPDATE

GeoJSONLint riferisce che l'oggetto non è markers GeoJSON valido perché gli elementi in ogni posizione vengono interpretati come stringhe, non numeri. Se si rimuovono le citazioni dalle coordinate lon-lat, dovrebbe funzionare bene:

var markers = { 
 
    "type": "FeatureCollection", 
 
    "features": [ 
 
    { 
 
     "type": "Feature", 
 
     "properties": { 
 
     "title": "Site Gallery", 
 
     "url": "\/Freelance\/art-sheffield-2016\/programme\/site-gallery\/", 
 
     "summary": "Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Donec id justo. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Suspendisse feugiat. Etiam rhoncus.", 
 
     "image": "\/Freelance\/art-sheffield-2016\/site\/assets\/files\/1032\/site_gallery.jpg", 
 
     "marker-symbol": "venue-map-icon-blue", 
 
     "colour": "blue" 
 
     }, 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [ 
 
      -1.466439, 
 
      53.376842 
 
     ] 
 
     } 
 
    }, 
 
    { 
 
     "type": "Feature", 
 
     "properties": { 
 
     "title": "Moore Street Substation", 
 
     "url": "\/Freelance\/art-sheffield-2016\/programme\/moore-street-substation\/", 
 
     "summary": "", 
 
     "image": null, 
 
     "marker-symbol": "venue-map-icon-green", 
 
     "colour": "green" 
 
     }, 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [ 
 
      -1.477881, 
 
      53.374798 
 
     ] 
 
     } 
 
    }, 
 
    { 
 
     "type": "Feature", 
 
     "properties": { 
 
     "title": "S1 Artspace", 
 
     "url": "\/Freelance\/art-sheffield-2016\/programme\/s1-artspace\/", 
 
     "summary": "", 
 
     "image": null, 
 
     "marker-symbol": "venue-map-icon-red", 
 
     "colour": "red" 
 
     }, 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [ 
 
      -1.459620, 
 
      53.380562 
 
     ] 
 
     } 
 
    } 
 
    ] 
 
};

Answer 3

Per una soluzione che funziona per tutti gli oggetti di GeoJSON, non solo un insieme di marcatori, controlla Mapbox di Turf.js.

Questo codice è stato molto utile per me: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

Ma solo per ripetere le nozioni di base nel caso in cui il collegamento muore:

var bounds = turf.bbox(markers); 
map.fitBounds(bounds, {padding: 20}); 

Il metodo extent menzionata nel codice collegato è stato deprecato in favore di bbox, ma il risultato è lo stesso.