Как сделать виртуальный тур с планом этажа

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

Руководствуясь прошлыми уроками, вы уже можете собрать собственный виртуальный тур в krpano, можете расставить хотспоты, настроить внешний вид и даже сделать активные области. Однако, немаловажная часть любого виртуального тура — карта, и в этой статье вы узнаете, как добавить карту в ваш виртуальный тур.

1. Прежде всего, вам нужен тур, сделанный при помощи стандартного дроплета MAKE VTOUR MULTIRES DROPLET в krpano. Если у вас нет такого тура, можете скачать тестовый образец у меня.

2. Прежде всего, вам понадобится план-схема этажа. Можете использовать из моего примера:

1. Скопируйте это изображение в папку с виртуальным туром и переименуйте её в map.png.
2. Также вам понадобятся вешки, скачайте этот файл и сохраните в папку с туром: 
3. Кнопка закрытия панорамы украсит ваш виртуальный тур, тоже скачайте: 
4. Кнопка открытия панорамы тоже пригодится, вот она: 

3. В папку с туром добавьте файл под названием map.xml. Можете получить его, скопировав файл tour.xml, переименовать и очистить. В документе должны остаться только следующие строки:

<krpano>
</krpano>

4. Откройте файл tour.xml и добавьте в него строки <include url=»map.xml» /> , теперь верхняя часть вашего файла tour.xml должна выглядеть так:

<krpano version="1.19" title="Virtual Tour">

	<include url="skin/vtourskin.xml" />
	<include url="map.xml" />

	<!-- customize skin settings: maps, gyro, thumbnails, tooltips, layout, design, ... -->

5.  Дальнейшие изменения будем производить в файле map.xml. Откройте файл в редакторе, добавьте в него следующие строки:

<layer name="map" visible="true" url="map.png" state="closed" align="center" keep="true" handcursor="true" capture="false" >
 
 <!-- Маска для радара - контейнер -->
 <layer name="radarmask" type="container" align="lefttop" width="100%" height="100%" maskchildren="true" visible="true" keep="true" >

 <!-- Точки -->

 <layer name="spot1" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene_name, null, MERGE, BLEND(1));" onhover="showtext(Название первой вешки);" keep="true" />
 
 <layer name="spot2" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene2_name, null, MERGE, BLEND(1));" onhover="showtext(Название второй вешки);" keep="true" />
 
 <layer name="spot3" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene3_name, null, MERGE, BLEND(1));" onhover="showtext(Название третей вешки);" keep="true" />
 
 </layer>
</layer>

<layer name="map_button_close" url="map_button.png" keep="true" align="topright" 
 onclick="
 tween(layer[map].alpha, 0, 0.2); 
 set(layer[map_button_open].visible, true);
 set(visible, false);
 delayedcall(0.3, set(layer[map_container].visible, false, WAIT));
 " x="50" scale="0.75" alpha="0.75" crop="162|0|324|29" /> 
 
 <layer name="map_button_open" url="map_button.png" keep="true" align="topright" 
 onclick="
 tween(layer[map].alpha, 1, 0.2); 
 set(layer[map].visible, true);
 set(layer[map_button_close].visible, true);
 set(visible, false);
 " x="50" scale="0.75" alpha="1.0" visible="false" crop="0|0|162|29" /> 

<action name="closemap" >
 tween(layer[map].alpha, 0, 0.3);
 delayedcall(0.3, set(layer[map].visible, false) );
</action>
<action name="openmap" >
 set(layer[map].visible, true);
 tween(layer[map].alpha, 1, 0.3);
</action>

6. Откройте файл map.xml в фотошопе, выберите инструмент раскройка (slice tool) 

7. C его помощью нарисуйте прямоугольник из левого верхнего угла до той точки, где собираетесь поставить точку.

8. Дважды щелкните по прямоугольнику и обратите внимание на 2 значения. .

9. Впишите эти значения в первый хотспот. Ширина это X, высота это Y. Пример:

<layer name="spot1" url="pointer.png" align="lefttop" edge="bottom" x="141" y="112" zorder="2" onclick="loadscene(scene_name, null, MERGE, BLEND(1));" onhover="showtext(Название первой вешки);" />

10. Дайте точке название, вписав его в скобки: onhover=»showtext(Первая панорама);»

11. Впишите в loadscene название сцены, которую нужно открывать при щелчке на эту точку. например: loadscene(scene_01, null, MERGE, BLEND(1));

12. Аналогичным образом сделайте все вешки. При необходимости скопируйте строки с ними (только дайте хотспотам уникальные имена)! Например: spot1 spot2 spot3 spot4

 <layer name="spot1" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene_name, null, MERGE, BLEND(1));" onhover="showtext(Название первой вешки);" keep="true" />
 
 <layer name="spot2" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene2_name, null, MERGE, BLEND(1));" onhover="showtext(Название второй вешки);" keep="true" />
 
 <layer name="spot3" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene3_name, null, MERGE, BLEND(1));" onhover="showtext(Название третей вешки);" keep="true" />

Ну и всё, карта должна работать. Кнопки и хотспоты редактируйте по своему вкусу. В следующем уроке постараюсь рассказать, как сделать хотспот активным (перекрасить) и как добавить к вешкам радар.

А вот рабочий виртуальный тур с картами в моём исполнении: Виртуальный тур с планом этажа.

Вопросы задавать только в комментариях!