Порядок отрисовки слоев

Визуализация карты в MapLibre GL JS строится на строгой модели слоёв (layers), где каждый слой представляет собой отдельную инструкцию рендеринга геоданных из источников (sources). Порядок, в котором слои располагаются в стиле, напрямую определяет итоговую композицию изображения на экране. Рендеринг выполняется сверху вниз по стеку слоёв, но фактическое наложение работает по принципу «последний слой выше всех предыдущих» с учётом типа слоя, прозрачности и правил сортировки.

Модель слоя и базовый принцип наложения

Каждый слой в стиле MapLibre GL JS описывается объектом с типом (type), источником данных (source), и набором параметров отображения (layout, paint). При добавлении слоя в стиль он помещается в определённую позицию массива layers.

Ключевое правило:

порядок слоёв в массиве style.layers определяет порядок их отрисовки, где каждый следующий слой перекрывает предыдущий

Это означает, что слой, добавленный позже, визуально оказывается выше.

Порядок добавления слоёв через API

При использовании метода:

map.addLayer(layer, beforeId?)

возможны два сценария:

  • без beforeId — слой добавляется в конец массива и становится верхним
  • с beforeId — слой вставляется перед указанным слоем

Таким образом, управление порядком отрисовки осуществляется как через декларативный стиль, так и через императивное API.

Дополнительные методы:

  • map.moveLayer(id, beforeId?) — изменение позиции уже существующего слоя
  • map.removeLayer(id) — удаление слоя с пересборкой стековой структуры

Слои как стек отрисовки

Внутренне MapLibre GL JS формирует стек рендеринга:

  1. фоновые слои (background)
  2. слои заливки (fill)
  3. линии (line)
  4. полигоны с обводкой
  5. символы (symbol)
  6. растровые тайлы (raster)
  7. 3D-слои (fill-extrusion)
  8. пользовательские WebGL-слои (custom)

Однако этот порядок не фиксирован жёстко — он может изменяться через расположение слоёв в стиле.

Тип слоя и влияние на порядок

Тип слоя влияет на то, как он участвует в композиции:

fill

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

line

Линии отрисовываются поверх полигонов, но ниже символов. При этом порядок линий внутри одного слоя не гарантируется, если не задано line-sort-key.

symbol

Символьные слои (подписи, иконки) почти всегда находятся в верхней части стека. Их порядок дополнительно зависит от text-field, icon-image, а также text-anchor.

fill-extrusion

3D-экструзии участвуют в глубинной композиции сцены и могут визуально перекрывать 2D-слои, если камера наклонена.

Контроль порядка внутри одного слоя

Внутри одного слоя порядок объектов может управляться через свойства сортировки:

  • symbol-sort-key — управляет порядком символов
  • line-sort-key — влияет на очередность линий
  • fill-sort-key — используется реже, но может влиять на порядок заливки

Если сортировка не задана, порядок определяется порядком данных в source, что делает поведение менее предсказуемым.

Влияние прозрачности и альфа-канала

Отрисовка слоёв в WebGL контексте MapLibre GL JS учитывает альфа-композицию:

  • полупрозрачные слои не полностью перекрывают нижние
  • порядок важен для корректного смешивания цветов
  • неправильная структура слоёв может приводить к визуальным артефактам

Особенно критично это для:

  • тепловых карт
  • градиентных заливок
  • полупрозрачных линий маршрутов

Зависимость от zoom и фильтрации

Слои могут менять видимость в зависимости от масштаба карты:

  • minzoom и maxzoom ограничивают участие слоя в рендеринге
  • filter может исключать часть геометрии

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

Контекстные слои и группы

Практика построения сложных карт часто включает логическую группировку слоёв:

  • базовая карта (дороги, здания)
  • тематические слои (аналитика, данные)
  • интерактивные слои (выделения, hover)
  • overlay-слои (подписи, маркеры)

Порядок групп внутри стека обычно фиксируется архитектурно, чтобы избежать конфликтов наложения.

Специфика работы с источниками данных

Один источник (source) может использоваться в нескольких слоях. В этом случае:

  • порядок слоёв важнее, чем порядок данных в source
  • разные стили одного источника могут перекрывать друг друга
  • фильтрация позволяет разделять визуальные представления одного набора данных

Особенности отрисовки символов

Символьные слои обладают дополнительной логикой:

  • предотвращение пересечений (text-allow-overlap, icon-allow-overlap)
  • приоритизация видимости
  • динамическое перераспределение позиций

Это делает их поведение частично недетерминированным по сравнению с другими типами слоёв.

3D-слои и глубина сцены

Слои типа fill-extrusion участвуют в глубинном тестировании WebGL:

  • высота объекта влияет на перекрытие
  • угол наклона камеры изменяет порядок визуального доминирования
  • слои могут частично перекрывать 2D-слои независимо от их позиции в массиве

Это создаёт эффект псевдо-реального пространства, где порядок слоя не является единственным фактором видимости.

Практическая модель приоритета рендеринга

Итоговый порядок отрисовки определяется комбинацией факторов:

  1. положение слоя в style.layers
  2. тип слоя
  3. zoom-ограничения
  4. фильтры
  5. прозрачность
  6. глубина сцены (для 3D)
  7. внутренние правила сортировки объектов

Конфликты наложения и их природа

Основные причины визуальных конфликтов:

  • символы перекрываются линиями из-за неверного порядка слоёв
  • полигоны скрывают подписи при неправильной вставке слоя
  • 3D-объекты нарушают ожидаемую иерархию
  • прозрачные слои усиливают артефакты наложения

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

Для стабильного результата применяются:

  • строгая фиксация порядка слоёв в стиле
  • использование beforeId при добавлении
  • разделение слоёв по функциональным группам
  • явное управление сортировкой символов и линий
  • минимизация пересечений прозрачных слоёв

Итоговая модель поведения

Рендеринг слоёв в MapLibre GL JS представляет собой многослойную систему приоритетов, где визуальный результат определяется не только порядком добавления слоёв, но и их типом, настройками сортировки, параметрами отображения и состоянием камеры. Это делает стек слоёв не линейной структурой, а комбинацией нескольких уровней правил композиции.

Оглавление