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

最新推荐文章于 2024-03-28 10:07:19 发布

zhi8zhi1zhi

最新推荐文章于 2024-03-28 10:07:19 发布

阅读量3.1k

点赞数 2

文章标签： html xml krpano java web

本文链接：https://blog.csdn.net/zhi8zhi1zhi/article/details/54096998

版权

上次我们说到怎么使用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方式），全景漫游就这样在浏览器里展示出来了。

zhi8zhi1zhi

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
基于web的全景漫游自动生成加编辑平台的技术实现（二）----krpano窥探

上次我们说到怎么使用krpano自动制作一个全景漫游，今天我们来说一下krpano是怎么让一个全景漫游运作起来的首先我们打开一个经过krpano自动生成后的全景漫游，查看它的代码，这里我用的编辑器是Sublime Text 3（强烈推荐，用来编辑XML或者其它很方便）查看这个html页面的代码内容 krpano - 1 @-ms-viewport
复制链接

扫一扫