Управление отображением панорамы

При отображении панорамы в плеере на нее автоматически добавляются стандартные элементы управления. С их помощью пользователи смогут изменить угол обзора на панораме или, например, открыть панораму в полноэкранном режиме. Элементы управления добавляются как на панорамы Яндекса, так и на собственные панорамы. При этом разработчик может явно указать, какие из элементов управления нужно добавить на панораму.

Примечание. API не позволяет изменять внешний вид элементов управления на панораме.

Кроме того, в API встроен ряд функций, с помощью которых можно управлять отображением панорамы на уровне программного кода. Плеер генерирует различные события, которым можно назначать/удалять функции-обработчики.

Элементы управления на панораме

По умолчанию на панораму добавляются следующие элементы управления:

Примечание. Ссылка «Открыть в Яндекс.Картах» отображается только на Яндекс.Панорамах. Этот элемент управления скрыть нельзя.

Задать набор элементов управления, которые будут добавлены на панораму, можно при создании экземпляра плеера (panorama.Player) в опции 'controls':

var player = new ymaps.panorama.Player('div_id', panorama, {
        // На панораме будут отображаться только ее название и 
        // ссылка «Открыть в Яндекс.Картах».
        controls: ['panoramaName']
    });

Список доступных ключей см. в справочнике.

Обратите внимание, что API не позволяет изменять внешний вид элементов управления.

Управление панорамой через программный код

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

setDirection

Устанавливает новое направление взгляда на панораме. Задается в формате [bearing, pitch], где bearing — азимут направления в градусах, pitch — угол подъема над линией горизонта в градусах. Подробнее см. в справочнике.

player.setDirection([10, 10]);
setSpan

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

player.setSpan([10, 10]);
lookAt

Устанавливает направление взгляда так, чтобы в центре поля зрения оказалась переданная точка.

player.lookAt([69.92620155262, 31.3111500947]);
moveTo

Ищет панораму по заданным параметрам и осуществляет переход на нее.

player.moveTo([59.9262015526, 30.3111500948], {
    // Пусть нужно перейти на воздушную панораму.
    layer: 'yandex#airPanorama'
});
Примечание. Чтобы перейти на воздушную панораму, необходимо указать опцию layer со значением 'yandex#airPanorama' (опцию нужно указывать даже в том случае, если текущая панорама, с которой осуществляется переход, является воздушной).

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

getPanorama

Возвращает панораму, которая на текущий момент открыта в плеере. Подробнее см. в справочнике.

var panorama = player.getPanorama();

// Теперь можно получить какую-нибудь информацию о панораме, например ее название.
// См. подробнее в Получение информации о панораме.
console.log("Название панорамы: " + panorama.getName());
getDirection

Возвращает текущее направление взгляда в формате [bearing, pitch], где bearing — азимут направления в градусах, pitch — угол подъема над линией горизонта в градусах. Подробнее см. в справочнике.

console.log(player.getDirection()); // например: 347.40000000000003,-14.590624999999983
getSpan

Возвращает текущий угол поля зрения. Подробнее см. в справочнике.

console.log(player.getSpan()); // например: 119.99999999999999,80

Получение информации о панораме

API предоставляет набор методов для получения информации о панораме (например, ее название или тип). Ниже приведены основные методы:

getName

Возвращает название панорамы.

console.log("Название панорамы: " + panorama.getName());
getLayer

Возвращает тип текущей панорамы.

console.log("Тип панорамы: " + panorama.getLayer());
// 'yandex#panorama' - наземная,
// 'yandex#airPanorama' - воздушная.

События плеера

Ниже приведен список событий, который генерирует плеер:

СобытиеОписание

'directionchange'

Изменилось направление взгляда.

'fullscreenenter'

Был включен полноэкранный режим.

'fullscreenexit'

Полноэкранный режим был выключен.

'panoramachange'

Сменилась панорама.

'spanchange'

Изменился угол поля зрения.

'destroy'

Плеер был закрыт или уничтожен с помощью метода panorama.Player.destroy.

'error'

В работе плеера возникла ошибка.

Для подписки на событие предназначена функция add(). Ниже приведен пример подписки на событие 'directionchange' для Яндекс.Панорамы:

// Ищем панораму в переданной точке.
ymaps.panorama.locate([55.733685, 37.588264]).done(
  function (panoramas) {
    // Убеждаемся, что найдена хотя бы одна панорама.
    if (panoramas.length > 0) {
      var player = new ymaps.panorama.Player('player', panoramas[0], {
            direction: [256, 16]
          });
      // Подписываемся на событие.
      player.events.add('directionchange', function () {
        console.log('Изменилось направление вглзяда');
      });
    }
  });

Для удаления подписки предназначена функция remove(). В качестве первого аргумента функции передается тип события, в качестве второго — ссылка на функцию-обработчик (но не сама функция-обработчик), которую необходимо удалить. Например:

function onError () {
  console.log("В работе плеера возникла ошибка.");
}

// Подписываемся на событие 'error'.
player.events.add('error', onError);
// Удаляем обработчик обработчик события.
player.events.remove('error', onError);

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

Управление с клавиатуры

Чтобы включить управление с клавиатуры, при создании плеера следует задать опцию hotkeysEnabled: true.
var player = new ymaps.panorama.Player('id_player', panorama, {
        hotkeysEnabled: true
    });

По умолчанию управление с клавиатуры выключено.

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

Ниже перечислены клавиши, которые использует плеер:

КлавишаДействие
+

Увеличить уровень масштабирования.

-

Уменьшить уровень масштабирования.

Стрелка вверх / пробел

Перейти вперед на связанную панораму.

Стрелка вниз

Перейти назад на связанную панораму.

Стрелка вправо

Повернуть направление взгляда вправо.

Стрелка влево

Повернуть направление взгляда влево.

PgUp

Посмотреть вверх.

PgDown

Посмотреть вниз.

EscapeЗакрыть плеер или выйти из полноэкранного режима.