Просмотр слоев

В Mapbox GL JS слои (layers) представляют собой ключевой элемент визуализации данных на карте. Каждый слой отвечает за отображение определённого типа геометрии, стиля и источника данных. Понимание работы со слоями позволяет создавать интерактивные карты с настраиваемым отображением объектов, фильтрацией и динамическим обновлением информации.

Типы слоев

Mapbox GL JS поддерживает несколько основных типов слоев:

  • fill – заливка полигонов, используется для отображения территорий, границ и регионов.
  • line – линии, подходят для отображения дорог, рек, границ.
  • circle – точки с радиусом и цветом, например, для отображения отдельных объектов.
  • symbol – текстовые иконки, маркеры и подписи.
  • raster – растровые изображения, например, спутниковые снимки.
  • heatmap – тепловые карты для визуализации плотности точек.
  • fill-extrusion – трёхмерные объекты, применяются для отображения зданий и высот.
  • hillshade – рельеф и затенение поверхности.

Каждый слой обязательно привязан к источнику данных (source), который может быть как встроенным (например, Mapbox Streets), так и пользовательским (GeoJSON, Vector, Raster).

Добавление слоя

Слой добавляется методом map.addLayer(layer, beforeId), где layer – объект с конфигурацией, а beforeId – необязательный параметр, указывающий перед каким существующим слоем вставить новый. Пример структуры объекта слоя:

map.addLayer({
  id: 'my-fill-layer',
  type: 'fill',
  source: 'my-geojson-source',
  layout: {},
  paint: {
    'fill-color': '#088',
    'fill-opacity': 0.5
  }
});

Ключевые моменты:

  • id – уникальный идентификатор слоя.
  • type – тип слоя.
  • source – источник данных.
  • layout – параметры компоновки, например видимость, ориентация символов.
  • paint – визуальные свойства, такие как цвет, ширина линий, непрозрачность.

Порядок отображения слоев

Слои в Mapbox GL JS имеют строгий порядок рендеринга, определяемый их порядком добавления. Более поздние слои накладываются поверх ранее добавленных. Для точного управления порядком можно использовать параметр beforeId при добавлении слоя:

map.addLayer(newLayer, 'existing-layer-id');

Это вставит новый слой перед указанным существующим слоем, что важно для корректного наложения заливок, линий и символов.

Управление видимостью слоев

Видимость слоя регулируется через свойство layout.visibility:

map.setLayoutProperty('my-fill-layer', 'visibility', 'none');
map.setLayoutProperty('my-fill-layer', 'visibility', 'visible');

Это позволяет динамически скрывать и показывать слои без их удаления с карты, что удобно для интерактивных фильтров и переключателей слоев.

Фильтрация и условное отображение

Слои можно фильтровать с помощью выражений, используя метод setFilter. Фильтры позволяют показывать только объекты, соответствующие заданным условиям:

map.setFilter('my-fill-layer', ['==', ['get', 'type'], 'park']);

В примере фильтр отображает только те полигоны, у которых свойство type равно "park". Выражения поддерживают логические операции, сравнения и работу с массивами свойств.

Обновление стиля слоев

Стили слоя можно менять динамически через методы setPaintProperty и setLayoutProperty:

map.setPaintProperty('my-fill-layer', 'fill-color', '#f00');
map.setLayoutProperty('my-symbol-layer', 'text-size', 16);

Это позволяет создавать интерактивные эффекты, например подсветку объектов при наведении или изменение цвета в зависимости от значения данных.

События слоев

Слои могут быть источником событий, таких как click, mouseenter, mouseleave:

map.on('click', 'my-fill-layer', (e) => {
  console.log('Клик по объекту:', e.features[0].properties);
});

События позволяют реагировать на действия пользователя, выводить всплывающие подсказки (popups) и реализовывать сложную интерактивность.

Удаление и перестановка слоев

Слой можно удалить с помощью map.removeLayer(layerId). При удалении слоя следует помнить, что источники данных не удаляются автоматически. Для перестановки слоев используется комбинация removeLayer и addLayer, либо изменение параметра beforeId.

Практические советы

  • Всегда присваивать слоям уникальные идентификаторы.
  • Сначала добавлять базовые слои (карта, рельеф), затем накладывать тематические.
  • Для динамических данных использовать GeoJSON источники и обновлять их методом setData.
  • При большом количестве объектов применять фильтры и кластеризацию для оптимизации производительности.
  • Разделять стили layout и paint для удобного управления визуальными эффектами.

Итоговые возможности

Mapbox GL JS предоставляет полный контроль над слоями: от типа и источника данных до фильтров, событий и динамического изменения стилей. Правильное понимание этих механизмов позволяет создавать профессиональные, интерактивные карты с высокой производительностью и удобным пользовательским интерфейсом.

Оглавление