您的位置：首页 > 编程语言 > Java开发

基于web的全景漫游自动生成加编辑平台的技术实现（二）----krpano窥探

2017-01-05 20:46 706 查看

上次我们说到怎么使用krpano自动制作一个全景漫游，今天我们来说一下krpano是怎么让一个全景漫游运作起来的

首先我们打开一个经过krpano自动生成后的全景漫游，查看它的代码，这里我用的编辑器是Sublime Text 3（强烈推荐，用来编辑XML或者其它很方便）

查看这个html页面的代码内容

<!DOCTYPE html>
<html>
<head>
<title>krpano - 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
</style>
</head>
<body>

<script src="tour.js"></script>

<div id="pano" style="width:100%;height:100%;">
<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>
<script>
embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true});
</script>
</div>

</body>
</html>

<head>标签内的代码主要是针对设备的自动适应，不细说了

我们主要看下面<body>标签里的内容

第一行里，告诉浏览器，读取tour.js里的内容

<script src="tour.js"></script>

就是这个文件啦，这个js文件包含了krpano的html5引擎以及flash嵌入，没有它全景漫游也运作不起来（可惜老外把它加密处理了）

下一行<div>标签让全景漫游全屏显示

<div id="pano" style="width:100%;height:100%;">

<noscript><table style="width:100%;height:100%;javascript"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>

最后的<script>标签就是全景漫游的参数配置了

这里用了krpano里的embedpano方法（这个方法在tour.js里），方法里的参数的具体意思是

swf:"tour.swf" ：加载flash引擎（在全景文件夹里的tour.swf文件）

xml:"tour.xml" ：加载krpano的主XML配置文件（在全景文件夹里的tour.xml文件）

target:"pano" ：加载上面id为pano的div

html5:"auto" ：让浏览器首先使用HTML5来运行全景漫游（有HTML5和flash两种方式，不支持html5时才用flash）

passQueryParameters:true ：true表示允许外部传递参数传送到viewer视图层中

<script>
embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true});
</script>

总的来说，就是在html页面里读取tour.js文件里的内容，再根据tour.xml文件里的配置信息渲染全景漫游页面（渲染有flash和html5两种方式，1.19版本默认首先使用html5方式），全景漫游就这样在浏览器里展示出来了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html xml krpano java web

相关文章推荐

新的分享

章节导航