Центрирование карты

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

  • начальное позиционирование карты;
  • переход к нужному региону;
  • фокусировка на объектах;
  • навигация по данным;
  • синхронизация карты с пользовательским интерфейсом.

В MapLibre GL JS центр задаётся в виде массива:

[долгота, широта]

Например:

[37.6176, 55.7558]

Здесь:

  • 37.6176 — долгота (longitude);
  • 55.7558 — широта (latitude).

Важно помнить, что порядок координат соответствует формату GeoJSON и всегда записывается как:

[longitude, latitude]

Неверный порядок является одной из наиболее распространённых ошибок.

Указание центра при создании карты

Начальный центр задаётся через свойство center объекта конфигурации.

const map = new maplibregl.Map({
    container: 'map',
    style: 'style.json',
    center: [37.6176, 55.7558],
    zoom: 10
});

После загрузки карта сразу будет сфокусирована на Москве.

Свойство center обычно используется совместно с параметром масштаба:

const map = new maplibregl.Map({
    container: 'map',
    style: 'style.json',
    center: [2.3522, 48.8566],
    zoom: 12
});

В данном случае центральной точкой станет Париж.

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

Для получения текущих координат используется метод getCenter().

const center = map.getCenter();

console.log(center);

Результатом будет объект типа LngLat:

LngLat {
    lng: 37.6176,
    lat: 55.7558
}

Получение отдельных значений:

const center = map.getCenter();

console.log(center.lng);
console.log(center.lat);

Или:

const lng = map.getCenter().lng;
const lat = map.getCenter().lat;

Такая информация часто используется для:

  • отображения координат;
  • сохранения состояния карты;
  • синхронизации нескольких карт;
  • отправки данных на сервер.

Изменение центра через setCenter()

Самый простой способ переместить карту — воспользоваться методом setCenter().

map.setCenter([30.3351, 59.9343]);

После выполнения карта мгновенно переместится в Санкт-Петербург.

Пример с кнопкой:

<button id="move">Перейти</button>
document
    .getElementById('move')
    .addEventListener('click', () => {
        map.setCenter([30.3351, 59.9343]);
    });

Перемещение происходит без анимации.

Использование объекта LngLat

Метод setCenter() принимает не только массив координат, но и объект LngLat.

const point = new maplibregl.LngLat(
    37.6176,
    55.7558
);

map.setCenter(point);

Подход удобен при работе с API MapLibre GL JS, поскольку многие методы возвращают именно объекты LngLat.

Центрирование через jumpTo()

Метод jumpTo() позволяет одновременно изменить несколько параметров карты.

map.jumpTo({
    center: [37.6176, 55.7558],
    zoom: 12,
    bearing: 0,
    pitch: 0
});

Изменения применяются мгновенно.

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

Параметр Описание
center Новый центр
zoom Масштаб
bearing Поворот карты
pitch Наклон карты

Центрирование через easeTo()

Для плавного перемещения используется метод easeTo().

map.easeTo({
    center: [37.6176, 55.7558]
});

Карта плавно сместится к указанной точке.

Добавление времени анимации:

map.easeTo({
    center: [37.6176, 55.7558],
    duration: 3000
});

Здесь переход займёт три секунды.

Дополнительный пример:

map.easeTo({
    center: [37.6176, 55.7558],
    zoom: 14,
    duration: 2000
});

Одновременно изменяются центр и масштаб.

Центрирование через flyTo()

Метод flyTo() создаёт эффект полёта над картой.

map.flyTo({
    center: [37.6176, 55.7558]
});

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

Пример:

map.flyTo({
    center: [37.6176, 55.7558],
    zoom: 15,
    speed: 0.8
});

Настройки:

Параметр Назначение
center Целевой центр
zoom Конечный масштаб
speed Скорость полёта
curve Кривизна траектории
essential Пометка важной анимации

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

map.flyTo({
    center: [37.6176, 55.7558],
    zoom: 16,
    pitch: 60,
    bearing: 45,
    speed: 1.2
});

Центрирование по координатам маркера

Часто необходимо переместить карту к существующему объекту.

Создание маркера:

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

Переход к его координатам:

map.flyTo({
    center: marker.getLngLat()
});

Метод getLngLat() возвращает объект координат, который может использоваться напрямую.

