phpkrpano技巧_krpano动态加载设置热点

文章目录 [+]

/ 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调用:

phpkrpano技巧_krpano动态加载设置热点

//加载场景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); })})

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