Система координат

Географическая система координат (WGS84 / EPSG:4326)

В основе работы веб-карт лежит географическая система координат WGS84, стандартизированная как EPSG:4326. Она описывает положение точки на поверхности Земли через:

  • долготу (longitude) — ось X, диапазон от -180° до +180°
  • широту (latitude) — ось Y, диапазон от -85.0511° до +85.0511° (в контексте веб-карт)

В MapLibre GL JS входные географические координаты всегда задаются в формате:

[lng, lat]

Пример:

const point = [69.2401, 41.2995]; // Ташкент (пример)

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

Проекция Web Mercator (EPSG:3857)

Для отображения карты в браузере используется проекция Web Mercator (EPSG:3857). Она преобразует сферические координаты Земли в плоскую двумерную систему.

Особенности проекции:

  • меридианы и параллели становятся прямыми линиями
  • сохраняются углы (конформность)
  • искажаются площади на высоких широтах
  • север и юг ограничены примерно ±85.0511°

Преобразование из широты/долготы в координаты Web Mercator:

[ x = R ] [ y = R (( + ))]

где:

  • ( ) — долгота в радианах
  • ( ) — широта в радианах
  • ( R ) — радиус Земли (условный в Web Mercator)

Мировые координаты (World coordinates)

MapLibre GL JS внутри использует промежуточную систему — world coordinates.

В этой системе:

  • вся карта представляется как квадрат размером 1 × 1 при zoom = 0
  • при каждом увеличении zoom масштаб удваивается
  • координаты нормализованы в диапазон [0, 1] по оси плиточного мира

Принцип:

  • zoom 0 → 1 тайл (мир)
  • zoom 1 → 2×2 тайла
  • zoom 2 → 4×4 тайла
  • zoom n → 2ⁿ × 2ⁿ тайлов

Это напрямую связано с системой XYZ-тайлов.

Тайловая система XYZ

Карты в MapLibre GL JS состоят из квадратных тайлов фиксированного размера (обычно 256×256 пикселей).

Адрес тайла определяется тремя параметрами:

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

Формула количества тайлов:

[ n = 2^z]

Координаты тайла:

x ∈ [0, 2^z - 1]
y ∈ [0, 2^z - 1]

Особенность: ось Y направлена сверху вниз, что противоположно географической системе координат.

Масштабирование и уровень zoom

Zoom в MapLibre GL JS является логарифмической шкалой.

Каждое увеличение zoom на 1:

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

Разрешение на уровне zoom:

[ resolution(z) = ]

где 256 — размер тайла в пикселях.

Перевод между координатами и пикселями

MapLibre GL JS выполняет несколько преобразований:

1. lng/lat → world coordinates

Географическая точка сначала переводится в нормализованную мировую систему:

map.project([lng, lat]);

Результат:

{ x: number, y: number }

2. world coordinates → screen coordinates

Далее применяется камера (центр, zoom, bearing, pitch):

map.project([lng, lat]); // экранные пиксели

Экранная система:

  • начало координат: верхний левый угол canvas
  • ось X: вправо
  • ось Y: вниз

3. screen → lng/lat

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

map.unproject([x, y]);

Используется при обработке событий мыши:

map.on('click', (e) => {
  const coords = e.lngLat;
});

Антимеридиан и повторение мира

Web Mercator и MapLibre GL JS поддерживают бесшовное повторение мира по долготе.

Это означает:

  • карта повторяется каждые 360°
  • один и тот же объект может появляться несколько раз
  • долгота автоматически нормализуется

Механизм wrap:

lng = ((lng + 180) % 360) - 180

При работе с визуализацией данных важно учитывать дублирование объектов при пересечении ±180°.

Камера и трансформация координат

Система координат MapLibre GL JS тесно связана с понятием камеры, которая определяет:

  • центр карты
  • zoom
  • rotation (bearing)
  • наклон (pitch)

Любая точка мира преобразуется через матрицу трансформации:

[ P_{screen} = M_{camera} P_{world}]

Где ( M_{camera} ) включает:

  • масштабирование
  • поворот
  • смещение

Это делает MapLibre GL JS полноценным WebGL-движком, а не просто тайловым рендерером.

Переход к 3D и глобусной модели

В современных версиях MapLibre GL JS поддерживается альтернативная модель представления мира — globe projection.

В этом режиме:

  • мир отображается как сфера
  • координаты WGS84 проецируются на 3D-эллипсоид
  • исчезает искажение площади на полюсах
  • поведение координат становится сферическим, а не плоским

Сравнение моделей:

  • Web Mercator → плоская карта, высокая производительность
  • Globe → 3D сфера, более корректная геометрия

Практические особенности работы с координатами

Ограничение широты

Из-за особенностей Web Mercator:

lat ∈ [-85.0511, 85.0511]

Значения вне диапазона обрезаются.

Дробные координаты и точность

MapLibre GL JS работает с координатами double precision:

  • высокая точность позиционирования объектов
  • возможны микросмещения при больших zoom

Переполнение на высоких zoom

При zoom > 20 возможны:

  • округления в пиксельной системе
  • дрейф геометрии при сложных линиях
  • необходимость упрощения геометрии (simplification)

Использование координат в слоях

Координаты применяются в разных типах слоёв:

  • symbol — точки и подписи
  • line — линии (маршруты)
  • fill — полигоны
  • circle — точечная визуализация
  • custom — WebGL-рендер

Пример линии:

{
  type: "Feature",
  geometry: {
    type: "LineString",
    coordinates: [
      [69.24, 41.29],
      [69.28, 41.30]
    ]
  }
}

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

Перед рендерингом MapLibre GL JS:

  • нормализует координаты
  • разбивает длинные линии через antimeridian
  • оптимизирует полигоны для тайловой структуры

Это обеспечивает корректное отображение даже при глобальных данных.

Взаимодействие координат с событиями

Все пользовательские события возвращают координаты в формате:

map.on('mousemove', (e) => {
  console.log(e.lngLat); // { lng, lat }
});

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

  • point — экранные координаты
  • originalEvent — DOM-событие
  • features — объекты слоя под курсором
Оглавление