krpano是什么
krpano是一个可以实现定制化全景项目的根据，很多在线可视化全景平台都是基于krpano开发而来。它本身不开源，商用需要付费购买，否则会有水印，购买方式可在官网自行了解。 krpano官网 krpano官方Demo
krpano使用
如何生成全景图
- 从官网下载Krpano，解压
下载地址
- 打开
krpano Tools软件，选择下载好的全景图片，等待制作完成之后会在全景图文件夹中生成vtour文件夹，这个文件夹中存放的就是生成的全景图。回到krpano Tools软件继续点击View Tour就可在软件中立即预览生成的全景图。 vtour文件简介
vtour/
-- panos/# 存放全景切片图片的文件夹
-- skin/# 存放皮肤相关文件
-- plugins/# 用来存放插件
-- tour.swf# krpano flash viewer
-- tour.js # krpano HTML5 viewer
-- tour.xml # 生成全景的相关配置
-- tour.html # 用来浏览全景的页面，需要本地服务环境
前端使用
在 html 中引入 tour.js 再调用 embedpano 方法即可，具体可以参考 tour.html 。
<div id="pano">
<noscript>
<table style="width:100%;height:100%;">
<tr style="vertical-align:middle;">
<td>
<div style="text-align:center;">ERROR:<br /><br />Javascript not activated<br /><br /></div>
</td>
</tr>
</table>
</noscript>
</div>
<script src="tour.js"></script>
<script>
embedpano({
swf: "tour.swf", // 有则表示加载 flash 引擎，如果设置 html5:only 则不需要该值
xml: "tour.xml", // 启动时的配置文件
target: "pano", // 要渲染到的目标容器 ID
html5: "only", // 如果有需要用到 flash ，可设置为 auto
//id: "krpanoSWFObject", // 默认的 krpano 对象，每一个 viewer 对应唯一 id ，与 JS 交互时要用到
mobilescale: 1.0, //移动设备缩放，1 表示不缩放，默认 0.5
passQueryParameters: false //是否接受 URL 传参，例如：tour.html?html5=only&startscene=scene2
});
</script>
tour.html 预览效果 （软件没有输入授权码，生成的全景图就有水印）
XML配置介绍
Krpano渲染最重要的就是 xml 配置文件，打开 tour.xml 可以看到类似如下结构。
<krpano version="1.20.11" title="Virtual Tour">
<include url="skin/vtourskin.xml" />
<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
<skin_settings maps="false"
maps_type="google"
maps_bing_api_key=""
...
/>
<scene name="scene_demo" title="demo" onstart="" thumburl="panos/demo.tiles/thumb.jpg" lat="" lng="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/demo.tiles/preview.jpg" />
<image>
<cube url="panos/demo.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1024,2048" />
</image>
</scene>
</krpano>
Krpano XML 结构与简介
krpano 元素是 krpano xml 文件的根元素，任何一个krpano xml文件的其他元素都要被krpanoui元素所嵌套
<krpano>
<include/>
include 元素用来引入其他 xml 文件的内容。例如我们常要用到的vtourskin.xml 就是使用 include 嵌入到主 xml 中。
<preview/>
预览图设置，也就是全景图完全载入之前的模糊图像。因为体积较小，因此载入速度较快，会在全景图之前先载入，避免黑屏。
<image/>
image 元素用来设置全景图，包括全景图类型，渐进分辨率切片显示等。
<view/>
view 元素控制全景的视野，例如起始视角、视角限制与缩放等等。当要设置限制视角或设定特定的初始视角时，需要自行设定或使用插件获取代码。
<area/>
area 元素控制全景图在浏览器窗口中显示区域大小。
<display/>
控制全景图的显示品质。
<control/>
设置鼠标、键盘以及触摸设备对全景浏览的控制方式。
<cursors/>
设置鼠标光标样式。
<autorotate/>
控制自动旋转。
<plugin/>
用来调用插件、插入图片或生成容器。
<layer/>
与 plugin 作用相同，只是名称不同。
<hotspot/>
热点，可在 3D 空间中插入图片，使之随着 3D 空间一同运动，可制作很多特效。
<style/>
可以保存其它元素的属性子集。
<events/>
可调用各类型事件，例如全景载入的不同阶段以及鼠标触发的不同行为等。
<action/>
自定义动态代码。
<contextmenu/>
定义右键菜单的内容。
<network/>
控制图像的下载、缓存与解码。
<memory/>
控制全景图在设备中的存储。
<security/>
Flashplayer 和 HTML5 相关的安全/跨域设置。
<lensflareset/>
镜头眩光的设置（目前只能在 flash 下使用）。
<lensflare/>
生成镜头眩光（目前只能在 flash 下使用）。
<data/>
可放置任意的数据。
<scene/>
可放置任意 krpano 元素。每个 scene 元素只有在被 loadscene 时才会被载入到浏览器进行解析。
</krpano>
skin_settings
skin_settings 是默认皮肤的参数设置，也可以设置自定义参数。
<skin_settings
maps="false" 是否显示地图按钮；
maps_type="google" 地图类型；
maps_bing_api_key="" bing地图授权key；
maps_google_api_key="" 谷歌地图授权key；
maps_zoombuttons="false" 地图是否显示缩放按钮；
gyro="true" 是否默认打开重力陀螺仪；
webvr="true" 是否显示vr按钮；
webvr_gyro_keeplookingdirection="false" 是否陀螺仪状态下默认跟随场景域默认视角；
webvr_prev_next_hotspots="true" 是否vr状态下显示上下场景按钮；
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_skin皮肤默认皮肤图片文件；
design_bgcolor="0x2D3E50" design_skin皮肤背景颜色；
design_bgalpha="0.8" design_skin皮肤背景透明度；
design_bgborder="0" design_skin皮肤边框宽度；
design_bgroundedge="1" design_skin皮肤圆角值；
design_bgshadow="0 4 10 0x000000 0.3" design_skin皮肤背景阴影参数；
design_thumbborder_bgborder="3 0xFFFFFF 1.0" design_skin皮肤缩略图边框样式；
design_thumbborder_padding="2" design_skin皮肤缩略图内边距值；
design_thumbborder_bgroundedge="0" design_skin皮肤缩略图圆角值；
design_text_css="color:#FFFFFF; font-family:Arial;" design_skin皮肤文字样式；
design_text_shadow="1" design_skin皮肤文字阴影偏移值；
/>
常用设置
小行星开场
演示视频：
- 首先找到 tour.xml ，然后搜索 littleplanetintro 将其值设置为 true
<skin_settings
...
littleplanetintro="true"
...
/>
- 在 skin_startup 中判断 littleplanetintro 是否为 true ，为 true 则执行小行星动画方法
- 执行开场动画
注：第二、三步的代码在文件 skin/vtourskin.xml 中