Центрирование после клика по карте

Координаты точки клика доступны через объект события.

map.on('click', (event) => {
    map.flyTo({
        center: event.lngLat
    });
});

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

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

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

Центрирование по данным GeoJSON

Предположим, имеется объект:

const point = {
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [37.6176, 55.7558]
    }
};

Перемещение:

map.flyTo({
    center: point.geometry.coordinates
});

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

Центрирование после выбора элемента списка

Пример интерфейса со списком городов.

<ul>
    <li data-lng="37.6176" data-lat="55.7558">Москва</li>
    <li data-lng="30.3351" data-lat="59.9343">Санкт-Петербург</li>
</ul>

Обработка выбора:

document
    .querySelectorAll('li')
    .forEach(item => {

        item.addEventListener('click', () => {

            const lng = Number(
                item.dataset.lng
            );

            const lat = Number(
                item.dataset.lat
            );

            map.flyTo({
                center: [lng, lat],
                zoom: 12
            });

        });

    });

Подобная схема используется в каталогах объектов, справочниках и системах мониторинга.

Центрирование относительно текущего центра

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

const center = map.getCenter();

Смещение на восток:

map.setCenter([
    center.lng + 1,
    center.lat
]);

Смещение на север:

map.setCenter([
    center.lng,
    center.lat + 1
]);

Такой механизм применяется при реализации собственных кнопок навигации.

Проверка координат перед центрированием

Координаты желательно валидировать.

function moveTo(lng, lat) {

    if (
        lng < -180 ||
        lng > 180 ||
        lat < -90 ||
        lat > 90
    ) {
        return;
    }

    map.flyTo({
        center: [lng, lat]
    });

}

Проверка защищает приложение от ошибок и некорректных данных.

Центрирование после загрузки карты

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

map.on('load', () => {

    map.flyTo({
        center: [37.6176, 55.7558],
        zoom: 12
    });

});

Событие load гарантирует готовность стиля, источников и механизмов визуализации.

Сохранение центра карты

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

const center = map.getCenter();

Сохранение:

localStorage.setItem(
    'lng',
    center.lng
);

localStorage.setItem(
    'lat',
    center.lat
);

Восстановление:

const lng = Number(
    localStorage.getItem('lng')
);

const lat = Number(
    localStorage.getItem('lat')
);

map.setCenter([lng, lat]);

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

Отслеживание изменения центра

Во время перемещения карты возникает событие move.

map.on('move', () => {

    const center =
        map.getCenter();

    console.log(
        center.lng,
        center.lat
    );

});

Отслеживание используется для:

  • обновления адресной строки;
  • загрузки данных по текущей области;
  • отображения координат в интерфейсе;
  • синхронизации с другими компонентами приложения.

Центрирование с одновременным изменением масштаба

Наиболее распространённый сценарий:

map.flyTo({
    center: [37.6176, 55.7558],
    zoom: 14
});

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

Например:

function showObject(lng, lat) {

    map.flyTo({
        center: [lng, lat],
        zoom: 16,
        duration: 1500
    });

}

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

Типичные ошибки при центрировании

Перепутаны широта и долгота

Неверно:

center: [55.7558, 37.6176]

Верно:

center: [37.6176, 55.7558]

Передача строк вместо чисел

Неверно:

map.setCenter([
    "37.6176",
    "55.7558"
]);

Лучше явно преобразовывать значения:

map.setCenter([
    Number(lng),
    Number(lat)
]);

Попытка изменить карту до её создания

Неверно:

map.setCenter([37.6176, 55.7558]);

const map = new maplibregl.Map(...);

Верно:

const map = new maplibregl.Map(...);

map.setCenter([
    37.6176,
    55.7558
]);

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

Неверно:

map.setCenter([
    500,
    300
]);

Допустимые значения:

  • долгота: от -180 до 180;
  • широта: от -90 до 90.

Чрезмерно частые вызовы flyTo()

Нежелательно:

map.on('mousemove', (e) => {
    map.flyTo({
        center: e.lngLat
    });
});

Каждое движение курсора будет запускать новую анимацию, что приводит к серьёзному снижению производительности. Для подобных сценариев предпочтительнее использовать setCenter() либо ограничивать частоту вызовов через механизмы debounce и throttle.

Оглавление