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. Модифицированная строка вставки заголовка.

Если в туре встречаются расстояния более 1000 метров, то можно сделать преобразование значения в километры. Код будет иметь следующий вид.

if (Distance > 1000) {
 Distance = Distance / 1000;
 me._hotspot_node_text.ggText="<p class=\"hotspot-node-name\"><span>"+Distance.toFixed(1)+"km "+me.hotspot.title+"<\/p>";
 } 
 else {
 me._hotspot_node_text.ggText="<p class=\"hotspot-node-name\"><span>"+Distance.toFixed(0)+"m "+me.hotspot.title+"<\/p>";
 } 

Сохраним изменения в файле 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)
500 | Теги: хотспот, Pano2VR4, Google Maps, Pano2VR, расстояние, API
Рейтинг: 5.0 / 2 | Оцените материал:

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

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

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

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

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

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

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

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

Профиль на 360cities.net

Профиль на 1panorama.ru

Профиль на fotokto.ru

Профиль на photocentra.ru

Профиль на photosight.ru

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