javascript - color - mapbox online
Mapbox GL JS getBounds()/fitBounds() (3)
Estoy usando Mapbox GL JS v0.14.2 y he buscado en toda la documentación y muy poco queda claro al respecto.
Si usa la API estándar de JS, es muy fácil ''ajustar el mapa a los marcadores'' usando un ejemplo que han proporcionado ( https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to-markers/ ); Sin embargo, la configuración cuando se utiliza la api GL es muy diferente. La API de GL tiene getBounds() ( https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds ) pero debido a que no tiene una capa con nombre, como la API estándar de JS, entonces getBounds() luchando para averiguar cómo usar getBounds() en absoluto.
He encontrado esto ( Mapbox GL JS API Set Bounds ) pero seguramente no puede ser la respuesta correcta.
Esta es la mayor parte de mi configuración; excluyendo la configuración de JSON y otras opciones.
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();
});
He probado lo siguiente:
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);
Así que sé cómo ajustar los límites, pero no estoy seguro de cómo obtenerlos. map.getBounds() simplemente parece devolver la posición central establecida lng / lat.
Marcadores 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"]}}]};
El propio geojson-extent hará el truco. Suponiendo que su objeto de markers sea GeoJSON válido , simplemente puede pasarlo a la función geojsonExtent() para obtener un conjunto de límites que luego puede pasar a fitBounds() .
Una vez que cargue el archivo geojson-extent.js (por ejemplo, utilizando una etiqueta <script> en su código HTML), debería poder hacer esto para ajustar su mapa a los límites de su objeto de markers GeoJSON:
map.fitBounds(geojsonExtent(markers));
ACTUALIZAR
GeoJSONLint informa que su objeto de markers no es GeoJSON válido porque los elementos en cada posición se interpretan como cadenas, no como números. Si elimina las comillas de las coordenadas lon-lat, debería funcionar bien:
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
]
}
}
]
};
Para una solución que funcione para todos los objetos GeoJSON, no solo un conjunto de marcadores, echa un vistazo a Turf.js de Turf.js .
Este código fue muy útil para mí: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792
Pero solo para repetir lo básico en caso de que el enlace muera:
var bounds = turf.bbox(markers);
map.fitBounds(bounds, {padding: 20});
El método de extent mencionado en el código vinculado ha quedado en desuso en favor de bbox , pero el resultado es el mismo.
Si desea ajustar el mapa a los marcadores, puede crear límites que contengan todos los marcadores.
var bounds = new mapboxgl.LngLatBounds();
markers.features.forEach(function(feature) {
bounds.extend(feature.geometry.coordinates);
});
map.fitBounds(bounds);