FlyTo и его параметры

Метод flyTo() предназначен для плавного перемещения камеры карты к новой точке с одновременным изменением масштаба, наклона и поворота. В отличие от мгновенного перехода через jumpTo() и простой анимации через easeTo(), алгоритм flyTo() имитирует эффект полёта над картой, автоматически рассчитывая траекторию движения камеры.

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

Базовый синтаксис:

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

После вызова метода карта плавно переместится к указанным координатам.

Общая структура параметров

Метод принимает объект настроек:

map.flyTo({
    center: [37.6176, 55.7558],
    zoom: 12,
    bearing: 45,
    pitch: 60,
    duration: 5000
});

Наиболее часто используются следующие параметры:

Параметр	Назначение
`center`	Новые координаты центра карты
`zoom`	Новый уровень масштабирования
`bearing`	Угол поворота карты
`pitch`	Наклон карты
`duration`	Длительность анимации
`speed`	Скорость полёта
`curve`	Кривизна траектории
`easing`	Пользовательская функция плавности
`essential`	Признак важной анимации
`offset`	Смещение центра относительно экрана
`maxDuration`	Ограничение максимальной длительности

Параметр `center`

Определяет координаты точки назначения.

map.flyTo({
    center: [30.3141, 59.9386]
});

Формат:

[lng, lat]

где:

lng — долгота;
lat — широта.

Пример перелёта в Нью-Йорк:

map.flyTo({
    center: [-74.0060, 40.7128]
});

Также допускается использование объекта LngLat.

map.flyTo({
    center: new maplibregl.LngLat(-74.0060, 40.7128)
});

Параметр `zoom`

Позволяет одновременно изменить масштаб карты.

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

Типичные уровни масштабирования:

Zoom	Область просмотра
0	Весь мир
3	Континент
6	Страна
10	Город
14	Район
18	Улица
22	Максимальное приближение

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

Параметр `bearing`

Управляет поворотом карты.

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

Значения:

Угол	Направление
0	Север сверху
90	Восток сверху
180	Юг сверху
270	Запад сверху

Пример:

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

Во время перелёта карта плавно развернётся на 180 градусов.

Параметр `pitch`

Устанавливает наклон камеры.

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

Диапазон обычно составляет:

0 – 85 градусов

Значения:

Pitch	Эффект
0	Вид строго сверху
30	Небольшой наклон
45	Перспективный вид
60	Выраженный объём
80+	Почти горизонтальный взгляд

Пример:

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

Получается эффект облёта города.

Параметр `duration`

Определяет длительность анимации в миллисекундах.

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

В данном случае анимация будет длиться:

4 секунды

Примеры:

duration: 1000

Быстрый перелёт.

duration: 3000

Стандартная анимация.

duration: 10000

Медленный демонстрационный полёт.

Параметр `speed`

Управляет относительной скоростью перемещения.

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

Значение по умолчанию близко к:

1.2

Примеры:

speed: 0.5

Медленное движение.

speed: 1.2

Стандартное движение.

speed: 3

Очень быстрое перемещение.

Следует учитывать, что скорость влияет на вычисляемую продолжительность анимации.

Параметр `curve`

Определяет форму траектории полёта.

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

Стандартное значение:

1.42

Меньшие значения делают движение более прямолинейным.

curve: 1

Большие значения усиливают эффект подъёма и погружения камеры.

curve: 3

Визуально создаётся впечатление высокого облёта местности.

Связь между `curve` и `speed`

Эти параметры работают совместно.

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

Результат:

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

Для интерфейсных задач обычно достаточно настроек по умолчанию.

Параметр `easing`

Позволяет использовать собственную функцию плавности.

Стандартный пример:

map.flyTo({
    center: [37.6176, 55.7558],
    easing: t => t
});

Линейное движение.

Ускорение в начале:

map.flyTo({
    center: [37.6176, 55.7558],
    easing: t => t * t
});

Замедление в конце:

map.flyTo({
    center: [37.6176, 55.7558],
    easing: t => 1 - Math.pow(1 - t, 2)
});

S-образная кривая:

map.flyTo({
    center: [37.6176, 55.7558],
    easing: t => t * t * (3 - 2 * t)
});

Аргумент функции изменяется от:

0 → 1

