Встраивание в оформление проекта Pano2VR карты Google

 Работа в Pano2VR | Встраивание карт и планов
 17.03.2016    18:10    6.6k    22.09.2017
 Время на чтение: ...    Комментировать    Напечатать
Содержание статьи
 Пользователи Pano2VR

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

 Нас уже ...
Как добавить в интерфейс панорамы или виртуального тура карту Google Map, а также кастомизировать её под карту OpenStreetMap.

Встраивание в оформление проекта Pano2VR карты Google

Изображение

Если вы попали сюда в поисках ответа, как загрузить панорамные изображения на сервис Google Street View, его вы можете найти в этой статье.

В своей прошлой статье я описывал процесс создания карты для навигации по местности. Для создания такой карты понадобилось дополнительное время, чтобы создать её изображение в графическом редакторе. В этой статье будет использовано уже готовое решение – спутниковые карты Google Maps. При этом формат экспорта панорамы (тура) должен быть HTML5.

Если вы используете Pano2VR версии 5 и выше, то обратите внимание на элемент оформления Map (Карта).

Перед тем как добавлять карту в оформление панорамы необходимо определить географические координаты места съемки. Их нужно указать в окне "User Data" (Пользовательские метаданные) (рис. 1). Также понадобится определить направление на север для точности работы "радара" на карте. Если геоданные были "вшиты" в файл изображения панорамы, значения для полей Latitude (Широта) и Longitude (Долгота) поля будут взяты из геоданных автоматически. В противном случае нужно указать их вручную или воспользоваться кнопкой с красным маркером, расположенной справа от поля Latitude (Широта). Как установить местоположение точки съемки я описывал в этой статье.

Рисунок 1. Редактор пользовательских метаданных.

Мое изображение не содержало геотегов. Поэтому установку местоположения точки съемки я определил по карте, найдя на в режиме "Спутник" на ней знакомые объекты. Ориентирование на север я делал по второму способу, указывая направление на объект (рис. 2).

Рисунок 2. Установка местоположения.

После того как местоположение установлено, можно переходить к следующему этапу. Экспортируем проект в формате HTML5. В опциях HTML активируем переключатель "Include Google Maps" (рис. 3). Это добавить в исходный код страницы скрипт, для загрузки и управления картой.

Рисунок 3. Экспорт в HTML5.

Карта Google при этом будет находиться под панорамой. Однако это не то, что нужно. Сделаем так, чтобы карта находилась в оформлении и появлялась по запросу пользователя.

В папке экспорта (рис. 4) найдем html-файл и откроем его в текстовом редакторе.

Рисунок 4. Папка экспорта.

Прокрутим текст кода примерно до середины страницы. Интерес представляет строка "<div id="mapdiv"...>" (рис. 5). Скопируем эту строку и удалим её из файла. Также удалим ненужный тег "<hr>".

Рисунок 6. Исходный код HTML-файла

Рисунок 5. Исходный код HTML-файла.

После всех действий должно остаться так, как показано на рис. 6. Сохраним проделанные изменения.

Рисунок 6. Исходный код HTML-файла после правки

Рисунок 6. Исходный код HTML-файла после правки.

В редакторе оформления нужно создать элемент, который будет отображать карту Google. Для этого я добавил в оформление прямоугольник (ID: "map") размерами 500x360 пикселей, на котором разместил два текстовых поля (рис. 7). Первое поле будет служить холстом для карты, а второе будет заголовком. Нажатие на заголовок будет отображать или скрывать карту за пределы панорамы.

Рисунок 7. Элемент для отображения карты.

В текстовом поле (ID: "map_display"), которое служит холстом для карты, находится скопированная ранее строка. Значения width и height изменены в соответствии с размерами текстового поля (рис. 8).

Рисунок 8. Свойства текстового поля.

Теперь определимся с тем, где будет находиться карта. Местом расположения карты я выбрал центр у верхней границы. Чтобы выровнять элемент по центру холста по горизонтали нужно от ширины холста вычесть ширину элемента и полученное значение разделить на два. Это будет координата X: (640−500)/2 = 70. Значение Y зададим равным −330, чтобы прямоугольник, на котором находится карта, оказался выше верхней границы на указанное значение (рис. 9). Видимой будет нижняя часть прямоугольника высотой 30 пикселей и содержащая заголовок (рис. 10).

Рисунок 9. Настройка положения элемента.

Чтобы карта всегда оставалась в центре при изменении размера или масштаба страницы, я установил соответствующий якорь привязки.

Рисунок 10. Расположение элемента с картой на холсте.

Отображение и сокрытие карты будет реализовано с помощью действия "Toggle Element Position". Это действие будет вызываться по нажатию кнопки мыши ("Mouse Click") на текстовое поле, служащее заголовком (ID: "caption"). Первое нажатие изменить положение элемента "map" на 330 пикселей по оси Y вниз. При этом карта плавно "выедет" из-за границы. Повторное нажатие на вернет положение элемента «map» в исходное. Чтобы добавить действие нужно выполнить двойное нажатие кнопки мыши на пустой строке списка в группе Actions (Действия). После этого появится окно, показанное на рис. 11.

Рисунок 11. Создание действия.

