Pano2VR и Google Maps API - Вычисление расстояния между узлами виртуального тура

Как с использованием Google Maps API вычислить и отобразить пользователю информацию о географическом расстоянии до определенного узла тура.

1 5 5.0 2

Вычисление расстояния между узлами виртуального тура Pano2VR

Изображение

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

Эту возможность я реализовал в новой версии тура Мозырь на все 360 градусов. При наведении на стрелку перехода (хотспот), отображается превью с названием локации, а также расстояние до неё от текущей локации. Это реализовано с помощью Google Maps API и, прочитав эту статью, вы узнаете, как это сделать.

Рисунок 1. Структура шаблона хотспота.

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

В оформлении тура (скине) необходимо предусмотреть текстовое поле для отображения расстояния. На рисунке 1 текстовое поле с ID "hotspot_node_text". В моем примере оно отображается в превью хотспота (рис. 2).

Экспорт тура необходимо произвести в формате HTML5. В примере используется версия Pano2VR 5.0.1.

Расстояние будет отображаться в том же текстовом поле, что и заголовок узла тура. На рис. 2 текстовое поле находится в низу элемента «Node Image». Поле содержит текстовую строку «<p class="hotspot-node-name">$hs</p>». Использование CSS класса позволит изменить дизайн текстового поля. Об этом будет чуть ниже.

Рисунок 2. Внешний вид хотспота.

В сценариях изображения, связанного с шаблоном активной зоны (стрелки) необходимо предусмотреть действия Set Value, обрабатывающие события Mouse Enter и Mouse Leave.

В событии Mouse Enter (курсор над объектом) в текстовое поле будет помещаться вышеуказанная строка, а в событии Mouse Leave (уход курсора с объекта) текстовое поле будет обнуляться.

Вы спросите, зачем нужно в каком-то действии вставлять такую же строку, какая уже введена в текстовом поле? Не лишние ли это действия?

Нет, действия не лишние. После экспорта тура данная строка будет модифицирована. В ней помимо заголовка будет вставляться и числовое значение расстояния.

Рисунок 3. Сценарии изображения (стрелки) хотспота.

Экспортируем тур и проверим, как работают хотспоты. Должно получиться что-то похожее, как на рис. 4.

Рисунок 4. Так выглядит превью хотспота в запущенном туре.

После завершения экспорта тура откроем в текстовом редакторе HTML-файл и подключим Google Maps API. Для этого после тега <body> добавим следующую строку.

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry">
</script>

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

Сохраним изменения в HTML-файле и откроем в текстовом редакторе файл skin.js.

Рисунок 5. Объявление новых переменных в файле skin.js

Над имеющимся исходным кодом объявим две переменные (рис. 5): selectedLatLng, которая будет хранить координаты выбранного узла по nodeId, связанного с хотспотом, и Distance, куда будет записан результат вычисления расстояния. Зададим первоначальное значение 0.

Рисунок 6. Добавление кода, отвечающего за вычисления

Затем перейдем к месту кода, где описана реализации события onmouseover (Рис. 6) и вставим следующие строчки кода.

//Определение координат выбранного узла
selectedLatLng = pano.getNodeLatLng(nodeId);
//Определение координат текущего узла
var currentLatLng = pano.getNodeLatLng(pano.getCurrentNode());
//Создание переменных класса LatLng для использования в качестве аргументов функции computeDistanceBetween
var latLngA = new google.maps.LatLng(selectedLatLng[0], selectedLatLng[1]);
var latLngB = new google.maps.LatLng(currentLatLng[0], currentLatLng[1]);
//Вычисление расстояния
Distance = google.maps.geometry.spherical.computeDistanceBetween(latLngA, latLngB);

Немного ниже нужно будет найти ту самую строку, о которой говорилось в начале статьи (рис. 7). В ней вместо $hs подставлено me.hotspot.title.

Рисунок 7. Реализация вставки заголовка узла в текстовое поле.

Добавим в найденную строку вывод значения расстояния,обернув его тегами <span> для управления стилями CSS (Рис. 8). Значение расстояния измеряется в метрах. Функция toFixed(0) выводит число с фиксированной точкой. В качестве аргумента указывается количество знаков после запятой. В моем примере выводится целое число, то есть без знаков после запятой.

Рисунок 8. Модифицированная строка вставки заголовка.

Сохраним изменения в файле skin.js и откроем страницу с виртуальным туром.

Рисунок 9. Так выглядит превью хотспота в запущенном туре после модификации.

Стили CSS для оформления строки вывода заголовка и расстояния выглядят. Их нужно подключить любым доступным способом: через CSS-файл или в секции <style> в теге <head>

.hotspot-node-name {
 font-family: Verdana,Arial,Helvetica,sans-serif; 
 font-size: 10px !important;
 margin: 4px 0 0 0;
 line-height: 11px; 
 letter-spacing: -1px;
}

.hotspot-node-name span {
 font-size: 13px !important;
 font-weight: bolder; 
 padding: 2px;
 margin: 0 3px 0 0;
 background: #4b4b4b;
 color: #ffffff;
}

На этом у меня все. Надеюсь, для вас я понятно расписал алгоритм вычисления и отображения расстояния. Думаю, у вас не возникнет трудностей с выполнением всех шагов. Совсем не обязательно делать на 100%, как делаю у меня, копируя мой стиль и дизайн. Главное, что я хотел донести до вас в данной статье, это принцип вычисления и отображения расстояния между двумя узлами тура. На любые вопросы по этой теме отвечу в комментариях ниже. До встречи в следующих статьях.

Встраивание карт и планов | Добавил: СЕРГЕЙ ДИШУК (03.02.2017)
433 | Теги: хотспот, Pano2VR4, Google Maps, Pano2VR, расстояние, API
Рейтинг: 5.0 / 2 | Оцените материал:

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

Об авторе статьи:

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

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

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


Недавние панорамы
Рубрикатор
Случайная панорама
Опрос
Как помогают Вам мои материалы по работе с Pano2VR?
Всего ответов: 2