基于web的全景漫游自动生成加编辑平台的技术实现（三）----krpano主XML文件

了解了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"

下面的代码都是图片资源的地址了，就在vtour文件夹下的panos/1.tiles下，这里使用了通配符匹配每个图片文件夹下图片名，让krpano能找到每个图片

总之，krpano自动生成的全景漫游，它的主XML文件里的结构就是通过<skin_settings>元素设置一系列皮肤属性设置，然后在<scene>场景里对全景进行编辑，比如加上action动作等（注意：action一定要声明在scene元素之外再引用）。

就这样，一个简单的krpano全景漫游的主XML就完成了。