Mapbox GL JS getBounds（）/ fitBounds（）

Question

我正在使用Mapbox GL JS v0.14.2，並且我已經通過文檔搜索了高和低，很少有清楚的關於這個。

如果您使用標準的JS API，使用他們提供的示例（https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to-markers/）;但是使用GL api時的設置完全不同。 GL API有getBounds()（https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds），但是因爲沒有像標準JS API那樣的命名圖層，所以我一直在努力研究如何使用getBounds()。

我找到了這個（Mapbox GL JS API Set Bounds），但肯定不能是正確答案？

這是我的大部分設置;不包括JSON設置和其他選項。

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(); 

}); 

我曾嘗試以下：

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); 

所以我知道如何fitBounds，但我不能確定如何讓他們map.getBounds()似乎只是返回集中心位置LNG /緯度。

標記JSON：

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

：如果您刪除從LON-緯度座標的報價，它應該很好地工作。

var bounds = new mapboxgl.LngLatBounds(); 

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

map.fitBounds(bounds); 

Answer 2

Mapbox自己geojson-extent插件就可以了。假設你的markers對象是valid GeoJSON，你可以簡單地將它傳遞給geojsonExtent()函數來獲得一組邊界，然後你可以傳遞給fitBounds()。

一旦加載geojson-extent.js文件（例如，通過在HTML代碼中使用<script>標籤），你應該能夠做到這一點，以適應您的地圖到您以GeoJSON的界限markers對象：

map.fitBounds(geojsonExtent(markers)); 

UPDATE

GeoJSONLint報告您markers對象無效GeoJSON的，因爲在每一個位置上的元素被解釋爲字符串，而不是數字。如果你想以適應地圖標記，您可以創建範圍包含所有標記

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

對於一個解決方案，將所有以GeoJSON對象的工作，而不僅僅是一組標記，看看Mapbox的Turf.js。

此代碼是非常有益的對我說：https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

但只是重複基礎知識鏈接死亡情況：

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

在鏈接的代碼中提到的extent方法贊成被否決bbox，但結果是一樣的。