Определение текущей позиции

В контексте MapLibre GL JS текущая позиция рассматривается в двух взаимосвязанных измерениях: состояние карты (camera state) и географическое положение устройства пользователя (geolocation). Оба аспекта определяют, какая область карты отображается и как она изменяется во времени.

Текущее состояние камеры карты

Камера карты в MapLibre GL JS описывает то, что пользователь видит в данный момент. Основные параметры текущей позиции камеры включают:

  • центр карты (center)
  • масштаб (zoom)
  • азимут/поворот (bearing)
  • наклон (pitch)

Эти параметры формируют полное описание текущего состояния отображения.

Получение текущего центра

Центр карты представляет собой координаты в формате [долгота, широта]:

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

Метод getCenter() возвращает объект LngLat, отражающий текущую географическую точку, находящуюся в центре экрана.

Текущий масштаб отображения

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

const zoom = map.getZoom();
console.log(zoom);

Значение zoom изменяется непрерывно и влияет на плотность отображаемых объектов.

Поворот и наклон камеры

MapLibre GL JS поддерживает 3D-ориентацию карты:

const bearing = map.getBearing();
const pitch = map.getPitch();
  • bearing — угол поворота карты относительно северного направления
  • pitch — наклон камеры относительно поверхности земли

Эти параметры важны при работе с навигационными и визуализационными сценариями.

Текущие границы видимой области

Для определения текущей области карты используется объект границ:

const bounds = map.getBounds();

Метод возвращает координаты юго-западного и северо-восточного углов:

  • bounds.getSouthWest()
  • bounds.getNorthEast()

Границы позволяют вычислять, какие данные должны быть загружены или отображены в текущем окне.

Изменение текущей позиции карты

Текущая позиция камеры может изменяться программно или интерактивно.

Установка центра

map.setCenter([37.6173, 55.7558]);

Плавное перемещение камеры

map.flyTo({
  center: [37.6173, 55.7558],
  zoom: 10,
  speed: 1.2
});

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

Отслеживание изменений текущей позиции

MapLibre GL JS предоставляет события, позволяющие реагировать на изменение состояния карты:

map.on('move', () => {
  const center = map.getCenter();
  const zoom = map.getZoom();
});

Событие move срабатывает при любом изменении камеры: панорамировании, зуме, вращении или наклоне.

Для более точного контроля используются дополнительные события:

  • moveend — завершение перемещения
  • zoom — изменение масштаба
  • rotate — изменение угла поворота
  • pitch — изменение наклона

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

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

navigator.geolocation.getCurrentPosition((position) => {
  const lng = position.coords.longitude;
  const lat = position.coords.latitude;
});

Этот источник данных не зависит от MapLibre GL JS, но часто используется совместно с картой.

Интеграция геопозиции с картой

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

navigator.geolocation.getCurrentPosition((position) => {
  map.setCenter([
    position.coords.longitude,
    position.coords.latitude
  ]);
});

Также возможно отслеживание перемещения в реальном времени:

navigator.geolocation.watchPosition((position) => {
  map.setCenter([
    position.coords.longitude,
    position.coords.latitude
  ]);
});

GeolocateControl как инструмент текущей позиции

MapLibre GL JS включает встроенный элемент управления для работы с геолокацией:

const geolocate = new maplibregl.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true
});

map.addControl(geolocate);

Функциональность контроллера:

  • определение текущего местоположения
  • автоматическое центрирование карты
  • отслеживание перемещения пользователя
  • отображение направления движения (в зависимости от устройства)

Синхронизация камеры и геопозиции

В сложных приложениях текущая позиция карты и устройства объединяются в единую модель состояния. Это позволяет:

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

Пример комбинированного подхода:

let userPosition = null;

navigator.geolocation.watchPosition((position) => {
  userPosition = [
    position.coords.longitude,
    position.coords.latitude
  ];

  map.easeTo({
    center: userPosition
  });
});

Особенности интерпретации текущей позиции

Текущая позиция в MapLibre GL JS не является единственным значением, а представляет собой совокупность параметров:

  • географический центр
  • масштаб
  • ориентация
  • наклон
  • границы отображения
  • положение устройства (при наличии геолокации)

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

Оглавление