Уровни детализации

Mapbox GL JS строится вокруг принципа тайловой пирамиды, где данные представлены на множестве уровней масштабирования. Каждый уровень zoom соответствует набору квадратных тайлов, содержащих географическую информацию в векторном или растровом виде.

Векторные тайлы делят мир на дискретную сетку:

  • при zoom 0 — один тайл покрывает всю планету;
  • при увеличении zoom пространство делится экспоненциально;
  • каждый следующий уровень увеличивает детализацию в 4 раза (2×2 разбиение).

Это ключевая основа уровней детализации (Level of Detail, LOD) в Mapbox GL JS. Вместо загрузки всех данных сразу, система динамически выбирает только те тайлы, которые соответствуют текущему масштабу и области просмотра.

LOD в данном контексте решает две задачи:

  • уменьшение объёма данных;
  • обеспечение визуальной стабильности при зуме.

Zoom как главный параметр уровня детализации

Zoom-уровень является центральной переменной всей визуальной модели. Он управляет:

  • видимостью слоёв;
  • плотностью геометрии;
  • стилями объектов;
  • подгрузкой источников данных.

Каждый слой в стиле может иметь ограничения:

  • minzoom — минимальный zoom, при котором слой появляется;
  • maxzoom — максимальный zoom, после которого слой скрывается.

Пример логики:

map.addLayer({
  id: 'buildings',
  type: 'fill-extrusion',
  source: 'composite',
  'source-layer': 'building',
  minzoom: 15,
  maxzoom: 22,
  paint: {
    'fill-extrusion-height': ['get', 'height']
  }
});

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

Векторные тайлы и иерархия геометрии

LOD в Mapbox GL JS тесно связан с форматом векторных тайлов. Геометрия внутри тайлов упрощается на низких zoom-уровнях и становится более точной при увеличении масштаба.

Типичная стратегия генерации данных:

  • zoom 0–5: континенты, крупные границы;
  • zoom 6–10: страны, регионы;
  • zoom 11–14: города, районы;
  • zoom 15–22: здания, мелкие объекты.

Такое разбиение позволяет избегать перегрузки GPU и CPU при отрисовке.

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

Привязка стилей к уровню zoom

Одной из ключевых возможностей LOD в Mapbox GL JS является zoom-адаптивная стилизация. Любое свойство может зависеть от масштаба через выражения.

Интерполяция значений

'circle-radius': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 2,
  10, 6,
  15, 12
]

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

Zoom-выражения

'text-size': [
  'step',
  ['zoom'],
  10,
  8, 12,
  12, 16
]

Здесь детализация текста меняется ступенчато: при достижении определённых уровней масштабирования включаются новые параметры отображения.

minzoom и maxzoom как механизм LOD-контроля

Каждый слой может существовать только в определённом диапазоне масштабов. Это фундаментальная часть управления детализацией.

Пример многослойной архитектуры

  • слой границ стран: minzoom: 0, maxzoom: 6
  • слой регионов: minzoom: 5, maxzoom: 10
  • слой городов: minzoom: 9, maxzoom: 14
  • слой зданий: minzoom: 14, maxzoom: 22

Такой перекрывающийся диапазон позволяет избежать резких скачков визуализации.

Генерализация данных и упрощение геометрии

LOD невозможен без генерализации геометрии. На низких zoom-уровнях:

  • линии упрощаются алгоритмами типа Douglas-Peucker;
  • полигоны теряют мелкие детали;
  • точки агрегируются.

Это снижает количество вершин, передаваемых в WebGL-пайплайн.

Векторные тайлы уже содержат упрощённые версии объектов, поэтому клиентская часть не выполняет тяжелую геометрическую обработку.

Динамическая плотность данных

LOD также проявляется через плотность отображаемых объектов.

Фильтрация по zoom

'filter': ['>=', ['zoom'], 10]

или более сложные условия:

'filter': [
  'all',
  ['>=', ['zoom'], 12],
  ['has', 'population']
]

Это позволяет скрывать мелкие или несущественные объекты на низких уровнях масштабирования.

Кластеры как форма LOD для точечных данных

Для больших наборов точек применяется кластеризация. Она фактически является формой уровней детализации:

  • низкий zoom — группы точек;
  • средний zoom — разбиение кластеров;
  • высокий zoom — отдельные объекты.
map.addSource('points', {
  type: 'geojson',
  data: 'data.geojson',
  cluster: true,
  clusterMaxZoom: 14,
  clusterRadius: 50
});

Кластеры уменьшают нагрузку на рендеринг и повышают читаемость карты.

3D-слои и зависимость детализации от перспективы

LOD проявляется не только в 2D, но и в 3D-слоях.

Пример: extrusion зданий

  • на zoom 14–15 отображаются низкие экструдированные формы;
  • на zoom 16+ появляются детализированные параметры высоты;
  • на максимальном zoom возможна визуализация отдельных крыш и фасадных данных.

WebGL-пайплайн автоматически адаптирует уровень геометрической сложности под текущий масштаб.

Экспрессии и контекстная детализация

LOD может зависеть не только от zoom, но и от состояния данных:

'fill-color': [
  'case',
  ['>=', ['zoom'], 10],
  '#ffcc00',
  '#888888'
]

или комбинированные выражения:

[
  'interpolate',
  ['linear'],
  ['zoom'],
  8, ['get', 'lowColor'],
  14, ['get', 'highColor']
]

Так создаётся контекстная детализация, где визуальная насыщенность растёт вместе с масштабом.

Тайловый кеш и повторное использование уровней детализации

LOD в Mapbox GL JS поддерживается системой кеширования:

  • уже загруженные тайлы переиспользуются;
  • соседние zoom-уровни частично наследуют данные;
  • рендерер избегает повторной декодировки векторных данных.

Это снижает стоимость переходов между уровнями масштаба.

Плавные переходы между уровнями

Резкие скачки между zoom-уровнями сглаживаются:

  • анимацией камеры;
  • плавной интерполяцией стилей;
  • постепенной загрузкой тайлов.

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

Влияние LOD на производительность WebGL

LOD напрямую определяет нагрузку на рендеринг:

  • меньше геометрии — быстрее вершинные шейдеры;
  • меньше слоёв — ниже стоимость фрагментных вычислений;
  • меньше тайлов — быстрее сеть и декодирование.

Mapbox GL JS использует WebGL как основу рендеринга, поэтому корректная настройка уровней детализации критически влияет на FPS и стабильность отображения.

Практическая структура LOD в стилях

Типичная архитектура карты строится слоями:

  1. базовые слои (страны, океаны)
  2. административные границы
  3. дороги
  4. POI (точки интереса)
  5. 3D-объекты

Каждый уровень активируется строго по zoom, создавая многоуровневую систему детализации, которая заменяет традиционные LOD-деревья из 3D-графики.

Согласование LOD между источниками данных

Разные источники данных могут иметь собственные уровни детализации:

  • raster tiles — фиксированные изображения;
  • vector tiles — адаптивная геометрия;
  • GeoJSON — динамически загружаемые данные.

Mapbox GL JS синхронизирует их через общий zoom-контекст, обеспечивая согласованное отображение независимо от типа источника.

Оглавление