Mapbox GL JS getBounds () / fitBounds () - javascript, json, mapbox

Я використовую Mapbox GL JS v0.14.2, і шукав високо і низько в документації, і дуже мало цього зрозуміло.

Якщо ви використовуєте стандартний API JS, "зрозуміти карту маркерами", зрозуміло, використовуючи приклад, який вони надали ()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) але тому, що у вас немає іменованого шару, як стандартний API JS, тому я намагаюся розробити, як використовувати getBounds() зовсім.

Я знайшов це (Mapbox GL JS API встановлює межі) але точно не може бути правильною відповіддю?

Це основна частина моєї установки; виключаючи налаштування 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);

Тому я знаю, як підходити до Рамок, але я не впевнений, як їх отримати map.getBounds() просто здається повернути задане центральне положення lng / lat.

Маркери 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"]}}]};

Відповіді:

Якщо ви хочете встановити карту до маркерів, ви можете створити межі, які містять усі маркери.

var bounds = new mapboxgl.LngLatBounds();

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

map.fitBounds(bounds);

Для рішення, яке буде працювати для всіх об’єктів GeoJSON, а не лише набору маркерів, перегляньте Mapbox "s Turf.js.

Цей код мені дуже допоміг: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

Але лише для того, щоб повторити основи у випадку, якщо посилання вмирає:

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

The extent Спосіб, згаданий у зв'язаному коді, був припинений на користь bbox, але результат такий самий.

Mapbox є власною геойсон-ступінь плагін зробить трюк. Припускаючи своє markers об'єкт є дійсний GeoJSON, ви можете просто передати його geojsonExtent() функція, щоб отримати набір меж, до яких потім можна перейти fitBounds().

Після завантаження geojson-extent.js файл (наприклад, за допомогою a <script> у вашому HTML-коді), ви повинні зробити це, щоб пристосувати карту до меж вашого 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
]
}
}
]
};