Mapbox GL JS getBounds()/fitBounds()

Question

Я использую Mapbox GL JS v0.14.2, и я искал высоко и низко в документации, и очень мало об этом.

Если вы используете стандартный API JS, очень ясно, что «приспосабливать карту к маркерам», используя пример, который они предоставили (https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to-markers/); однако установка при использовании GL api совсем другая. API GL имеет 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: собственный geojson-extent плагин

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

Если вы хотите, чтобы соответствовать карте для маркеров, вы можете создать оценки, который содержит все маркеры.

var bounds = new mapboxgl.LngLatBounds(); 

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

map.fitBounds(bounds); 

Answer 2

MapBox будет делать трюк. Предполагая, что ваш объект markers - valid GeoJSON, вы можете просто передать его функции geojsonExtent(), чтобы получить набор ограничений, который вы можете передать до fitBounds().

После того, как вы загрузите файл geojson-extent.js (например, с помощью <script> тега в вашем HTML-коде), вы должны быть в состоянии сделать это, чтобы соответствовать вашей карте в пределы вашего GeoJSON markers объекта:

map.fitBounds(geojsonExtent(markers)); 

UPDATE

GeoJSONLint сообщает, что ваш markers объект не является действительной GeoJSON, так как элементы в каждой позиции интерпретируются как строки, а не число. Если убрать кавычки из Lon-LAT координат, он должен работать нормально:

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, но результат тот же.