Получение координат

В веб-картах на базе Mapbox GL JS координаты являются центральным элементом взаимодействия с картой: каждая точка на экране может быть преобразована в географическую систему координат и обратно. Основная модель координат строится вокруг долготы и широты (longitude, latitude), которые представлены в объекте LngLat.

Географическая модель в Mapbox GL JS основана на стандарте WGS84. Координаты задаются в формате:

  • longitude (lng) — долгота, ось X
  • latitude (lat) — широта, ось Y

Внутренние методы библиотеки оперируют объектами вида:

{
  lng: 37.6173,
  lat: 55.7558
}

или экземплярами mapboxgl.LngLat.

Карта хранит текущее состояние через центр, границы и масштаб:

  • map.getCenter() — текущий центр карты
  • map.getBounds() — видимые границы
  • map.getZoom() — уровень масштаба

Получение координат по событию клика

Одним из наиболее распространённых способов получения координат является обработка события click.

Mapbox GL JS предоставляет объект события, содержащий поле lngLat.

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

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

Дополнительно доступны экранные координаты:

map.on('click', (e) => {
  console.log(e.point.x, e.point.y);
});

point представляет координаты в пикселях относительно контейнера карты.

Преобразование экранных координат в географические

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

const geo = map.unproject([event.point.x, event.point.y]);
console.log(geo.lng, geo.lat);

Этот механизм выполняет обратное преобразование из координат WebMercator в географические значения.

Преобразование географических координат в экранные

Обратная операция выполняется через project:

const point = map.project({ lng: 37.6173, lat: 55.7558 });
console.log(point.x, point.y);

Такая трансформация используется при позиционировании HTML-элементов поверх карты или при синхронизации внешних интерфейсов с картографическим слоем.

Отслеживание координат курсора

Событие mousemove позволяет получать координаты в реальном времени при перемещении указателя.

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

Этот механизм часто применяется для отображения динамических координат в интерфейсе или для интерактивных инструментов анализа.

Координаты центра карты

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

const center = map.getCenter();
console.log(center.lng, center.lat);

Изменение центра происходит через setCenter:

map.setCenter([37.6173, 55.7558]);

Координаты границ видимой области

Метод getBounds возвращает прямоугольную область, ограничивающую текущий экран карты.

const bounds = map.getBounds();

console.log(bounds.getNorthEast());
console.log(bounds.getSouthWest());

Границы используются для пространственных запросов, фильтрации данных и загрузки тайлов.

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

Интеграция с геолокацией осуществляется через GeolocateControl.

map.addControl(
  new mapboxgl.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true
    },
    trackUserLocation: true
  })
);

После активации контроль предоставляет координаты устройства в виде события:

map.on('geolocate', (e) => {
  console.log(e.coords.longitude, e.coords.latitude);
});

Этот механизм опирается на Web Geolocation API, а результаты синхронизируются с системой координат карты.

Получение координат маркера

Маркер (Marker) хранит собственное географическое положение, которое может динамически изменяться.

const marker = new mapboxgl.Marker()
  .setLngLat([37.6173, 55.7558])
  .addTo(map);

const coords = marker.getLngLat();
console.log(coords.lng, coords.lat);

При перетаскивании маркера включается режим draggable:

marker.setDraggable(true);

marker.on('dragend', () => {
  const position = marker.getLngLat();
  console.log(position);
});

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

При создании кастомных слоёв через custom layer или WebGL-рендеринг координаты преобразуются в матрицы проекций. Внутри render-функции доступен объект карты, позволяющий получать проекционные данные.

const center = map.getCenter();
const mercator = mapboxgl.MercatorCoordinate.fromLngLat(center);

MercatorCoordinate используется для низкоуровневого позиционирования объектов в 3D-пространстве.

Преобразования и точность координат

Координаты в системе WebMercator подвержены искажениям на высоких широтах. Поэтому при вычислениях важно учитывать:

  • нелинейность проекции
  • ограничение широты диапазоном ±85.0511°
  • потерю точности при высоком зуме

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

Событийная модель и поток координат

Координаты в Mapbox GL JS часто поступают как поток событий:

  • click
  • mousemove
  • drag
  • touchmove
  • contextmenu

Каждое событие содержит:

  • lngLat — географические координаты
  • point — экранные координаты
  • originalEvent — исходное DOM-событие
map.on('contextmenu', (e) => {
  const { lng, lat } = e.lngLat;
  const { x, y } = e.point;

  console.log(lng, lat, x, y);
});

Практика синхронизации координат с внешними системами

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

function normalize(lngLat) {
  return {
    longitude: Number(lngLat.lng.toFixed(6)),
    latitude: Number(lngLat.lat.toFixed(6))
  };
}

Это позволяет уменьшить объём данных и унифицировать формат хранения.

Также часто используется обратное преобразование из строк:

const coords = "37.6173,55.7558".split(',').map(Number);
map.setCenter(coords);

Ограничение координат в пределах области

Для фиксации взаимодействия внутри заданной зоны применяется setMaxBounds:

map.setMaxBounds([
  [36.0, 54.0],
  [38.0, 56.0]
]);

Это ограничивает перемещение камеры указанным прямоугольником.

Работа с координатами в Mapbox GL JS строится на связке событийной модели, математической проекции WebMercator и унифицированных объектов LngLat, обеспечивающих согласованное преобразование между экранным и географическим пространством.

Оглавление