Работа с bearing

Параметр bearing в MapLibre GL JS определяет угол поворота карты относительно северного направления. Он задаёт ориентацию сцены вокруг вертикальной оси и позволяет изменять направление «севера» на экране, создавая эффект вращения карты.

=

Значение bearing измеряется в градусах, где:

  • 0° — север направлен вверх экрана
  • 90° — восток направлен вверх
  • 180° — юг вверх
  • -90° или 270° — запад вверх

В MapLibre GL JS угол увеличивается по часовой стрелке.

Установка bearing при инициализации карты

При создании экземпляра карты можно задать начальный угол поворота через параметр bearing.

const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [37.6173, 55.7558],
    zoom: 10,
    bearing: 30
});

Значение 30 означает, что карта будет повернута на 30° по часовой стрелке от северного направления.

Изменение bearing во время работы карты

Поворот карты можно изменять динамически с помощью метода setBearing.

map.setBearing(90);

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

Для более плавного изменения используется easeTo:

map.easeTo({
    bearing: 120,
    duration: 2000
});

Параметр duration задаёт время анимации в миллисекундах.

Получение текущего значения bearing

Текущее значение угла поворота можно получить через метод getBearing.

const currentBearing = map.getBearing();
console.log(currentBearing);

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

Ограничение диапазона вращения

MapLibre GL JS позволяет ограничивать вращение карты через maxBounds и параметры взаимодействия, но прямое ограничение bearing обычно реализуется через обработку событий или программное управление.

Пример ограничения угла:

map.on('rotate', () => {
    const bearing = map.getBearing();

    if (bearing > 60) {
        map.setBearing(60);
    }

    if (bearing < -60) {
        map.setBearing(-60);
    }
});

Такой подход фиксирует карту в диапазоне ±60°.

Интерактивное вращение карты

По умолчанию MapLibre поддерживает вращение с помощью:

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

Отключение вращения:

const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    interactive: true,
    dragRotate: false,
    touchZoomRotate: false
});

При отключении этих параметров карта становится фиксированной по направлению.

Использование bearing в анимациях камеры

Параметр bearing часто комбинируется с center, zoom и pitch для создания сложных анимаций камеры.

map.flyTo({
    center: [30.3351, 59.9343],
    zoom: 12,
    bearing: 180,
    pitch: 45,
    speed: 0.8
});

Такая конфигурация создаёт эффект пролёта с разворотом сцены.

Связь bearing с pitch и 3D сценой

При использовании наклона карты (pitch) значение bearing приобретает дополнительную визуальную значимость, поскольку сцена становится трёхмерной.

= (, )

  • bearing отвечает за вращение вокруг вертикальной оси
  • pitch — за наклон камеры

Вместе они формируют направление взгляда камеры в пространстве.

Синхронизация bearing с UI-компасом

Типичная задача — отображение компаса, который синхронизируется с картой.

map.on('rotate', () => {
    const bearing = map.getBearing();
    document.querySelector('.compass').style.transform =
        `rotate(${bearing}deg)`;
});

Таким образом UI-компас всегда соответствует ориентации карты.

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

MapLibre предоставляет метод resetNorth, который возвращает карту к северной ориентации.

map.resetNorth();

Для анимации:

map.resetNorth({ duration: 1000 });

Этот метод эквивалентен:

map.easeTo({ bearing: 0 });

Практические сценарии применения bearing

1. Навигационные приложения Ориентация карты по направлению движения пользователя.

2. 3D визуализация городов Создание эффекта «облёта» объектов.

3. Аналитические панели Сравнение данных в разных ориентациях карты.

4. Игровые карты Изменение направления взгляда в зависимости от действий игрока.

Привязка bearing к геолокации

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

navigator.geolocation.watchPosition((position) => {
    const heading = position.coords.heading;

    if (heading !== null) {
        map.setBearing(heading);
    }
});

Это создаёт эффект «карта поворачивается вместе с пользователем».

Комбинация bearing с ограничениями карты

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

const map = new maplibregl.Map({
    container: 'map',
    style: 'style.json',
    maxBounds: [
        [30, 50],
        [40, 60]
    ],
    bearing: 45
});

Особенности производительности при вращении

Поворот карты влияет на рендеринг, особенно при:

  • большом количестве слоёв
  • 3D моделях
  • тенях и источниках света

Оптимизация достигается через:

  • уменьшение количества сложных слоёв
  • использование raster тайлов вместо vector
  • ограничение частоты обновления bearing при анимациях

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

MapLibre генерирует событие rotate, которое вызывается при изменении угла.

map.on('rotate', () => {
    console.log(map.getBearing());
});

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

map.on('rotateend', () => {
    console.log('Rotation finished');
});

Программная синхронизация нескольких карт

Если несколько карт должны иметь одинаковую ориентацию:

mapA.on('rotate', () => {
    mapB.setBearing(mapA.getBearing());
});

Это полезно в аналитических интерфейсах и сравнительных визуализациях.

Влияние bearing на восприятие данных

Изменение угла поворота влияет на визуальное восприятие:

  • меняется направление маршрутов
  • изменяется читаемость подписей
  • смещается ориентация слоёв

Поэтому при проектировании интерфейсов часто фиксируют bearing в 0° или ограничивают его диапазон.

Использование инерции при вращении

MapLibre поддерживает инерционное вращение, которое создаёт плавное замедление после жеста пользователя. Это поведение зависит от параметров dragRotate и встроенной физики карты.

Итоговая модель поведения bearing в системе координат карты

(t) = _0 + _0^t () d

где:

  • ( _0 ) — начальный угол
  • ( ) — угловая скорость вращения
  • ( t ) — время

Эта модель отражает динамическое изменение ориентации карты в процессе взаимодействия пользователя или анимации камеры.

Оглавление