Методы setCenter и setZoom

При работе с интерактивными картами часто возникает необходимость программно изменять положение карты и её масштаб. В библиотеке MapLibre GL JS для этих задач используются методы setCenter() и setZoom().

Метод setCenter() отвечает за изменение центральной точки карты, а setZoom() — за изменение уровня масштабирования. Эти методы позволяют мгновенно перемещать карту в нужный регион, отображать определённый объект, реагировать на действия пользователя или обновлять представление карты в зависимости от логики приложения.

Оба метода относятся к объекту Map.

Метод setCenter()

Синтаксис

map.setCenter(center);

Параметры

Параметр Тип Описание
center LngLatLike Новые координаты центра карты

В качестве аргумента обычно передаётся массив вида:

[longitude, latitude]

где:

  • longitude — долгота;
  • latitude — широта.

Пример:

map.setCenter([37.6176, 55.7558]);

После выполнения метода центр карты будет перемещён в Москву.

Простейший пример использования setCenter()

const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [0, 0],
    zoom: 2
});

map.setCenter([37.6176, 55.7558]);

После создания карты её центральная точка сразу изменяется.

Изменение центра по нажатию кнопки

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

HTML:

<button id="moscow">
    Москва
</button>

Jav * aScript:

document
    .getElementById('moscow')
    .addEventListener('click', () => {

        map.setCenter([37.6176, 55.7558]);

    });

Каждое нажатие на кнопку будет перемещать карту к заданным координатам.

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

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

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

map.setCenter(center);

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

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

Обычно изменение центра сопровождается чтением текущих координат.

const center = map.getCenter();

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

Результат:

37.6176
55.7558

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

Перемещение между несколькими городами

const cities = {
    moscow: [37.6176, 55.7558],
    london: [-0.1278, 51.5074],
    paris: [2.3522, 48.8566]
};

map.setCenter(cities.london);

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

Метод setZoom()

Синтаксис

map.setZoom(zoom);

Параметры

Параметр Тип Описание
zoom number Уровень масштабирования

Пример:

map.setZoom(10);

После вызова метода карта будет отображаться с масштабом 10.

Уровни масштабирования

Значение масштаба определяет степень приближения карты.

Типичные диапазоны:

Zoom Масштаб
0 Весь мир
2–4 Континенты
5–7 Страны
8–10 Регионы
11–13 Города
14–16 Районы
17–22 Улицы и здания

Точные значения могут отличаться в зависимости от используемого источника тайлов.

Простейший пример setZoom()

map.setZoom(12);

Карта мгновенно увеличится до двенадцатого уровня масштабирования.

Изменение масштаба через элементы управления

HTML:

<button id="zoomIn">
    Увеличить
</button>

<button id="zoomOut">
    Уменьшить
</button>

Jav * aScript:

document
    .getElementById('zoomIn')
    .addEventListener('click', () => {

        const zoom = map.getZoom();

        map.setZoom(zoom + 1);

    });

document
    .getElementById('zoomOut')
    .addEventListener('click', () => {

        const zoom = map.getZoom();

        map.setZoom(zoom - 1);

    });

В примере используется метод getZoom(), возвращающий текущий уровень масштабирования.

Получение текущего масштаба

const zoom = map.getZoom();

console.log(zoom);

Пример результата:

8.57

Следует учитывать, что MapLibre GL JS поддерживает дробные значения масштаба.

Использование дробного zoom

Метод позволяет задавать не только целые значения.

map.setZoom(7.5);

Это обеспечивает более плавную настройку отображения карты.

Совместное использование setCenter() и setZoom()

На практике оба метода часто применяются вместе.

map.setCenter([37.6176, 55.7558]);
map.setZoom(12);

После выполнения:

  • центр карты будет установлен на Москву;
  • масштаб увеличится до уровня города.

Переход к объекту на карте

Предположим, имеется информация о координатах выбранного объекта.

const place = {
    name: 'Красная площадь',
    coordinates: [37.6208, 55.7539]
};

map.setCenter(place.coordinates);
map.setZoom(16);

Карта будет сфокусирована на выбранной точке.

Навигация по результатам поиска

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

function showLocation(result) {

    map.setCenter([
        result.longitude,
        result.latitude
    ]);

    map.setZoom(14);

}

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

Создание функции перехода

Для исключения повторяющегося кода удобно создать отдельную функцию.

function goToLocation(lng, lat, zoom) {

    map.setCenter([lng, lat]);
    map.setZoom(zoom);

}

Использование:

goToLocation(
    37.6176,
    55.7558,
    12
);

Ограничения масштаба

Если для карты заданы минимальный и максимальный уровни масштабирования:

const map = new maplibregl.Map({
    container: 'map',
    style: styleUrl,
    minZoom: 3,
    maxZoom: 18
});

то вызов

map.setZoom(25);

не приведёт к фактическому увеличению масштаба выше значения 18.

Аналогично:

map.setZoom(1);

будет ограничен минимальным значением 3.

События после изменения центра и масштаба

Изменение центра через setCenter() вызывает события перемещения карты.

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

    console.log('Карта перемещена');

});

Изменение масштаба через setZoom() вызывает события масштабирования.

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

    console.log('Изменён масштаб');

});

Это позволяет синхронизировать карту с другими элементами интерфейса.

Обновление информации о состоянии карты

function updateInfo() {

    const center = map.getCenter();

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

}

map.on('moveend', updateInfo);
map.on('zoomend', updateInfo);

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

Различия между setCenter() и flyTo()

Метод setCenter() изменяет положение карты мгновенно.

map.setCenter([37.6176, 55.7558]);

Метод flyTo() выполняет анимированный переход.

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

Если требуется мгновенное обновление координат, предпочтителен setCenter(). Если важен визуальный эффект перемещения — используется flyTo().

Различия между setZoom() и easeTo()

Мгновенное изменение масштаба:

map.setZoom(12);

Плавное изменение масштаба:

map.easeTo({
    zoom: 12
});

Метод setZoom() подходит для технических операций и быстрого обновления состояния карты, тогда как easeTo() чаще применяется в пользовательских интерфейсах.

Одновременное изменение нескольких параметров через jumpTo()

Вместо отдельных вызовов можно использовать единый метод.

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

Функционально результат эквивалентен:

map.setCenter([37.6176, 55.7558]);
map.setZoom(12);

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

Практический пример: панель выбора города

const cities = {
    moscow: {
        center: [37.6176, 55.7558],
        zoom: 11
    },

    london: {
        center: [-0.1278, 51.5074],
        zoom: 11
    },

    paris: {
        center: [2.3522, 48.8566],
        zoom: 11
    }
};

function selectCity(cityName) {

    const city = cities[cityName];

    map.setCenter(city.center);
    map.setZoom(city.zoom);

}

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

Оглавление