瞭解了krpano是怎麼通過瀏覽器進行全景漫遊展示之後，我們來看看krpano的主XML文件tour.xml
tour.xml是對全景漫遊進行頁面配置的xml文件，可以說，tour.xml裏的內容就是瀏覽器裏全景的內容，看看它裏面都寫了些什麼
<krpano version="1.19" title="Virtual Tour">
<include url="skin/vtourskin.xml" />
<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
<skin_settings maps="true"
maps_type="google"
maps_bing_api_key=""
maps_zoombuttons="false"
gyro="true"
webvr="true"
littleplanetintro="false"
title="true"
thumbs="true"
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
thumbs_opened="false"
thumbs_text="false"
thumbs_dragging="true"
thumbs_onhoverscrolling="false"
thumbs_scrollbuttons="false"
thumbs_scrollindicator="false"
thumbs_loop="false"
tooltips_buttons="false"
tooltips_thumbs="false"
tooltips_hotspots="false"
tooltips_mapspots="false"
deeplinking="false"
loadscene_flags="MERGE"
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"
loadingtext="loading..."
layout_width="100%"
layout_maxwidth="814"
controlbar_width="-24"
controlbar_height="40"
controlbar_offset="20"
controlbar_offset_closed="-40"
controlbar_overlap.no-fractionalscaling="10"
controlbar_overlap.fractionalscaling="0"
design_skin_images="vtourskin.png"
design_bgcolor="0x2D3E50"
design_bgalpha="0.8"
design_bgborder="0"
design_bgroundedge="1"
design_bgshadow="0 4 10 0x000000 0.3"
design_thumbborder_bgborder="3 0xFFFFFF 1.0"
design_thumbborder_padding="2"
design_thumbborder_bgroundedge="0"
design_text_css="color:#FFFFFF; font-family:Arial;"
design_text_shadow="1"
/>
<!--
For an alternative skin design either change the <skin_settings> values
from above or optionally include one of the predefined designs from below.
-->
<!-- <include url="skin/vtourskin_design_flat_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_glass.xml" /> -->
<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_117.xml" /> -->
<!-- <include url="skin/vtourskin_design_117round.xml" /> -->
<!-- <include url="skin/vtourskin_design_black.xml" /> -->
<!-- startup action - load the first scene -->
<action name="startup" autorun="onstart">
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
</action>
<scene name="scene_1" title="1" onstart="" havevrimage="true" thumburl="panos/1.tiles/thumb.jpg" lat="26.90189194" lng="112.56277528" heading="0.0">
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/1.tiles/preview.jpg" />
<image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">
<level tiledimagewidth="4608" tiledimageheight="4608">
<cube url="panos/1.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="2304" tiledimageheight="2304">
<cube url="panos/1.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="1152" tiledimageheight="1152">
<cube url="panos/1.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="640" tiledimageheight="640">
<cube url="panos/1.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
</level>
</image>
<image if="webvr.isenabled">
<cube url="panos/1.tiles/vr/pano_%s.jpg" />
</image>
<!-- place your scene hotspots here -->
</scene>
</krpano>長長的一大串代碼，其實仔細看看還是挺好懂的
開頭version說明krpano版本，這裏用1.19
title是全景標題，可以任意修改
<krpano version="1.19" title="Virtual Tour">include url 顧名思義，引入skin / vtourskin.xml文件，這是全景漫遊的皮膚文件，我們瀏覽全景漫遊有一系列的按鈕功能，基本都是在這個文件裏完成，這個文件的內容以後再細說，現在大概知道它的作用就好
<include url="skin/vtourskin.xml" />
<skin_settings>標籤裏配置了一系列皮膚屬性設置，這些屬性的作用是這樣的
maps="false" <!-- 是否使用必應地圖或谷歌地圖 ->
maps_type="bing" <!-- 選擇使用谷歌地圖或必應地圖 ->
maps_bing_api_key="" <!-- 必應地圖所需的API密鑰，需申請 ->
maps_google_api_key="" <!-- 谷歌地圖所需的API密鑰，需申請 ->
maps_zoombuttons="false" <!-- 是否在地圖上顯示縮放按鈕 ->
gyro="true" <!-- 是否使用陀螺儀 ->
webvr="true" <!-- 是否啓用VR ->
webvr_gyro_keeplookingdirection="false" <!-- 進入陀螺儀或VR時是否保持觀看方向 ->
webvr_prev_next_hotspots="true" <!-- 在VR下是否啓用導航到前後場景的鏈接熱點->
littleplanetintro="false" <!-- 是否使用小行星開場 ->
title="true" <!-- 是否左下角顯示title ->
thumbs="true" <!-- 是否使用縮略圖，如不使用，則沒有縮略圖一欄 ->
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160" <!-- 縮略圖寬度、高度、間距以及縮略圖裁切範圍 ->
thumbs_opened="false" <!-- 是否在啓動時彈出縮略圖一欄 ->
thumbs_text="false" <!-- 是否在縮略圖上顯示名字 ->
thumbs_dragging="true" <!-- 是否允許鼠標拖拽縮略圖區域 ->
thumbs_onhoverscrolling="false" <!-- 是否允許鼠標懸停縮略圖自動滾動 ->
thumbs_scrollbuttons="false" <!-- 是否顯示縮略圖滾動按鈕 ->
thumbs_scrollindicator="false" <!-- 是否顯示縮略圖滾動條 ->
thumbs_loop="false" <!-- 滾動按鈕是否使用縮略圖循環 ->
tooltips_buttons="false" <!-- 鼠標在按鈕懸停時是否彈出文字提示 ->
tooltips_thumbs="false" <!-- 鼠標在縮略圖懸停時是否彈出文字提示 ->
tooltips_hotspots="false" <!-- 鼠標在熱點上懸停時是否彈出文字提示 ->
tooltips_mapspots="false" <!-- 鼠標在地圖熱點懸停時是否彈出文字提示 ->
deeplinking="false" <!-- 是否使用深度鏈接獲取功能，可使得當前頁面路徑獲取場景及視角信息 ->
loadscene_flags="MERGE" <!-- 縮略圖切換場景時的變量 ->
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)" <!-- 縮略圖切換場景時的融合 ->
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)" <!-- 縮略圖切換到上一個場景時的融合 ->
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)" <!-- 縮略圖切換到下一個場景時的融合 ->
loadingtext="載入中..." <!-- 在全景圖載入中時顯示的文字 ->
layout_width="100%" <!--導航條容器相對屏幕寬度的百分比 ->
layout_maxwidth="814" <!--導航條容器的最大寬度像素 ->
controlbar_width="-24" <!--導航條背景的寬度像素 ->
controlbar_height="40" <!--導航條背景的高度像素 ->
controlbar_offset.normal="20" <!--導航條背景與屏幕底部的距離->
controlbar_offset_closed="-40" <!--導航條隱藏狀態時與屏幕底部的距離->
controlbar_overlap.no-fractionalscaling="10" <!--在不支持分級縮放頁面和設置像素比的設備的導航條重疊的像素->
controlbar_overlap.fractionalscaling="0" <!--支持分級縮放頁面和設置像素比的設備的導航條重疊的像素->
design_skin_images="vtourskin.png" <!--皮膚所用的源圖片->
design_bgcolor="0x000000" <!--皮膚的背景顏色->
design_bgalpha="0.5" <!--皮膚的透明度->
design_bgborder="0 0xFFFFFF 1.0" <!--皮膚的邊框->
design_bgroundedge="1" <!--皮膚邊框圓角設置->
design_bgshadow="0 0 9 0xFFFFFF 0.5" <!--皮膚的背景陰影->
design_thumbborder_bgborder="4 0xFFFFFF 1.0" <!--皮膚的縮略圖邊框->
design_thumbborder_padding="2" <!--皮膚縮略圖邊框間距->
design_thumbborder_bgroundedge="5" <!--皮膚縮略圖邊框的圓角->
design_text_css="color:#FFFFFF; font-family:Arial; font-weight:bold;"<!--皮膚文字樣式->
design_text_shadow="1" <!--皮膚的文字陰影->接下來我們看到krpano裏的action元素,標籤裏的代碼是載入一個場景（默認載入第一個場景），這個場景就是我們打開全景是看到的第一個畫面
這裏action元素裏有兩個屬性
name屬性 ：action的id叫startup
autorun屬性：設置爲onstart可以在打開瀏覽器運行全景漫遊時就可以執行這個action
<action name="startup" autorun="onstart">
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
</action>如果加載成功就載入場景
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); ); loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );最後只剩下一個scene元素了，以後搞過一段時間cocos2dx，所以當時看到這個元素時一看就知道是啥東東了。
顧名思義，scene中文翻譯過來叫場景，我們看到的每一個全景漫遊都是一個獨立的場景，它們分別在一個獨立scene中進行配置，在scene中可以調用比如上面的action動作等等巴拉巴拉的東西，scene相當於一個容器，可以在裏面添加任意的東西，最後被krpano解析之後進行全景展示
下面我們來看看代碼
這裏havevrimage屬性設置爲true表示啓用專門爲VR模式準備的全景圖，thumburl屬性制定全景封面圖片，lat,lng,heading則是一堆角度設置，都是系統自動生成好的
<scene name="scene_1" title="1" onstart="" havevrimage="true" thumburl="panos/1.tiles/thumb.jpg" lat="26.90189194" lng="112.56277528" heading="0.0">
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/1.tiles/preview.jpg" />
<image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">
<level tiledimagewidth="4608" tiledimageheight="4608">
<cube url="panos/1.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="2304" tiledimageheight="2304">
<cube url="panos/1.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="1152" tiledimageheight="1152">
<cube url="panos/1.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="640" tiledimageheight="640">
<cube url="panos/1.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
</level>
</image>
<image if="webvr.isenabled">
<cube url="panos/1.tiles/vr/pano_%s.jpg" />
</image>
<!-- place your scene hotspots here -->
</scene>scene裏的view元素，是指定全景瀏覽者觀看時的視角，比如初始視角，縮放範圍，視域範圍等等
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />preview元素，指定瀏覽全景時的略縮圖（因爲全景圖片一般都很大，導致加載慢，所以krpano準備了清晰度較小的略縮圖方便加載，給清晰的圖片加載緩衝時間）
<preview url="panos/1.tiles/preview.jpg" /><image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled"> <level tiledimagewidth="4608" tiledimageheight="4608"> <cube url="panos/1.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" /> </level> <level tiledimagewidth="2304" tiledimageheight="2304"> <cube url="panos/1.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" /> </level> <level tiledimagewidth="1152" tiledimageheight="1152"> <cube url="panos/1.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" /> </level> <level tiledimagewidth="640" tiledimageheight="640"> <cube url="panos/1.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" /> </level> </image>
image元素，全景漫遊裏使用的圖片資源都在image元素裏配置
krpano一大特色就是VR模式，下面的if語句就是說如果進入VR模式，則使用VR模式專用圖片
if="!webvr.isenabled"
總之，krpano自動生成的全景漫遊，它的主XML文件裏的結構就是通過<skin_settings>元素設置一系列皮膚屬性設置，然後在<scene>場景裏對全景進行編輯，比如加上action動作等（注意：action一定要聲明在scene元素之外再引用）。
就這樣，一個簡單的krpano全景漫遊的主XML就完成了。