panTo и panBy

Метод panTo в Leaflet предназначен для плавного перемещения центра карты в заданные координаты. Он работает на уровне карты и изменяет её текущий центр без изменения масштаба.

Сигнатура метода:

map.panTo(latlng, options);

Параметры:

  • latlng — целевая точка центра карты. Может быть задана как массив [lat, lng], объект L.LatLng или результат геокодирования.
  • options — необязательный объект параметров анимации.

Основные опции:

  • animate — включает или отключает анимацию перемещения (true / false)
  • duration — длительность анимации в секундах
  • easeLinearity — коэффициент плавности движения

Пример использования:

map.panTo([55.751244, 37.618423]);

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

Анимация с настройками:

map.panTo([48.8566, 2.3522], {
  animate: true,
  duration: 1.5,
  easeLinearity: 0.25
});

Поведение panTo в системе координат карты

Leaflet использует проекцию Web Mercator, поэтому при вызове panTo происходит пересчёт координат в пиксельное пространство. Внутри библиотеки выполняются следующие этапы:

  1. Преобразование географических координат в пиксельные координаты текущего zoom-уровня.
  2. Вычисление смещения между текущим центром и новой точкой.
  3. Смещение тайлового слоя на рассчитанную величину.
  4. Перерисовка видимой области карты.

Важно, что panTo изменяет только позицию центра, не затрагивая zoom.

Отличие panTo от мгновенного центрирования

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

  • panTo сохраняет текущий zoom
  • setView может одновременно изменить центр и масштаб
  • panTo чаще используется для плавных перемещений по карте

Пример сравнения:

map.setView([51.505, -0.09], 10); // изменит и центр, и масштаб
map.panTo([51.505, -0.09]);       // изменит только центр

Метод panBy: смещение карты на пиксельное расстояние

Метод panBy используется для смещения карты не по географическим координатам, а по пикселям. Он изменяет положение карты относительно текущего центра.

Сигнатура:

map.panBy(offset, options);

Параметры:

  • offset — массив [x, y], где:

    • x — смещение по горизонтали (в пикселях)
    • y — смещение по вертикали (в пикселях)

  • options — параметры анимации

Пример простого смещения:

map.panBy([100, 50]);

В этом случае карта сдвигается вправо на 100 пикселей и вниз на 50 пикселей.

Геометрия panBy в контексте тайловой системы

panBy работает исключительно в экранных координатах. Внутренне Leaflet:

  1. Берёт текущий центр карты в пикселях
  2. Добавляет смещение offset
  3. Пересчитывает новый центр в географические координаты
  4. Обновляет отображение тайлов

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

Анимация в panBy

Метод поддерживает те же параметры анимации, что и panTo:

map.panBy([200, 0], {
  animate: true,
  duration: 0.8
});

Анимация особенно заметна при больших смещениях, когда карта плавно «перетягивается» в заданную сторону.

Практическое различие между panTo и panBy

Оба метода изменяют центр карты, но используют разные системы координат:

  • panTo — географические координаты (широта/долгота)
  • panBy — экранные координаты (пиксели)

Это различие определяет сценарии применения:

panTo применяется, когда известна точка на карте:

map.panTo([40.7128, -74.0060]);

panBy применяется, когда нужно сдвинуть текущий вид:

map.panBy([0, -200]); // поднять карту вверх на 200 пикселей

Взаимодействие с границами карты

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

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

Пример установки ограничений:

map.setMaxBounds([
  [50, 30],
  [60, 40]
]);

map.panTo([55, 35]);

Если точка выходит за пределы, центр будет скорректирован.

Особенности работы с инерцией и пользовательским взаимодействием

Leaflet поддерживает инерционное перемещение карты при drag-событиях. При вызове panTo или panBy во время активного взаимодействия:

  • текущая анимация перезапускается
  • инерция пользователя прерывается
  • новое движение становится приоритетным

Это важно при программном управлении картой, например при навигации по результатам поиска.

Сочетание panTo и panBy в логике интерфейса

В сложных интерфейсах оба метода часто используются совместно:

  • panTo — переход к объекту (маркер, точка интереса)
  • panBy — корректировка положения для UI-элементов (всплывающие панели, боковые меню)

Пример компенсации интерфейса:

map.panTo([52.52, 13.405]);
map.panBy([0, -150]); // смещение для отображения панели снизу

Производительность и особенности рендеринга

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

  • перерисовываются только видимые тайлы
  • DOM-элементы слоёв сдвигаются через CSS transform
  • отсутствует полная перезагрузка карты

Это обеспечивает высокую производительность даже при частых вызовах panTo и panBy, например в анимациях или трекинге объектов в реальном времени.

Оглавление