Mapbox .js API自動縮放到GeoJSON

Question

我有一個簡單的頁面，使用GeoJSON來填充所需的LineStrings，並使用基於Mapbox的地圖。我正在尋找一種在每次加載地圖時都會自動設置擴展盤區的方法。目前，我正在計算最大和最小經緯度並設置視圖，但我仍然需要定義縮放級別。我已經看到了一些與設置界限有關的功能，但我似乎無法在使用我的GeoJSON的同時完成這項工作。有什麼建議麼？

<script> 
    L.mapbox.accessToken = '[removed]'; 

    var geojson = [ 

       { 
       "type": "Feature", 
       "properties": { 
        "stroke": "#0324a7", 
        "stroke-width": 2, 
        "stroke-opacity": 1 
       }, 
       "geometry": { 
        "type": "LineString", 
        "coordinates": [ [-123.116589,49.209164],[-123.117103,49.208972],[...removed for clarity...],[-123.111908,49.284047] ] 
       }, 
       "properties": { 
        "title": "10 DOWNTOWN", 
        "stroke": "#0324a7", 
        "stroke-width": 5, 
        "stroke-opacity": 1 
       } 
      }, 

       { 
       "type": "Feature", 
       "properties": { 
        "stroke": "#0324a7", 
        "stroke-width": 2, 
        "stroke-opacity": 1 
       }, 
       "geometry": { 
        "type": "LineString", 
        "coordinates": [ [-123.134782,49.203239],[-123.135147,49.203328],[-123.135894,49.203637],[-123.136782,49.203951],[-123.138169,49.204423],[-123.138759,49.20457],[-123.139587,49.204862],[-123.140005,49.205046],[-123.140243,49.205186],[-123.140395,49.205325],[-123.140532,49.205506],[-123.140631,49.205792],[-123.140586,49.20707],[-123.140534,49.208535],[-123.140463,49.210515],[-123.140448,49.210886],[-123.140432,49.211372],[-123.140401,49.212256],[-123.14037,49.213145],[-123.140369,49.213145],[-123.14036,49.213735],[-123.140355,49.213998],[-123.140776,49.214006],[-123.140789,49.213746] ] 
       }, 
       "properties": { 
        "title": "10 GRANVILLE TO 63RD", 
        "stroke": "#0324a7", 
        "stroke-width": 5, 
        "stroke-opacity": 1 
       } 
      }, 

       { 
       "type": "Feature", 
       "properties": { 
        "stroke": "#0324a7", 
        "stroke-width": 2, 
        "stroke-opacity": 1 
       }, 
       "geometry": { 
        "type": "LineString", 
        "coordinates": [ [-123.134782,49.203239],[-123.135147,49.203328],[...removed for clarity...],[-123.127194,49.277803],[-123.128135,49.278406] ] 
       }, 
       "properties": { 
        "title": "10 TO DAVIE", 
        "stroke": "#0324a7", 
        "stroke-width": 5, 
        "stroke-opacity": 1 
       } 
      }, 

       { 
       "type": "Feature", 
       "properties": { 
        "stroke": "#0324a7", 
        "stroke-width": 2, 
        "stroke-opacity": 1 
       }, 
       "geometry": { 
        "type": "LineString", 
        "coordinates": [ [-123.134782,49.203239],[-123.135147,49.203328],[...removed for clarity...],[-123.116191,49.281213],[-123.117871,49.280109],[-123.118797,49.280722],[-123.119815,49.281368] ] 
       }, 
       "properties": { 
        "title": "10 TO ROBSON", 
        "stroke": "#0324a7", 
        "stroke-width": 5, 
        "stroke-opacity": 1 
       } 
      }, 

       { 
       "type": "Feature", 
       "properties": { 
        "stroke": "#0324a7", 
        "stroke-width": 2, 
        "stroke-opacity": 1 
       }, 
       "geometry": { 
        "type": "LineString", 
        "coordinates": [ [-123.110919,49.284708],[-123.111908,49.284047],[-123.112864,49.283416],[...removed for clarity...],[-123.116589,49.209164] ] 
       }, 
       "properties": { 
        "title": "10 GRANVILLE", 
        "stroke": "#0324a7", 
        "stroke-width": 2, 
        "stroke-opacity": 1 
       } 
      }, 

       { 
       "type": "Feature", 
       "properties": { 
        "stroke": "#0324a7", 
        "stroke-width": 2, 
        "stroke-opacity": 1 
       }, 
       "geometry": { 
        "type": "LineString", 
        "coordinates": [ [-123.110919,49.284708],[-123.111908,49.284047],[...removed for clarity...],[-123.134852,49.202151] ] 
       }, 
       "properties": { 
        "title": "10 TO MARPOLE", 
        "stroke": "#0324a7", 
        "stroke-width": 2, 
        "stroke-opacity": 1 
       } 
      }]; 

    var map = L.mapbox.map('map', 'mapbox.streets'); 
    map.setView([49.2437385, -123.1258535], 12); 



    L.geoJson(geojson, { style: L.mapbox.simplestyle.style }).addTo(map); 

</script> 

在此先感謝！

Answer 1

L.GeoJSON繼承L.FeatureGroup的getBounds方法。您可以使用它來獲取圖層的邊界：

返回特徵組的LatLngBounds（根據其子區域的邊界和座標創建）。

http://leafletjs.com/reference.html#featuregroup-getbounds

var geojsonLayer = L.geoJson(geojson, { 
    style: L.mapbox.simplestyle.style 
}).addTo(map); 

var bounds = geojsonLayer.getBounds(); 

您可以使用這些邊界與fitBounds方法您L.mapbox.map的（L.Map）實例：

設置包含地圖視圖給定最大縮放級別可能的地理範圍。

http://leafletjs.com/reference.html#map-fitbounds

map.fitBounds(bounds);