Проверьте, присутствует ли источник GeoJSON в окне просмотра mapbox - PullRequest
Новая
       32

Проверьте, присутствует ли источник GeoJSON в окне просмотра mapbox

1 голос
/ 12 июля 2019

У меня есть карта с несколькими слоями GeoJSON, каждый из которых имеет свое уникальное имя слоя: 

var map = new mapboxgl.Map({
  container: 'map',
  center: [-97.5651505, 37.89549,],
  zoom: 4
});

var sources = {
  'ord': 'chicago',
  'pit': 'pittsburgh',
  'atl': 'atlanta'
};

map.on('load', function () {
  for (var s in sources) {

    map.addSource(s, { type: 'geojson', data: `/geojson/${s}.json` });
    map.addLayer({
      'id': sources[s],
      'type': 'fill',
      'source': s,
      'layout': {
        'visibility': 'visible'
      },
      'paint': {
        'fill-color': '#088',
        'fill-opacity': 0.5
      }
    });
  }
});

Я хотел бы проверить, увеличил ли пользователь масштабирование в прошлом уровне масштабирования 13, и оценить, является ли какой-либо из этих трехслои находится в области просмотра.Если это так, я приму меры, чтобы добавить кнопку в оверлей.Однако у меня возникают проблемы с поиском любой документации, кроме листовок о том, как проверить, находится ли слой внутри области просмотра.Я нашел упоминание о маркерах, которые, кажется, не применяются.

1 Ответ

5 голосов
/ 12 июля 2019

Этого можно добиться с помощью queryRenderedFeatures, который возвращает массив объектов, отображаемых в заданной ограничительной рамке.Однако, если вы опустите аргумент ограничивающего прямоугольника, queryRenderedFeatures будет выполнять запрос во всем окне просмотра.Вы также можете использовать аргумент options.layers, чтобы ограничить ваш запрос определенными слоями, чтобы избежать получения набора объектов в основном стиле (например, улиц и озер).Вы можете выполнить этот запрос в обработчике событий zoomend, чтобы достичь желаемого результата.Собрав все это вместе, выглядело бы примерно так: 

map.on('zoomend', () => {
  if (map.getZoom() > 13) {
    const visibleFeatures = map.queryRenderedFeatures(null, {layers: ['ord', 'pit', 'atl']});
    // if none of the layers are visible, visibleFeatures will be an empty array
    if (visibleFeatures.length) {
      // figure out which layers are showing and add your button
    }
  }
});
...