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

2017-01-06 08:03:43来源:CSDN作者:zhi8zhi1zhi人点击

上次我们说到怎么使用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>标签如果浏览器不支持javascript,则显示错误信息Javascript not activated

<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方式),全景漫游就这样在浏览器里展示出来了。


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台