Установка центра и масштаба

При работе с интерактивными картами двумя базовыми параметрами являются центр карты и уровень масштабирования (zoom).

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

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

Например:

[55.751244, 37.618423]

Это координаты Москвы.

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

Типичный диапазон масштабов:

Zoom Описание
0 Весь мир
2–4 Континенты
5–8 Страны и регионы
9–12 Города
13–16 Районы и улицы
17–19 Отдельные здания
20+ Максимальное приближение (зависит от тайлов)

В Leaflet центр и масштаб обычно задаются одновременно.

Метод setView()

Основной способ установки центра карты и масштаба — метод setView().

Синтаксис:

map.setView(latlng, zoom);

где:

  • latlng — координаты центра;
  • zoom — уровень масштабирования.

Пример:

const map = L.map('map');

map.setView([55.751244, 37.618423], 10);

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

Установка центра и масштаба при создании карты

Наиболее распространённый вариант — указание параметров сразу после создания объекта карты.

const map = L.map('map').setView(
    [55.751244, 37.618423],
    10
);

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

Полный пример:

<div id="map"></div>

<script>
const map = L.map('map').setView(
    [55.751244, 37.618423],
    10
);

L.tileLayer(
    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
        attribution: '&copy; OpenStreetMap'
    }
).addTo(map);
</script>

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

Координаты могут передаваться не только массивом, но и специальным объектом L.LatLng.

Создание объекта:

const center = L.latLng(
    55.751244,
    37.618423
);

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

map.setView(center, 10);

Эквивалентный вариант:

map.setView(
    L.latLng(55.751244, 37.618423),
    10
);

Метод setZoom()

Иногда требуется изменить только масштаб, сохранив текущий центр.

Для этого используется метод setZoom().

map.setZoom(12);

Пример кнопки увеличения масштаба:

button.addEventListener('click', () => {
    map.setZoom(15);
});

Текущий центр останется неизменным.

Метод setZoomAround()

Позволяет масштабировать карту относительно определённой точки.

Синтаксис:

map.setZoomAround(latlng, zoom);

Пример:

map.setZoomAround(
    [55.751244, 37.618423],
    15
);

В результате указанная точка останется на прежнем месте экрана во время изменения масштаба.

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

Метод panTo()

Для изменения только центра карты применяется метод panTo().

map.panTo([59.938955, 30.315644]);

Карта плавно переместится к Санкт-Петербургу, сохранив текущий масштаб.

Отличие от setView():

map.setView([59.938955, 30.315644], 10);

Здесь задаются одновременно и новый центр, и масштаб.

Метод flyTo()

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

Пример:

map.flyTo(
    [59.938955, 30.315644],
    12
);

Переход сопровождается анимацией изменения центра и масштаба.

Часто используется в:

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

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

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

const center = map.getCenter();

console.log(center);

Результат:

LatLng(55.751244, 37.618423)

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

const center = map.getCenter();

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

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

Метод:

map.getZoom();

Пример:

const zoom = map.getZoom();

console.log(zoom);

Результат:

10

Динамическое изменение центра и масштаба

Нередко координаты поступают из внешних источников:

  • базы данных;
  • API;
  • GPS-датчиков;
  • пользовательского ввода.

Пример:

fetch('/api/location')
    .then(response => response.json())
    .then(data => {
        map.setView(
            [data.lat, data.lng],
            data.zoom
        );
    });

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

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

Очень распространённый сценарий — перемещение карты к маркеру.

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

const marker = L.marker(
    [55.751244, 37.618423]
).addTo(map);

Переход к маркеру:

map.setView(
    marker.getLatLng(),
    14
);

Либо:

map.panTo(
    marker.getLatLng()
);

Перемещение при клике по объекту

Пример центрирования карты по щелчку на маркере:

marker.on('click', () => {
    map.flyTo(
        marker.getLatLng(),
        16
    );
});

После клика выполняется плавный переход к выбранному объекту.

Ограничение минимального и максимального масштаба

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

const map = L.map('map', {
    minZoom: 5,
    maxZoom: 18
});

Теперь пользователь не сможет выйти за установленные пределы.

Начальный масштаб и центр через параметры карты

Leaflet позволяет задавать некоторые настройки непосредственно в конструкторе карты.

Пример:

const map = L.map('map', {
    center: [55.751244, 37.618423],
    zoom: 10
});

Такой вариант полностью эквивалентен вызову setView() после создания карты.

Анимация изменения положения

Метод setView() поддерживает дополнительные параметры.

Пример:

map.setView(
    [55.751244, 37.618423],
    12,
    {
        animate: true
    }
);

Анимация делает переход более плавным и визуально понятным.

Изменение центра по координатам пользователя

Использование браузерной геолокации:

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

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

Работа с несколькими городами

Часто создаются кнопки для быстрого перехода между различными регионами.

const cities = {
    moscow: [55.751244, 37.618423],
    spb: [59.938955, 30.315644],
    kazan: [55.796127, 49.106414]
};

Переключение:

map.setView(cities.moscow, 10);

map.setView(cities.spb, 10);

map.setView(cities.kazan, 10);

Более удобный вариант:

function showCity(city) {
    map.flyTo(
        cities[city],
        12
    );
}

Событие изменения масштаба

Leaflet позволяет отслеживать изменение масштаба карты.

map.on('zoomend', () => {
    console.log(
        'Масштаб:',
        map.getZoom()
    );
});

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

Событие изменения центра

Для отслеживания перемещения используется событие moveend.

map.on('moveend', () => {
    const center = map.getCenter();

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

Событие возникает после завершения перемещения карты.

Практический пример

Ниже приведён типичный сценарий инициализации карты с установкой центра и масштаба:

const map = L.map('map', {
    center: [55.751244, 37.618423],
    zoom: 10,
    minZoom: 4,
    maxZoom: 18
});

L.tileLayer(
    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
        attribution: '&copy; OpenStreetMap'
    }
).addTo(map);

const marker = L.marker(
    [55.751244, 37.618423]
).addTo(map);

marker.on('click', () => {
    map.flyTo(
        marker.getLatLng(),
        16
    );
});

map.on('zoomend', () => {
    console.log(
        'Текущий масштаб:',
        map.getZoom()
    );
});

map.on('moveend', () => {
    console.log(
        'Центр:',
        map.getCenter()
    );
});

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

Оглавление