krpano动态加载设置热点

上一章中已经完成了比较简易的3D全景浏览，但是...这是写死在xml中的，对于我们实际的项目，这种情况是不可能适应的。所以，来了解下如何动态加载xml已经设置对应的热点。

我们的思路

• 首先，场景是要提前设置好的，比如：我们支持三种场景，那么对应每一个场景中放多少张图片，并且每一张图片的位置是固定的。
• 实际的图片不是固定的，所以我们可以通过后台管理，设定好每一个展厅是使用哪个场景，该场景中放哪些照片
• 然后通过进入哪个展厅（ID）获得对应的场景XML 以及对应的图片地址信息即可
• 然后通过krpano来加载xml 并设置对应的hotspot url即可。

实现

关于xml中的代码这里就不贴了，主要贴下动态加载的js代码。

/****
 * Krpano util ，通用函数类
 * @author lixun
 * @create 2018年9月11日 17:37:44
 ***/
 var krpano = null;
 var Common = {
 	//获得场景信息
 	getScene : function( id,cb ){
 		//这里使用假数据
		var map = {
			'1' : {
				type : 'scenea.xml',//场景类型
				next : '2',//下一个场景ID
				prev : '3',//上一个场景ID
				imgs : [	//对应场景内的图片展示
					'/img/1.jpg',
					'/img/2.jpg',
					'/img/3.jpg',
					'/img/4.jpg',
					'/img/5.jpg',
					'/img/6.jpg',
					'/img/7.jpg',
					'/img/8.jpg',
					'/img/9.jpg',
					'/img/10.jpg',
					'/img/11.jpg',
					'/img/12.jpg',
					'/img/13.jpg',
					'/img/14.jpg',
					'/img/15.jpg',
					'/img/16.jpg',
					'/img/17.jpg',
					'/img/18.jpg',
					'/img/19.jpg',
					'/img/20.jpg',
				]
			}//这里使用的是假数据，后续的就不贴了，占空间
		};
		if(cb){
			cb(map[id]);
		}
 	},
 	//加载场景
 	loadPano : function(xml,imgs,next,prev){
		if(krpano){
			removepano('newId');
		}
		embedpano({
			swf : 'tour.swf', 		// path to flash viewer (use null if no flash fallback will be requiered)
			id : "newId", 
			xml : xml, 
			target : 'pano', 
			consolelog : true,					// trace krpano messages also to the browser console
			passQueryParameters : true, 		// pass query parameters of the url to krpano
			onready : function(krpano_interface){
				krpano = krpano_interface;
				//继续操作
				console.log('delay...');
				Common.setHot(imgs,next,prev);
			}
		});
 		
 	},
 	//设置热点图片路径
 	setHot : function(imgs,next,prev){
 		console.log('hot setting')
 		if (krpano){
 			setTimeout(function(){
 				imgs.forEach(function(imgPath,index){
	 				krpano.set("hotspot[dyn_img"+(index+1)+"].url", imgPath);	
	 			})
	 			//设置场景跳转
				krpano.set('hotspot[spot1].onhover','showtext(去往第1展厅,hotspottextstyle)');
				krpano.set('hotspot[spot2].onhover','showtext(去往第2展厅,hotspottextstyle)');
				krpano.set('hotspot[spot1].onclick','js(showScene('+prev+'))');
				krpano.set('hotspot[spot2].onclick','js(showScene('+next+'))');
				//随机观察点
				krpano.call("lookto(" + (Math.random() * 360.0 - 180.0) + "," + (Math.random() * 180.0 - 90.0) + "," + (80.0 + Math.random() * 100.0) + ")");
 			},200)
		}
 	}
 };

代码中基本上注释都写清楚了，主要的思路就是先根据展厅ID获得对应的xml以及图片，然后在加载另外的场景的时候，先移除掉现在的场景，然后重新加载。

JS调用:

//加载场景
var imgs = [];
function showScene(id){
	console.log('加载场景'+id);
	Common.getScene(id,function(obj){
		imgs = obj.imgs;
		Common.loadPano(obj.type,obj.imgs,obj.next,obj.prev);
	})
}

byy.require('win',function(){
	
	//第一次加载需要先确定场景，然后初始化场景，然后加载图片
	//后续的需要获得场景信息，然后加载不同的pano,然后加载图片信息
	Common.getScene(1,function(obj){
		console.log(obj);
		Common.loadPano(obj.type,obj.imgs,obj.next,obj.prev);
	})
	
})

这样，我们就能够在加载的时候动态加载我们需要的场景了，不需要一次全部加载，相对耗时短一些，当然对于图片的处理还是需要的，不然每个图片都很大的话，加载还是很慢的，两边要一起优化。

以上代码暂时只能用于demo的实现，具体生产中还没有开始使用，仅供借鉴！

相关文章: undefined