Математические операции

В основе всех вычислений в Mapbox GL JS лежит переход между географическими координатами и экранной системой координат. Исходные данные представлены в виде пары значений долгота/широта (longitude/latitude), однако рендеринг выполняется в пикселях.

Ключевой объект, управляющий преобразованиями, — внутренний трансформ карты. Он поддерживает переход между системами координат:

  • географические координаты (WGS84)
  • координаты мира (projected world)
  • экранные пиксели (screen space)

Основные методы:

map.project([lng, lat])       // -> { x, y }
map.unproject({ x, y })       // -> [lng, lat]

Эти операции основаны на математическом преобразовании сферы в плоскость через проекцию Меркатора.

Меркаторная проекция и её математическая основа

Mapbox GL JS использует Web Mercator (EPSG:3857). Перевод широты выполняется через логарифмическую функцию:

[ y = (( + ))]

где:

  • ( ) — широта в радианах

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

[ x = ]

где:

  • ( ) — долгота в радианах

После нормализации результат масштабируется под размер тайлового мира.

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

Переход от координат мира к пикселям

Внутренняя система Mapbox GL JS использует world coordinates, где весь мир представлен квадратом 0–1 на нулевом зуме.

Масштабирование задаётся экспоненциально:

[ scale = 2^{zoom}]

Переход к пиксельным координатам:

[ pixel = worldCoordinate tileSize ^{zoom}]

где:

  • tileSize обычно равен 512 или 256
  • zoom — уровень увеличения карты

Таким образом, каждое увеличение зума удваивает количество деталей по каждой оси.

Экспоненциальная природа зума

Зум в Mapbox GL JS не является линейной величиной. Он описывает степень увеличения карты:

  • zoom = 0 → весь мир помещается в один тайл
  • zoom = 1 → 2×2 тайла
  • zoom = 2 → 4×4 тайла

Обобщённая зависимость:

[ N = 2^{zoom}]

где ( N ) — количество тайлов по одной оси.

Это влияет на:

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

Матрицы трансформации: поворот и наклон

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

  1. Меркаторная проекция
  2. Масштабирование
  3. Поворот (bearing)
  4. Наклон (pitch)
  5. Перевод в экранные координаты

Векторная форма:

[ P’ = M_{projection} M_{scale} M_{rotation} P]

Где матрица вращения по оси Z:

[ R_z() = ]

Поворот карты (bearing) — это вращение вокруг вертикальной оси, а наклон (pitch) добавляет перспективное искажение, влияющее на перспективное деление координат.

Математические выражения в Mapbox GL JS

Стили в Mapbox GL JS поддерживают expression syntax, представляющий собой функциональный стек операций.

Основные математические операторы:

  • ['+', a, b] — сложение
  • ['-', a, b] — вычитание
  • ['*', a, b] — умножение
  • ['/', a, b] — деление
  • ['^', a, b] — степень
  • ['%', a, b] — остаток

Пример вычисления:

[
  '*',
  ['zoom'],
  10
]

Значение зависит от уровня масштабирования карты.

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

Одним из ключевых математических механизмов является интерполяция.

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

[ f(t) = a + (b - a) t]

В Mapbox GL JS:

[
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 2,
  10, 20
]

Это означает плавное изменение значения от 2 до 20 при изменении зума от 5 до 10.

Также используется экспоненциальная интерполяция:

[ f(t) = a (b/a)^t]

Применяется для нелинейного масштабирования визуальных параметров.

Логические и условные математические конструкции

Mapbox expressions позволяют строить условные зависимости:

[
  'case',
  ['>', ['zoom'], 10],
  5,
  2
]

Это фактически дискретная функция:

[ f(z) = ]

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

Геометрические вычисления и расстояния

Для вычисления расстояний между координатами применяется формула гаверсинусов:

[ d = 2R ()]

где:

  • ( R ) — радиус Земли
  • ( ) — широта
  • ( ) — долгота

В контексте Mapbox GL JS такие вычисления часто выполняются через внешние библиотеки, но используются в логике кластеризации, фильтрации и анализа данных.

Цветовые математические операции

Цвета в Mapbox GL JS интерпретируются как числовые вектора:

[ RGBA = (r, g, b, a)]

В выражениях поддерживаются операции:

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

Пример:

[
  'interpolate',
  ['linear'],
  ['zoom'],
  0, 'rgba(0,0,255,0.5)',
  10, 'rgba(255,0,0,0.8)'
]

Фактически это векторная интерполяция в 4D пространстве цвета.

Зависимость свойств от зума как математическая функция

Любое стилевое свойство можно представить как функцию:

[ f(z, x, y) = value]

где:

  • ( z ) — zoom
  • ( x, y ) — экранные координаты

Например, радиус точки:

[
  'interpolate',
  ['exponential', 1.5],
  ['zoom'],
  5, 2,
  15, 20
]

Это степенная функция:

[ f(z) = a b^z]

Комбинирование математических операций в выражениях

Mapbox GL JS позволяет строить вложенные выражения, где результаты одной операции используются в другой:

[
  '*',
  ['+', ['zoom'], 1],
  ['/', ['get', 'population'], 1000]
]

Это композиция функций:

[ f(z, p) = (z + 1) ]

Такие конструкции используются для data-driven styling, где геометрия и данные объединяются в единую модель вычислений.

Пространственные преобразования в пользовательских слоях

При работе с кастомными слоями через WebGL API используются матрицы:

  • model matrix
  • view matrix
  • projection matrix

Итоговое преобразование:

[ MVP = P V M]

где:

  • M — модель (объект)
  • V — камера
  • P — проекция

Каждая вершина проходит через эту цепочку, превращаясь из географического пространства в экранное.

Векторные операции над геоданными

Векторные данные часто рассматриваются как наборы точек в многомерном пространстве:

  • сложение координат
  • масштабирование геометрии
  • линейные комбинации

Пример масштабирования:

[ (x’, y’) = s (x, y)]

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

Оглавление