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 JS standard, il est très clair de «adapter la carte aux marqueurs» à l'aide d'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 GL api est tout à fait 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, donc je getBounds() savoir 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 la majeure partie de mon installation; À 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é ce qui suit:

 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 faire pour installerBounds, mais je ne sais pas comment les obtenir map.getBounds() semble simplement retourner la position centrale du set lng / lat.

Marqueurs 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"]}}]}; 

  • Mapbox Driving Direction avec marqueur personnalisé
  • Ajoutez des marqueurs de base à une carte dans mapbox via mapbox gl js
  • Création d'un GeoJson dans php de MySql à utiliser avec MapBox javascript API
  • 3 Solutions collect form web for “Mapbox GL JS getBounds () / fitBounds ()”

    Si vous souhaitez adapter la carte aux marqueurs, vous pouvez créer des bornes 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 Turf.js de Mapbox.

    Ce code m'a été très utile: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

    Mais juste pour répéter les bases au cas où ce lien meurt:

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

    La méthode de extent mentionnée dans le code lié a été obsolète en faveur de bbox , mais le résultat est le même.

    Le plugin Geojson-degré de Mapbox fera le tour. En supposant que votre objet markers est valide GeoJSON , vous pouvez simplement le passer à la fonction geojsonExtent() pour obtenir un ensemble de bornes que vous pouvez passer à fitBounds() .

    Une fois que vous chargez le fichier geojson-extent.js (par exemple, en utilisant une <script> dans votre code HTML), vous devriez pouvoir le faire pour adapter votre carte aux limites de votre objet markers GeoJSON:

     map.fitBounds(geojsonExtent(markers)); 

    METTRE À JOUR

    GeoJSONLigne indique que votre objet markers n'est pas valide GeoJSON car les éléments de chaque position sont interprétés comme des chaînes, pas des chiffres. Si vous supprimez les citations des coordonnées lon-lat, cela devrait fonctionner correctement:

     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 ] } } ] }; 
    JavaScript rend le site Web intelligent, beauté et facile à utiliser.