Использование zoom в выражениях

В MapLibre GL JS масштаб карты (zoom) является одним из ключевых параметров, которые могут использоваться прямо внутри выражений стилей. Он позволяет динамически изменять визуализацию слоёв в зависимости от уровня приближения без пересоздания карты и без внешней логики JavaScript.

В выражениях стиля zoom представлен как специальный источник данных, доступный через выражение:

["zoom"]

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

Ключевая особенность: zoom не привязан к конкретному объекту данных, он глобален для всего слоя и пересчитывается при каждом изменении масштаба.

Базовая работа с [“zoom”]

Простейшее использование заключается в прямом сравнении или передаче значения в интерполяционные функции:

{
  "line-width": [
    "interpolate",
    ["linear"],
    ["zoom"],
    5, 1,
    10, 3,
    15, 8
  ]
}

В этом примере толщина линии изменяется плавно в зависимости от масштаба. При zoom 5 ширина равна 1, при zoom 10 — 3, при zoom 15 — 8.

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

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

Наиболее распространённый сценарий использования zoom — функция:

  • interpolate
  • exponential
  • linear

Пример экспоненциальной интерполяции:

{
  "circle-radius": [
    "interpolate",
    ["exponential", 1.5],
    ["zoom"],
    0, 1,
    8, 4,
    16, 20
  ]
}

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

Особенности поведения

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

Условная логика через step

Для дискретного изменения стилей используется конструкция step:

{
  "text-size": [
    "step",
    ["zoom"],
    10,
    10, 14,
    14, 18
  ]
}

Здесь:

  • zoom < 10 → размер текста 10
  • zoom ≥ 10 и < 14 → размер 14
  • zoom ≥ 14 → размер 18

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

Zoom как фактор видимости объектов

Хотя zoom не является фильтром в классическом смысле, он часто используется для управления видимостью через свойства layout:

{
  "layout": {
    "visibility": [
      "step",
      ["zoom"],
      "none",
      8, "visible"
    ]
  }
}

На низком масштабе слой скрыт, начиная с zoom 8 становится видимым.

Альтернативный подход — управление opacity:

{
  "line-opacity": [
    "interpolate",
    ["linear"],
    ["zoom"],
    6, 0,
    8, 1
  ]
}

Это создаёт эффект плавного появления слоя.

Zoom и типографика

Текстовые слои особенно чувствительны к масштабу. Типичная стратегия — комбинировать step и interpolate:

{
  "text-size": [
    "interpolate",
    ["linear"],
    ["zoom"],
    5, 10,
    10, 14,
    15, 22
  ]
}

Дополнительно масштаб влияет на:

  • text-letter-spacing
  • text-opacity
  • text-halo-width

Пример:

{
  "text-halo-width": [
    "interpolate",
    ["linear"],
    ["zoom"],
    10, 1,
    16, 3
  ]
}

На больших масштабах увеличивается читаемость за счёт усиления обводки.

Сложные композиции zoom с цветами и формами

Zoom может управлять не только геометрией, но и визуальными атрибутами:

{
  "fill-color": [
    "interpolate",
    ["linear"],
    ["zoom"],
    5, "#2c7bb6",
    10, "#abd9e9",
    15, "#fdae61"
  ]
}

Такой подход применяется для:

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

Zoom-dependent фильтрация через выражения

Хотя прямого фильтра zoom в filter нет, можно использовать логические конструкции:

[
  "case",
  [">=", ["zoom"], 10],
  ["==", ["get", "type"], "city"],
  ["==", ["get", "type"], "country"]
]

Здесь логика меняется в зависимости от масштаба: при большом zoom показываются города, при малом — страны.

Управление плотностью данных через zoom

При работе с большими наборами данных zoom используется для контроля плотности отображения:

{
  "circle-opacity": [
    "step",
    ["zoom"],
    0,
    6, 0.3,
    10, 0.8
  ],
  "circle-radius": [
    "interpolate",
    ["linear"],
    ["zoom"],
    6, 2,
    12, 6
  ]
}

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

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

Zoom и слои с высокой детализацией

Для сложных слоёв (дороги, здания, контуры) zoom используется для поэтапного раскрытия геометрии:

{
  "line-opacity": [
    "step",
    ["zoom"],
    0,
    8, 0.5,
    12, 1
  ]
}

Применяется стратегия уровней детализации:

  • 0–7: минимальный набор объектов
  • 8–11: средний уровень детализации
  • 12+: полная геометрия

Производительность и zoom-выражения

Использование zoom в выражениях напрямую влияет на производительность рендеринга:

  • выражения пересчитываются при каждом изменении масштаба
  • сложные interpolate увеличивают нагрузку на GPU
  • чрезмерное количество зависимых от zoom свойств замедляет переходы

Оптимизационные подходы:

  • минимизация количества выражений с zoom
  • использование step вместо interpolate там, где возможно
  • кэширование визуальных состояний через слои

Комбинация zoom и feature properties

Наиболее мощные стили получаются при сочетании zoom и данных фич:

{
  "circle-radius": [
    "interpolate",
    ["linear"],
    ["zoom"],
    5,
    ["+", 2, ["get", "weight"]],
    12,
    ["+", 10, ["get", "weight"]]
  ]
}

Здесь размер зависит одновременно от масштаба и атрибута объекта.

Многоуровневые зависимости zoom

В сложных стилях zoom используется как координата в многомерной функции:

  • zoom влияет на размер
  • zoom влияет на цвет
  • zoom влияет на видимость
  • zoom влияет на плотность данных

Пример комплексной модели:

{
  "circle-radius": [
    "interpolate",
    ["linear"],
    ["zoom"],
    4, 1,
    10, 6,
    16, 18
  ],
  "circle-opacity": [
    "interpolate",
    ["linear"],
    ["zoom"],
    4, 0.2,
    10, 0.8,
    16, 1
  ],
  "circle-color": [
    "interpolate",
    ["linear"],
    ["zoom"],
    4, "#74add1",
    10, "#4575b4",
    16, "#313695"
  ]
}

Такой подход формирует непрерывную визуальную эволюцию слоя при масштабировании карты.

Оглавление