Автоматическое перемещение карты позволяет программно изменять положение камеры без непосредственного участия пользователя. Такой механизм используется для:
В Mapbox GL JS управление положением камеры реализовано через объект
карты (Map) и набор методов, отвечающих за изменение
координат центра, масштаба, угла наклона и вращения.
Под камерой понимается виртуальная точка наблюдения, определяющая текущее отображение карты.
Основные параметры камеры:
| Параметр | Описание |
|---|---|
center |
Центральная точка карты |
zoom |
Масштаб |
bearing |
Поворот карты |
pitch |
Наклон карты |
Получение текущего положения камеры:
const center = map.getCenter();
const zoom = map.getZoom();
const bearing = map.getBearing();
const pitch = map.getPitch();
console.log(center.lng, center.lat);Метод jumpTo() выполняет мгновенное изменение положения
камеры без анимации.
map.jumpTo({
center: [37.6176, 55.7558],
zoom: 12
});После выполнения карта сразу окажется в новой позиции.
Также можно изменять несколько параметров одновременно:
map.jumpTo({
center: [37.6176, 55.7558],
zoom: 14,
bearing: 45,
pitch: 60
});Особенности метода:
Для перемещения только центра карты используется метод
panTo().
map.panTo([37.6176, 55.7558]);Пользователь увидит плавное смещение карты к новой точке.
Настройка скорости:
map.panTo(
[37.6176, 55.7558],
{
duration: 3000
}
);Здесь перемещение занимает три секунды.
Параметр duration задается в миллисекундах.
map.panTo(
[37.6176, 55.7558],
{
duration: 5000
}
);Значения:
| Значение | Результат |
|---|---|
| 500 | Быстро |
| 1000 | Стандартно |
| 3000 | Медленно |
| 5000+ | Демонстрационный режим |
Чрезмерно большие значения могут создавать ощущение медленной работы интерфейса.
Метод easeTo() является одним из наиболее универсальных
способов автоматического перемещения.
Пример:
map.easeTo({
center: [37.6176, 55.7558],
zoom: 14
});Одновременно можно изменять:
map.easeTo({
center: [37.6176, 55.7558],
zoom: 15,
pitch: 60,
bearing: 90,
duration: 4000
});Результатом становится плавная анимация изменения положения камеры.
Скорость анимации может изменяться во времени с помощью функции
easing.
Линейное движение:
map.easeTo({
center: [37.6176, 55.7558],
duration: 3000,
easing: t => t
});Замедление в конце:
map.easeTo({
center: [37.6176, 55.7558],
duration: 3000,
easing: t => 1 - Math.pow(1 - t, 3)
});Ускорение и замедление:
map.easeTo({
center: [37.6176, 55.7558],
duration: 3000,
easing: t => t * t * (3 - 2 * t)
});Параметр t изменяется от 0 до 1 в процессе анимации.
Метод flyTo() имитирует полет камеры над картой.
map.flyTo({
center: [37.6176, 55.7558]
});Такой переход выглядит значительно эффектнее обычного смещения.
Пример:
map.flyTo({
center: [37.6176, 55.7558],
zoom: 15,
duration: 5000
});Во время анимации карта может:
Подобное поведение напоминает навигацию в геоинформационных системах и спутниковых сервисах.
Параметр curve влияет на траекторию движения камеры.
map.flyTo({
center: [37.6176, 55.7558],
curve: 1.5
});Малые значения:
curve: 1создают более прямолинейное движение.
Большие значения:
curve: 2.5делают траекторию более выразительной.
Для метода flyTo() доступны параметры скорости.
map.flyTo({
center: [37.6176, 55.7558],
speed: 0.8
});Также используется параметр:
screenSpeedПример:
map.flyTo({
center: [37.6176, 55.7558],
screenSpeed: 1.5
});Обычно применяется один из этих параметров.
Камеру можно автоматически поворачивать вокруг текущей точки.
map.easeTo({
bearing: 180,
duration: 4000
});Полный оборот:
map.easeTo({
bearing: 360,
duration: 8000
});Для непрерывного вращения часто используется цикл анимации.
let angle = 0;
function rotate() {
angle += 1;
map.rotateTo(angle, {
duration: 0
});
requestAnimationFrame(rotate);
}
rotate();Для изменения только угла поворота существует специализированный метод.
map.rotateTo(90);Плавное вращение:
map.rotateTo(
90,
{
duration: 3000
}
);Это удобнее, чем использовать easeTo(), когда необходимо
изменить исключительно параметр bearing.
Наклон камеры создает псевдотрехмерный эффект.
map.easeTo({
pitch: 60,
duration: 2000
});Возврат к обычному виду:
map.easeTo({
pitch: 0,
duration: 2000
});Комбинация наклона и поворота:
map.easeTo({
pitch: 70,
bearing: 120,
duration: 5000
});Такой прием часто используется при демонстрации 3D-зданий.
После выбора маркера карта может автоматически фокусироваться на нем.
marker.getElement().addEventListener('click', () => {
map.flyTo({
center: marker.getLngLat(),
zoom: 15
});
});Подобное поведение характерно для:
Координаты можно извлекать из данных GeoJSON.
const feature = geojson.features[0];
map.flyTo({
center: feature.geometry.coordinates,
zoom: 14
});Для точки (Point) координаты доступны напрямую через
поле coordinates.
Часто требуется перемещать карту вдоль заранее определенного пути.
Массив координат:
const route = [
[37.6176, 55.7558],
[30.3141, 59.9386],
[27.5615, 53.9023]
];Последовательный переход:
let index = 0;
function moveNext() {
if (index >= route.length) {
return;
}
map.flyTo({
center: route[index],
zoom: 10,
duration: 3000
});
index++;
setTimeout(moveNext, 3000);
}
moveNext();Получается автоматическая экскурсия по нескольким точкам.
Распространенная задача — отображение движущегося транспорта.
function updateVehicle(lng, lat) {
map.easeTo({
center: [lng, lat],
duration: 1000
});
}При поступлении новых координат карта будет следовать за объектом.
Иногда необходимо обновлять только центр.
map.easeTo({
center: [lng, lat],
zoom: map.getZoom()
});Текущий масштаб остается неизменным.
Mapbox GL JS позволяет ограничивать область отображения.
map.setMaxBounds([
[20, 40],
[60, 70]
]);После установки границ автоматическое перемещение не сможет выйти за допустимую территорию.
Любая активная анимация может быть остановлена.
map.stop();Пример:
map.flyTo({
center: [37.6176, 55.7558],
duration: 10000
});
setTimeout(() => {
map.stop();
}, 3000);Через три секунды движение прекратится.
Во время движения камеры генерируются события.
Начало перемещения:
map.on('movestart', () => {
console.log('Начало движения');
});Процесс движения:
map.on('move', () => {
console.log('Карта движется');
});Завершение:
map.on('moveend', () => {
console.log('Движение завершено');
});Эти события позволяют синхронизировать интерфейс с анимацией карты.
Начало масштабирования:
map.on('zoomstart', () => {
console.log('Масштабирование началось');
});Окончание:
map.on('zoomend', () => {
console.log('Масштабирование завершено');
});События полезны для динамической загрузки данных при изменении уровня приближения.
Наиболее впечатляющие анимации создаются путем одновременного управления несколькими параметрами камеры.
map.flyTo({
center: [37.6176, 55.7558],
zoom: 16,
pitch: 75,
bearing: 180,
duration: 8000
});Во время выполнения такого перехода происходят:
Подобная техника широко применяется в презентациях геоданных, интерактивных атласах, системах мониторинга и визуализации пространственной информации, обеспечивая плавное и наглядное перемещение между объектами на карте.