Зависимость от зума

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

Каждый уровень масштабирования определяет:

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

Zoom в Mapbox GL JS — не просто «увеличение», а переключатель семантики отображения данных.

Диапазон zoom и tile-логика

Векторные и растровые тайлы организованы по схеме:

  • z — уровень масштаба
  • x, y — координаты тайла

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

map.addSource('cities', {
  type: 'vector',
  url: 'mapbox://examples.cities'
});

И слой, использующий zoom-ограничения:

map.addLayer({
  id: 'city-points',
  type: 'circle',
  source: 'cities',
  'source-layer': 'places',
  minzoom: 3,
  maxzoom: 10
});

Поведение minzoom и maxzoom

  • minzoom — слой начинает участвовать в рендере только с указанного масштаба
  • maxzoom — слой перестаёт рендериться выше этого масштаба

Важно: это не фильтрация данных, а управление участием слоя в рендер-пайплайне.

Zoom как параметр выражений (expressions)

Zoom становится встроенной переменной в системе выражений стилей.

Базовая форма

["zoom"]

Используется внутри выражений:

map.addLayer({
  id: 'roads',
  type: 'line',
  source: 'streets',
  'source-layer': 'road',
  paint: {
    'line-width': [
      'interpolate',
      ['linear'],
      ['zoom'],
      5, 0.5,
      10, 2,
      15, 6
    ],
    'line-opacity': [
      'step',
      ['zoom'],
      0,
      8, 1
    ]
  }
});

Интерполяция свойств от zoom

Линейная интерполяция

Наиболее частый способ масштабирования визуальных параметров:

"circle-radius": [
  "interpolate",
  ["linear"],
  ["zoom"],
  0, 1,
  10, 4,
  16, 10
]

Механика:

  • при zoom = 0 радиус минимален
  • при zoom = 16 радиус максимален
  • между значениями происходит непрерывное вычисление

Экспоненциальное масштабирование

"line-width": [
  "interpolate",
  ["exponential", 1.5],
  ["zoom"],
  5, 0.5,
  12, 5
]

Используется для более «естественного» роста толщины линий.

Step-логика (ступенчатая зависимость)

Иногда требуется дискретная смена стиля:

"text-size": [
  "step",
  ["zoom"],
  10,
  10, 12,
  14, 16,
  18, 20
]

Поведение:

  • до zoom 10 — размер 10
  • от 10 до 14 — 12
  • от 14 до 18 — 16
  • выше — 20

Step используется для резких переключений уровней детализации.

Zoom-зависимость видимости объектов

Управление opacity

"fill-opacity": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5, 0,
  8, 0.7,
  12, 1
]

Управление visibility через фильтрацию

filter: [
  "all",
  [">=", ["zoom"], 8]
]

Однако чаще используется minzoom/maxzoom, так как фильтры вычисляются иначе и могут влиять на производительность.

Динамическая детализация слоёв

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

Пример: дороги разного класса

map.addLayer({
  id: 'major-roads',
  type: 'line',
  source: 'streets',
  'source-layer': 'road',
  filter: ['==', ['get', 'class'], 'primary'],
  minzoom: 5,
  paint: {
    'line-width': [
      'interpolate',
      ['linear'],
      ['zoom'],
      5, 1,
      10, 2,
      15, 6
    ]
  }
});

map.addLayer({
  id: 'minor-roads',
  type: 'line',
  source: 'streets',
  'source-layer': 'road',
  filter: ['==', ['get', 'class'], 'secondary'],
  minzoom: 10,
  paint: {
    'line-width': [
      'interpolate',
      ['linear'],
      ['zoom'],
      10, 0.5,
      15, 3
    ]
  }
});

Система обеспечивает:

  • упрощение сцены на низком zoom
  • постепенное добавление деталей при увеличении масштаба

Зависимость символов от zoom

Масштаб текста

"text-size": [
  "interpolate",
  ["linear"],
  ["zoom"],
  3, 10,
  10, 14,
  16, 22
]

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

"text-opacity": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5, 0,
  7, 1
]

Избежание перегрузки

На низких zoom подписи часто скрываются, чтобы избежать:

  • наложения текстов
  • визуального шума
  • конфликтов при collision detection

Zoom и кластеризация данных

При работе с точечными данными zoom напрямую влияет на кластеризацию:

map.addSource('points', {
  type: 'geojson',
  data: 'points.geojson',
  cluster: true,
  clusterMaxZoom: 12,
  clusterRadius: 50
});

Поведение:

  • до clusterMaxZoom точки объединяются в кластеры
  • после — отображаются индивидуально

Это один из наиболее важных zoom-dependent механизмов.

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

Zoom определяет количество отрисовываемых объектов:

  • низкий zoom → меньше тайлов, но крупнее геометрия
  • высокий zoom → больше тайлов и деталей

Ключевые факторы:

  1. количество загруженных тайлов
  2. сложность геометрии
  3. количество символов и collision checks
  4. число активных слоёв

Zoom и масштабирование геометрии

Mapbox GL JS не масштабирует геометрию напрямую — вместо этого используются стили:

"circle-radius": [
  "interpolate",
  ["linear"],
  ["zoom"],
  0, 2,
  10, 6,
  18, 20
]

Это позволяет:

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

Условные выражения с zoom

match + zoom

"circle-color": [
  "interpolate",
  ["linear"],
  ["zoom"],
  0, "#2c3e50",
  10, "#e74c3c"
]

case + zoom

"icon-size": [
  "case",
  [">", ["zoom"], 12],
  1.5,
  1
]

Zoom как инструмент уровней детализации (LOD)

Zoom фактически реализует концепцию Level of Detail:

  • LOD0 — глобальные формы (континенты, страны)
  • LOD1 — города и крупные дороги
  • LOD2 — локальные улицы и здания
  • LOD3 — отдельные объекты инфраструктуры

Каждый слой карты строится с учётом этой шкалы.

Переходы между zoom уровнями

Mapbox GL JS автоматически интерполирует стили между zoom-уровнями, обеспечивая плавность:

  • изменение размеров
  • изменение прозрачности
  • появление/исчезновение объектов

Пример:

transition: {
  duration: 300,
  delay: 0
}

Хотя transition не привязан напрямую к zoom, он усиливает визуальный эффект zoom-переходов.

Композиция слоёв по zoom-логике

Правильная архитектура карты строится вокруг zoom-слоёв:

  • базовая карта (0–5)
  • региональные данные (5–10)
  • городская детализация (10–14)
  • микрообъекты (14+)

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

Ошибки при работе с zoom-зависимостью

Перегрузка выражений

Сложные выражения interpolate на каждом свойстве слоя могут ухудшить производительность.

Конфликт minzoom и filter

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

  • minzoom
  • filter с zoom

может приводить к неожиданным пропускам данных.

Чрезмерная детализация на низком zoom

Приводит к:

  • визуальному шуму
  • падению FPS
  • избыточной отрисовке символов

Zoom как центральная ось всей визуальной модели

Zoom в Mapbox GL JS — это не параметр камеры в классическом смысле, а фундаментальная переменная, управляющая:

  • семантикой данных
  • уровнем детализации
  • производительностью
  • визуальной плотностью сцены
  • поведением источников данных

Все стили, слои и источники фактически проектируются вокруг зависимости от масштаба.

Оглавление