где:

0 — начало анимации;
1 — завершение.

Параметр `offset`

Позволяет сместить целевую точку относительно центра экрана.

Пример:

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

В результате объект окажется левее геометрического центра карты.

Смещение задаётся в пикселях:

offset: [x, y]

где:

x — горизонтальное смещение;
y — вертикальное смещение.

Пример для боковой панели:

map.flyTo({
    center: coordinates,
    offset: [300, 0]
});

Объект остаётся видимым после открытия панели интерфейса.

Параметр `essential`

Связан с настройками доступности браузера.

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

Если пользователь включил уменьшение анимаций в операционной системе, некоторые анимации могут быть отключены.

Флаг:

essential: true

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

Параметр `maxDuration`

Ограничивает максимально допустимое время анимации.

map.flyTo({
    center: [139.6917, 35.6895],
    maxDuration: 5000
});

Даже если расчётная длительность окажется больше, MapLibre ограничит её указанным значением.

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

Комбинирование параметров

На практике обычно изменяются сразу несколько характеристик камеры.

Пример кинематографического перелёта:

map.flyTo({
    center: [2.3522, 48.8566],
    zoom: 16,
    pitch: 70,
    bearing: 120,
    duration: 6000
});

Во время анимации одновременно происходят:

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

Перелёт между маркерами

Частый сценарий — переход к выбранному объекту.

marker.getElement().addEventListener("click", () => {
    map.flyTo({
        center: marker.getLngLat(),
        zoom: 15
    });
});

После нажатия карта плавно переместится к маркеру.

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

function goToPlace(place) {
    map.flyTo({
        center: place.coordinates,
        zoom: 14,
        duration: 2500
    });
}

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

Последовательные перелёты

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

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

map.once("moveend", () => {
    map.flyTo({
        center: [30.3141, 59.9386],
        duration: 3000
    });
});

Так формируется маршрут обзора нескольких объектов.

События во время работы `flyTo()`

Начало движения:

map.on("movestart", () => {
    console.log("Начало перелёта");
});

Завершение:

map.on("moveend", () => {
    console.log("Перелёт завершён");
});

Во время движения:

map.on("move", () => {
    console.log("Карта перемещается");
});

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

Сравнение с другими методами перемещения

`jumpTo()`

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

Мгновенный переход без анимации.

`easeTo()`

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

Плавное перемещение по простой траектории.

`flyTo()`

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

Сложная траектория движения с эффектом воздушного перелёта.

Метод	Анимация	Эффект полёта
`jumpTo()`	Нет	Нет
`easeTo()`	Да	Нет
`flyTo()`	Да	Да

Практические рекомендации

Для большинства интерфейсов хорошо подходят следующие параметры:

map.flyTo({
    center: coordinates,
    zoom: 14,
    duration: 2500
});

Для демонстрационных сцен и 3D-карт:

map.flyTo({
    center: coordinates,
    zoom: 17,
    pitch: 70,
    bearing: 180,
    duration: 6000,
    curve: 2.2
});

Для быстрого перемещения между объектами:

map.flyTo({
    center: coordinates,
    zoom: 13,
    speed: 2.5,
    maxDuration: 1500
});

Метод flyTo() является основным инструментом создания плавной навигации в MapLibre GL JS, позволяя управлять практически всеми параметрами камеры и формировать визуально естественные переходы между различными областями карты.

FlyTo и его параметры

Общая структура параметров

Параметр center

Параметр zoom

Параметр bearing

Параметр pitch

Параметр duration

Параметр speed

Параметр curve

Связь между curve и speed

Параметр easing

Параметр offset

Параметр essential

Параметр maxDuration

Комбинирование параметров

Перелёт между маркерами

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

Последовательные перелёты

События во время работы flyTo()

Сравнение с другими методами перемещения

jumpTo()

easeTo()

flyTo()

Практические рекомендации

Параметр `center`

Параметр `zoom`

Параметр `bearing`

Параметр `pitch`

Параметр `duration`

Параметр `speed`

Параметр `curve`

Связь между `curve` и `speed`

Параметр `easing`

Параметр `offset`

Параметр `essential`

Параметр `maxDuration`

События во время работы `flyTo()`

`jumpTo()`

`easeTo()`

`flyTo()`