web-dev-qa-db-fra.com

Mapbox GL JS getBounds () / fitBounds ()

J'utilise Mapbox GL JS v0.14.2 et j'ai cherché haut et bas dans la documentation et très peu de choses sont claires à ce sujet.

Si vous utilisez l'API JS standard, il est très clair d'ajuster 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 l'API GL est assez 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, j'ai donc du mal à trouver comment utiliser getBounds() du tout.

J'ai trouvé cela ( Mapbox GL JS API Set Bounds ) mais ne peut sûrement pas être la bonne réponse?

C'est l'essentiel de ma configuration; à l'exclusion de la configuration JSON et d'autres options.

mapboxgl.accessToken = '<myaccesstoken>';

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);

Je sais donc comment ajuster les limites, mais je ne sais pas comment les obtenir map.getBounds() semble simplement renvoyer la position centrale définie 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"]}}]};
javascriptjsonmapbox
34
John the Painter

Si vous souhaitez adapter la carte aux marqueurs, vous pouvez créer des limites contenant tous les marqueurs.

var bounds = new mapboxgl.LngLatBounds();

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

map.fitBounds(bounds);
69
Timur Bilalov

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 mourrait:

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

La méthode extent mentionnée dans le code lié a été déconseillée au profit de bbox, mais le résultat est le même.

10
ChidG

Le plugin geojson-extend de Mapbox 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 à la fonction fitBounds().

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

map.fitBounds(geojsonExtent(markers));

[~ # ~] mise à jour [~ # ~]

GeoJSONLint signale que votre objet markers n'est pas GeoJSON valide car les éléments de chaque position sont interprétés comme des chaînes, pas comme des nombres. Si vous supprimez les guillemets 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
        ]
      }
    }
  ]
};
5
Charlie Greenbacker