Изучаем Pano2VR Javascript API. Часть 2.

Опрос:

Какой версией Pano2VR вы пользуетесь?
Всего ответов: 86
Вторая часть из цикла статей о Pano2VR Javascript API, в которой затронуты методы работы с узлами виртуального тура и хотспотами.
1 5 0.0 0

Изучаем Pano2VR Javascript API. Часть 2.

Изображение

В предыдущей статье цикла были рассмотрены методы взаимодействия с просмотром и управление полноэкранном режиме. Здесь будет рассмотрены методы работы с узлами виртуального тура и хотспотами. Некоторые методы из предыдущей статьи используются в демо-примерах. Рекомендую начать изучение Pano2VR JS API с первой статьи цикла.

Методы работы с узлами виртуального тура

pano.getNodeIds(): Array<String>;

Получение списка узлов. Метод возвращает результат в виде массива строк, например

["node1", "node2", "node3"]

pano.getNodeUserdata(id: String): Object;

Получение пользовательской информации, назначенной узлу. Если параметр id не указан, будет возвращена информация для текущего узла. Метод возвращает объект вида:

{
 author: "Автор (строка)",
 comment: "Комментарий (строка)",
 copyright: "Копирайт (строка)",
 customnodeid: "Пользовательский ID узла (строка)",
 datetime: "Дата и время (строка)",
 description: "Описание узла (строка)",
 information: "Информация (строка)",
 latitude: Широта (число),
 longitude: Долгота (число),
 source: "Источник (строка)",
 tags: ["Тег_1", "Тег_2", "Тег_3", "...", "Тег_N"],
 title: "Заголовок узла (строка)"
}

pano.getNodeLatLng(id: String): Object;

Получение местоположения для узла. Если параметр id не указан, будет возвращена информация для текущего узла. Метод возвращает объект с двумя полями (широта и долгота), например:

[52.05269994876664, 29.261403679847717]

Следующие примеры аналогичные:

//1
var node_lat = pano.getNodeLatLng()[0];
var node_lat = pano.getNodeLatLng()[1];
//2
var node_lat = pano.getNodeUserdata().latitude;
var node_lng = pano.getNodeUserdata().longitude;
//3
var user_data = pano.getNodeUserdata(); 
var node_lat = user_data.latitude;
var node_lng = user_data.longitude;

pano.getNodeTitle(id: String): String;

Получение заголовка для узла. Если параметр id не указан, будет возвращена информация для текущего узла. Метод возвращает строку, определенную в пользовательской информации (поле "title").

Следующие примеры аналогичные:

//1
var node_title = pano.getNodeTitle();
//2
var node_title = pano.getNodeUserdata().title;
//3
var user_data = pano.getNodeUserdata(); 
var node_title = user_data.title;

pano.nodeVisited(id: String):Boolean;

Получение информации о посещении узла. Если метод вернул true, был узел посещен. Если false – не был посещен.

pano.getCurrentNode(): String;

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

pano.getNextNode();

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

pano.getPrevNode();

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

pano.openNext(url: String, parameter: String);

Открывает указанный узел в туре. Параметр url принимает значение идентификатора открываемого узла, взятое в фигурные скобки. Второй параметр принимает строку формата "pan/tilt/fov", определяющую вид в открываемом узле.

pano.openNext("{node1}", "55.332/0/100");

Методы работы с хотспотами

pano.addHotspot(id: String, pan: Number, tilt: Number, div: DomElement);

Добавление хотспота в текущем узле.

//Создаем элемент хотспота
var hotspot = document.createElement("div");
//Назначаем ID для применения стилей CSS
hotspot.setAttribute("id", "hotspot");
//Добавляем на панораму
pano.addHotspot("Point01", 50, 0, hotspot);

Элемент hotspot имеет структуру:

<div id="hotspot"></div>

Внешний вид самого простого хотспота с изображением можно определить в правилах CSS, например, следующим образом:

#hotspot {
 position: absolute;
 top: 28px;
 left: -28px; 
 width: 55px;
 height: 55px;
 background: url(images/hotspot_default_image.png) 0 0 no-repeat;
 opacity: 0.8;
 cursor: pointer;
}

#hotspot:hover {
 opacity: 1;
}

pano.updateHotspot(id: String, pan: Number, tilt: Number);

Обновление положения хотспота (pan, tilt) в текущем узле.

pano.removeHotspot(id: String);

Удаление хотспота в текущем узле по его идентификатору.

pano.removeHotspots();

Удаление всех хотспотов в текущем узле.

pano.getPointHotspotIds(): Array<String>;

Получение списка хотспотов текущего узла. Метод возвращает массив строк с идентификаторами хотспотов.

pano.getHotspot(id: String): Object;

Получение информации о хотспоте по его индентификатору. Метод возвращает объект вида:

{
 id: "Point01", //ID хотспота 
 pan: "150", //Позиция по горизонтали
 tilt: "10", //Позиция по вертикали
 div: div //HTML-объект (DOM), описывающий
 //структуру и поведение хотспота
}

Примеры

В примерах назначение метода прописывается в событии "onclick" элемента управления (кнопки).

Более сложные конструкции функции, обрабатывающие длительные нажатия на элементы управления (кнопки) назначаются при помощи библиотеки jQuery.

Если кому-то нужен код на чистом Javascript, пишите в комментарии.

Демонстрационные примеры не оптимизированы под мобильные устройства. Рекомендуется просмотр в браузерах на ПК.

Конечно не всё из примеров можно использовать как что-то полноценное. Они лишь служат для демонстрации работы методов Pano2VR Javascript API. У меня есть несколько идей для создания элементов управления, которые можно будет использовать в панорамах или виртуальных турах. Как только они будут реализованы, я об этом напишу в соцсетях. До встречи в следующей заключительной части!

13.12.2018 | Редактор оформления (Skin editor) | Добавил: СЕРГЕЙ ДИШУК
557 | Теги: Виртуальный тур, javascript, API, Pano2VR, HTML5, Панорама, Оформление, skin editor
Рейтинг: 0.0 / 0 | Оцените материал:

Об авторе:

Сергей Дишук, фотограф-любитель. Снимает пейзажи, животных, репортажи различных городских мероприятий. Увлекается программированием и разработкой программного обеспечения. Занимается съемкой панорам и созданием виртуальных туров более 5-ти лет. Имеет опыт работы в программах Adobe Photoshop, Lightroom, PTGui, Pano2VR, Autopano, Panotour.

У Вас возникли вопросы по статье? Задайте их в комментариях ниже и получите развернутый ответ. Если данный материал не соответствует Вашему поисковому запросу, попробуйте воспользоваться поиском или найдите нужный материал в разделе статьи.

Поделиться в социальных сетях:

Возможно, вам будет интересно:

Комментарии:

Загляните в мои соцсети

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

Фотографии и панорамные изображения публикую на этих ресурсах:

Популярные страницы
Опрос
Как помогают Вам мои материалы по работе с Pano2VR?
Всего ответов: 13