Сохраним изменения в оформлении и экспортируем проект повторно. После экспорта просмотрим его работу в браузере, воспользовавшись кнопкой "Open output file" (Открыть экспортированный файл) (рис. 12).

Рисунок 12. Сведения об экспорте.

В отличие от файлов flash, просмотр проекта HTML5 не возможен без сервера. И если просто открыть экспортированный html-файл в браузере, то ничего не будет работать. Просмотр работает при помощи встроенного в программу Pano2VR сервера (рис. 13).

Рисунок 13. Проверка экспортированного проекта

Рисунок 13. Проверка экспортированного проекта.

Если вас не устроит вид радара, его параметры можно изменить. Для этого находим в исходном коде html-файла строки с описанием параметров радара и устанавливаем их значения, которые нужны вам.

// show radar
radar = new google.maps.Polygon({
 paths: radar_poly,
 strokeColor: "#ff0000",
 strokeOpacity: 0.8,
 strokeWeight: 2,
 fillColor: "#ff0000",
 fillOpacity: 0.35
});

На рис. 14 показан вид радара с параметрами, определенными в вышеуказанном коде. Пояснение параметров:

  • strokeColor – цвет контура в формате HTML;
  • strokeOpacity – прозрачность контура (0..1);
  • strokeWeight – толщина линии контура в пикселях;
  • fillColor – цвет заливки;
  • fillOpacity – прозрачность заливки.

Рисунок 14. Вид радара после установки других параметров.

Замена Google Map на OpenStreetMap

C помощью Google Maps API можно отобразить вместо карты Google карту другого провайдера. Например OpenStreetMap. Для этого нужно внести изменения в исходный код html-файла. Откроем файл в текстовом редакторе и найдем в нем следующий фрагмент кода.

var mapOptions = {
 zoom: 14,
 center: activeNodeLatLng,
 mapTypeId: google.maps.MapTypeId.HYBRID,
 streetViewControl: false
 };
 map = new google.maps.Map(document.getElementById('mapdiv'), mapOptions);

Заменим этот фрагмент на этот. Сохраним изменения и запустим просмотр. Результат показан на рис. 15.

var mapOptions = {
 zoom: 14,
 center: activeNodeLatLng,
 mapTypeId: "OSM",
 mapTypeControl: false,
 streetViewControl: false
 };
 
 map = new google.maps.Map(document.getElementById('mapdiv'), mapOptions);
 
 map.mapTypes.set("OSM", new google.maps.ImageMapType({
 getTileUrl: function(coord, zoom) {
 return "http://tile.openstreetmap.org/" + zoom + 
 "/" + coord.x + "/" + coord.y + ".png"; 
 },
 tileSize: new google.maps.Size(256, 256),
 name: "OpenStreetMap",
 maxZoom: 18
 })
 );

 

Рисунок 15. Карта OpenStreetMap.

 

Как вам материал?

0 реакции
👍
0
👎
0
😂
0
😱
0
😡
0
😢
0
Поделитесь материалом в социальных сетях

У Вас остались вопросы по статье? Задавайте. Буду рад ответить на них в комментариях.

Если этот материал совсем не то, куда Вас привел поисковик, попробуйте выполнить поиск по сайту или введите запрос в строку ниже. Также Вы можете посмотреть другие материалы в разделе статьи.

ТЕГИ МАТЕРИАЛА:
Об авторе

Сергей Дишук, фотограф-любитель и профессионал. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения.

Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 8-ми лет. Имею опыт работы в программах Pano2VR, PTGui, Photomatix, Adobe Photoshop, Lightroom и других.

Реализовал некоторые фичи в проектах Pano2VR задолго до их официального появления. За всё время помог разобраться с Pano2VR более 5k пользователям, из них более 200 лично.

Материалы по теме статьи
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Нет комментариев

Получите доступ к эксклюзивному контенту, оформив платную подписку.

VK Donut
 
Платные темы OK
 
Boosty
 
Patreon
 
Сейчас просматривают
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 46
Последние новости
ChatGPT научился создавать изображения

Раньше обращался к ChatGPT с запросами написания контент-плана, статьи, программного кода. Теперь у ...

 События
 10.04.2025    12:21    544    0
Фотопрогулка по лесу в апреле

Прогулка по лесу с фотоаппаратом – это настоящее удовольствие для души и глаз. Однажды в апреле, ког...

 События
 06.04.2025    18:05    352    0
10 невероятных новостей из мира фотографии, в которые сложно поверить

Фотография – это не просто хобби, а стиль жизни. Каждый день появляются новые технологии, открытия и...

 События
 01.04.2025    14:55    447    0
Последние статьи
Фотосъемка текстур и паттернов

Это направление в фотографии наряду с такими как пейзаж, портрет, макросъемка, предметная фотосъемка...

 Статьи по фотографии
 10.04.2025    10:22    369    0
Зеленый цвет в фотографии и не только

На этих фотографиях в статье доминирует зеленый — цвет жизни, баланса и гармонии. Он окружает нас в ...

 Статьи по фотографии
 08.04.2025    08:50    297    0
Фотосъемка с проводкой: как передать движение в кадре

Съемка с проводкой – это прием фотосъемки, при котором вы ведете камеру за движущимся объектом со ск...

 Статьи по фотографии
 05.04.2025    08:10    469    0
Онлайн всего: 1
Гостей: 1
Пользователей: 0