Mapbox GL JS getBounds()/fitBounds() - программирование

Я использую Mapbox GL JS v0.14.2, и я искал высоко и низко в документации, и очень мало ясно об этом.

Если вы используете стандартный JS API, очень ясно "подогнать карту под маркеры", используя приведенный ими пример (https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to -маркеры/); однако настройка при использовании GL API совершенно иная. В GL API есть getBounds() (https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds), но поскольку у вас нет именованного слоя, как в стандартном API JS, поэтому я getBounds() понять, как использовать getBounds() на всех.

Я нашел это (Map Set GL JS API Set Bounds), но наверняка не может быть правильным ответом?

Это основная часть моей установки; исключая настройку JSON и другие опции.

Так что я знаю, как установить fitBounds, но я не уверен, как их получить map.getBounds() просто возвращает заданную центральную позицию lng/lat.

Ответы

Ответ 1

Если вы хотите сопоставить карту с маркерами, вы можете создать границы, содержащие все маркеры.

var bounds = new mapboxgl.LngLatBounds();

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

map.fitBounds(bounds);

Ответ 2

Для решения, которое будет работать для всех объектов GeoJSON, а не только для набора маркеров, посмотрите Mapbox Turf.js.

Этот код мне очень помог: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

Но просто повторить основы в случае, если ссылка замирает:

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

Метод extent, упомянутый в связанном коде, устарел в пользу bbox, но результат тот же.

Ответ 3

Mapbox собственный geojson-extent плагин сделает трюк. Предполагая, что ваш объект markers действительный GeoJSON, вы можете просто передать его функции geojsonExtent(), чтобы получить набор ограничений, которые вы можете затем перейдите к fitBounds().

Как только вы загрузите файл geojson-extent.js (например, используя тэг <script> в своем HTML-коде), вы должны быть в состоянии для этого, чтобы ваша карта соответствовала вашим объектам GeoJSON markers:

map.fitBounds(geojsonExtent(markers));

UPDATE

GeoJSONLint сообщает, что ваш объект markers недействителен GeoJSON, потому что элементы в каждой позиции интерпретируются как строки, а не цифры, Если вы удалите кавычки из координат lon-lat, он должен работать нормально:

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