В предыдущей статье цикла были рассмотрены методы взаимодействия с просмотром и управление полноэкранном режиме. Здесь будет рассмотрены методы работы с узлами виртуального тура и хотспотами. Некоторые методы из предыдущей статьи используются в демо-примерах. Рекомендую начать изучение Pano2VR JS API с первой статьи цикла.
Методы работы с узлами виртуального тура
pano.getIsTour();
Дополнено Определение, что просматривается в данный момент: тур или одиночная панорама. Метод возвращает true в случае, если открыт виртуальный тур.
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.getNodeDistance(fromId: String, toId: String):Number;
Дополнено Получение информации о расстоянии (в метрах) между текущим узлом и другим узлом при условии, что оба узла имеют данные GPS.
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 принимает значение идентификатора открываемого узла, взятое в фигурные скобки.
Помимо идентификатора открываемого узла аргумент может принимать одно из следующих значений:
- $(back) – идентификатор ранее посещенного узла;
- $(prev) – идентификатор предыдущего узла относительно текущего, основанный на порядке браузера тура;
- $(next) – идентификатор следующего узла относительно текущего, основанный на порядке браузера тура.
pano.openNext("{$(back)}");
pano.openNext("{$(next)}", "$(bwd)");
Второй аргумент принимает строку формата "pan/tilt/fov", определяющую вид в открываемом узле. Этот аргумент может быт опущен.
Также во втором аргументе можно указать одно из следующих значений для установки вида и положения панорамы:
- $(cur) – переход с сохранением текущего вида;
- $(fwd) – перехода с установкой вида панорамы по направлению перехода;
- $(bwd) – аналогично $(fwd) + разворот на 180°
pano.openNext("{node1}", "55.332/0/100");
pano.openNext("{node20}", "$(cur)");
pano.getNodesWithTag(tag: String)::Array;
Дополнено Получение массива узлов, у которых есть определенный тег в пользовательской информации.
pano.getLastVisitedNode(): String;
Дополнено Получение идентификатора последнего посещенного узла.
pano.setTransition(v: Object);
Дополнено Установка параметров перехода между узлами.
В качестве аргумента v передается объект со следующими свойствами:
- type – тип перехода строка (cut, crossdissolve, diptocolor, irisround, irisrectangular, wipeleftright, wiperightleft, wipetopbottom, wipebottomtop, wiperandom);
- before – эффект до число (0 – нет (none); 2 – приближение (zoomin));
- after – эффект после число (0 – нет (none); 2 – приближение (zoomin); 3 – отдаление (zoomout); 4 – полет (flyin))
- transitiontime – время перехода число;
- waitfortransition – если следует дождаться завершения перехода после завершения эффекта после логический: true/false;
- zoomedfov – угол обзора, если выбрано приближение/отдаление число;
- zoomspeed – скорость, если выбрано приближение/отдаление число;
- dipcolor – цвет для перехода типа diptocolor строка (Например, "0xffffff");
- softedge – смягчение границы число.
Пример:
new_transition = {
type: "cut",
before: 2,
after: 0,
transitiontime: 1,
waitfortransition: true,
zoomedfov: 20,
zoomspeed: 2
}
pano.setTransition(new_transition);
//Или в одну строку
pano.setTransition({ type: "cut", before: 2, after: 0, transitiontime: 1, waitfortransition: true, zoomedfov: 20, zoomspeed: 2 });
pano.getZoomCenterCursor();
Дополнено Определение, включено ли зуммирование в позиции курсора / щипка (true / false).
pano.setZoomCenterCursor(value: Boolean);
Дополнено Включение/отключение зуммирование в позиции курсора / щипка.
Методы работы с хотспотами
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.getCurrentPointHotspots():Array;
Дополнено Получение списка хотспотов текущего узла. Метод возвращает массив div-элементов хотспотов.
pano.getHotspot(id: String): Object;
Получение информации о хотспоте по его индентификатору. Метод возвращает объект вида:
{
id: "Point01", //ID хотспота
pan: "150", //Позиция по горизонтали
tilt: "10", //Позиция по вертикали
div: div //HTML-объект (DOM), описывающий
//структуру и поведение хотспота
}
pano.getPolygonMode(): Number;
Дополнено Получение текущего режима полигональной зоны.
pano.setPolygonMode(v: Number, toggle: Number);
Дополнено Установка текущего режима полигональной зоны. Если toggle = 1, он переключается между Off и режимом v.
pano.showOnePolyHotspot(id: String);
Дополнено Отображение конкретной полигональной зоны.
pano.hideOnePolyHotspot(id: String);
Дополнено Скрытие конкретной полигональной зоны.
pano.toggleOnePolyHotspot(id: String);
Дополнено Переключение между отображением / скрытием конкретной полигональной зоны.
pano.changePolyHotspotColor(id: String, bgColor: Number, bgAlpha: Number, borderColor: Number, borderAlpha: Number);
Дополнено Установка фона и цвета границы определенной полигональной зоны.
Параметры:
- id – идентификатор полигональной зоны;
- bgColor – цвет фона;
- bgAlpha – прозрачность фона.
- borderColor – цвет границы;
- borderAlpha – прозрачность границы.
Примеры
В примерах назначение метода прописывается в событии "onclick" элемента управления (кнопки).
Более сложные конструкции функции, обрабатывающие длительные нажатия на элементы управления (кнопки) назначаются при помощи библиотеки jQuery.
Если кому-то нужен код на чистом Javascript, пишите в комментарии.
Демонстрационные примеры не оптимизированы под мобильные устройства. Рекомендуется просмотр в браузерах на ПК.
Конечно не всё из примеров можно использовать как что-то полноценное. Они лишь служат для демонстрации работы методов Pano2VR Javascript API. У меня есть несколько идей для создания элементов управления, которые можно будет использовать в панорамах или виртуальных турах. Как только они будут реализованы, я об этом напишу в соцсетях. До встречи в следующей заключительной части!