Mapbox GL js getBounds () / fitBounds()
j'utilise Mapbox GL JS v0.14.2 et j'ai cherché haut et bas à travers la documentation et très peu est clair à ce sujet.
si vous utilisez l'API standard JS, il est très clair de "faire correspondre la carte aux marqueurs" en utilisant un exemple qu'ils ont fourni ( https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to-markers / ); cependant, la configuration lors de l'utilisation de l'api GL est très différente. L'API GL a getBounds() ( https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds ) mais parce que vous n'avez pas de couche nommée, comme L'API JS standard, je me bats pour trouver comment utiliser getBounds() du tout.
j'ai trouvé ceci ( Mapbox GL JS API Set Bounds ) mais sûrement ne peut pas être la bonne réponse?
C'est le gros de ma configuration, à l'exclusion de la configuration JSON et d'autres options.
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();
});
j'ai essayé le
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);
donc je sais comment ajuster les bouts, mais je ne suis pas sûr comment les obtenir map.getBounds() semble juste retourner la position centrale de set lng/lat.
Markers 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"]}}]};
3 réponses
si vous voulez ajuster la carte aux marqueurs, vous pouvez créer des limites qui contiennent tous les marqueurs.
var bounds = new mapboxgl.LngLatBounds();
markers.features.forEach(function(feature) {
bounds.extend(feature.geometry.coordinates);
});
map.fitBounds(bounds);
pour une solution qui fonctionnera pour tous les objets GeoJSON, pas seulement un ensemble de marqueurs, consultez le terrain de Mapbox.js .
ce code m'a été très utile: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792
mais juste pour répéter les bases dans le cas où ce lien meurt:
var bounds = turf.bbox(markers);
map.fitBounds(bounds, {padding: 20});
la méthode extent mentionnée dans le code lié a été dépréciée en faveur de bbox , mais le résultat est le même.
Mapbox geojson-mesure plugin fera l'affaire. En supposant que votre objet markers est GeoJSON valide , vous pouvez simplement le passer à la fonction geojsonExtent() pour obtenir un ensemble de limites que vous pouvez ensuite passer à fitBounds() .
une fois que vous chargez le geojson-extent.js fichier (par exemple, en utilisant une étiquette <script> dans votre code HTML), vous devriez être en mesure de le faire pour adapter votre carte à la limites de votre GeoJSON markers objet:
map.fitBounds(geojsonExtent(markers));
mise à JOUR
GeoJSONLint rapporte que votre objet markers N'est pas valide GeoJSON parce que les éléments dans chaque position sont interprétés comme des chaînes et non des nombres. Si vous supprimez les guillemets des coordonnées lon-lat, ça devrait bien marcher:
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
]
}
}
]
};