PhotoSphereViewer 全景图查看器 Vue 组件
资源内容介绍
该 Vue 组件是一个全景图查看器，集成了图片展示、标记点管理、图库切换、自动旋转等功能。通过配置不同的属性和调用相应的方法，可以实现对全景图的各种交互操作。v2版本更新 <template><div v-html="dynamicHTML"></div></template><script>import{Viewer,utils}from"\u0040\u0070\u0068\u006f\u0074\u006f\u002d\u0073\u0070\u0068\u0065\u0072\u0065\u002d\u0076\u0069\u0065\u0077\u0065\u0072\u002f\u0063\u006f\u0072\u0065";import{MarkersPlugin}from"\u0040\u0070\u0068\u006f\u0074\u006f\u002d\u0073\u0070\u0068\u0065\u0072\u0065\u002d\u0076\u0069\u0065\u0077\u0065\u0072\u002f\u006d\u0061\u0072\u006b\u0065\u0072\u0073\u002d\u0070\u006c\u0075\u0067\u0069\u006e";import{GalleryPlugin}from"\u0040\u0070\u0068\u006f\u0074\u006f\u002d\u0073\u0070\u0068\u0065\u0072\u0065\u002d\u0076\u0069\u0065\u0077\u0065\u0072\u002f\u0067\u0061\u006c\u006c\u0065\u0072\u0079\u002d\u0070\u006c\u0075\u0067\u0069\u006e";import{AutorotatePlugin}from"\u0040\u0070\u0068\u006f\u0074\u006f\u002d\u0073\u0070\u0068\u0065\u0072\u0065\u002d\u0076\u0069\u0065\u0077\u0065\u0072\u002f\u0061\u0075\u0074\u006f\u0072\u006f\u0074\u0061\u0074\u0065\u002d\u0070\u006c\u0075\u0067\u0069\u006e";import{EquirectangularTilesAdapter}from"\u0040\u0070\u0068\u006f\u0074\u006f\u002d\u0073\u0070\u0068\u0065\u0072\u0065\u002d\u0076\u0069\u0065\u0077\u0065\u0072\u002f\u0065\u0071\u0075\u0069\u0072\u0065\u0063\u0074\u0061\u006e\u0067\u0075\u006c\u0061\u0072\u002d\u0074\u0069\u006c\u0065\u0073\u002d\u0061\u0064\u0061\u0070\u0074\u0065\u0072";import"\u0040\u0070\u0068\u006f\u0074\u006f\u002d\u0073\u0070\u0068\u0065\u0072\u0065\u002d\u0076\u0069\u0065\u0077\u0065\u0072\u002f\u0063\u006f\u0072\u0065\u002f\u0069\u006e\u0064\u0065\u0078\u002e\u0063\u0073\u0073";import"\u0040\u0070\u0068\u006f\u0074\u006f\u002d\u0073\u0070\u0068\u0065\u0072\u0065\u002d\u0076\u0069\u0065\u0077\u0065\u0072\u002f\u006d\u0061\u0072\u006b\u0065\u0072\u0073\u002d\u0070\u006c\u0075\u0067\u0069\u006e\u002f\u0069\u006e\u0064\u0065\u0078\u002e\u0063\u0073\u0073";import"\u0040\u0070\u0068\u006f\u0074\u006f\u002d\u0073\u0070\u0068\u0065\u0072\u0065\u002d\u0076\u0069\u0065\u0077\u0065\u0072\u002f\u0067\u0061\u006c\u006c\u0065\u0072\u0079\u002d\u0070\u006c\u0075\u0067\u0069\u006e\u002f\u0069\u006e\u0064\u0065\u0078\u002e\u0063\u0073\u0073";export default{"\u0070\u0072\u006f\u0070\u0073":{"\u0064\u0065\u0066\u0061\u0075\u006c\u0074\u0041\u006e\u0067\u006c\u0065\u0056\u0069\u0065\u0077":{'type':Object,"\u0064\u0065\u0066\u0061\u0075\u006c\u0074":()=>{return{'pitch':0.01,"\u0079\u0061\u0077":0.01};}},'isEdit':{"\u0074\u0079\u0070\u0065":Boolean,'default':![]},'canAddMarker':{"\u0074\u0079\u0070\u0065":Boolean,"\u0064\u0065\u0066\u0061\u0075\u006c\u0074":![]},"\u006f\u006e\u006c\u0079\u0056\u0069\u0065\u0077":{"\u0074\u0079\u0070\u0065":Boolean,"\u0064\u0065\u0066\u0061\u0075\u006c\u0074":![]},'currAlbumnIndex':{"\u0074\u0079\u0070\u0065":Number},'littlePlanetIntro':{"\u0074\u0079\u0070\u0065":Boolean,'default':![]},"\u0069\u006d\u0067\u004c\u0069\u0073\u0074":[],'hasGallery':{"\u0074\u0079\u0070\u0065":Boolean,'default':![]},'albumnList':{'type':Array}},'components':{},"\u0064\u0061\u0074\u0061"(){return{'changeViewerType':null,'currAlbumnIndexSave':null,'autorotateEnabled':![],'hasUpdateImglist':!![],'viewerId':'viewer',"\u0064\u0079\u006e\u0061\u006d\u0069\u0063\u0048\u0054\u004d\u004c":'','viewer':'','panoramaUrl':"","\u006d\u0061\u0072\u006b\u0065\u0072\u0073\u0050\u006c\u0075\u0067\u0069\u006e":'',"\u0061\u0075\u0074\u006f\u0072\u006f\u0074\u0061\u0074\u0065\u0050\u006c\u0075\u0067\u0069\u006e":"","\u0067\u0061\u006c\u006c\u0065\u0072\u0079\u0050\u006c\u0075\u0067\u0069\u006e":'','currIndex':0x0,"\u0063\u0075\u0072\u0072\u0049\u006e\u0064\u0065\u0078\u0053\u0061\u0076\u0065":null,'animatedValues':{"\u0070\u0069\u0074\u0063\u0068":{"\u0073\u0074\u0061\u0072\u0074":-Math["\u0050\u0049"]/(0xc7388^0xc738a),"\u0065\u006e\u0064":0.2},"\u0079\u0061\u0077":{'start':Math["\u0050\u0049"],'end':0x0},"\u007a\u006f\u006f\u006d":{'start':0x0,'end':0x32},"\u0066\u0069\u0073\u0068\u0065\u0079\u0065":{"\u0073\u0074\u0061\u0072\u0074":0x2,'end':0x0}},"\u0064\u0065\u0066\u0061\u0075\u006c\u0074\u0056\u0069\u0065\u0077\u0065\u0072\u004f\u0070\u0074\u0069\u006f\u006e\u0073":{'pitch':0x0,'yaw':0x0,"\u007a\u006f\u006f\u006d":0x32,'fisheye':0x0},'curMarkerPosition':{'pitch':0x0,'yaw':0x0},"\u0063\u0075\u0072\u004d\u0061\u0072\u006b\u0065\u0072\u0049\u0064":""};},'created'(){},"\u0062\u0065\u0066\u006f\u0072\u0065\u0044\u0065\u0073\u0074\u0072\u006f\u0079"(){this["\u0076\u0069\u0065\u0077\u0065\u0072"]["\u0064\u0065\u0073\u0074\u0072\u006f\u0079"]();this['viewer']['renderer']["\u0072\u0065\u006e\u0064\u0065\u0072\u0065\u0072"]["\u0066\u006f\u0072\u0063\u0065\u0043\u006f\u006e\u0074\u0065\u0078\u0074\u004c\u006f\u0073\u0073"]();},"\u006d\u006f\u0075\u006e\u0074\u0065\u0064"(){this["\u0061\u006e\u0069\u006d\u0061\u0074\u0065\u0064\u0056\u0061\u006c\u0075\u0065\u0073"]['pitch']['end']=this["\u0064\u0065\u0066\u0061\u0075\u006c\u0074\u0041\u006e\u0067\u006c\u0065\u0056\u0069\u0065\u0077"]["\u0070\u0069\u0074\u0063\u0068"];this["\u0061\u006e\u0069\u006d\u0061\u0074\u0065\u0064\u0056\u0061\u006c\u0075\u0065\u0073"]['yaw']['end']=this["\u0064\u0065\u0066\u0061\u0075\u006c\u0074\u0041\u006e\u0067\u006c\u0065\u0056\u0069\u0065\u0077"]['yaw'];this["\u0070\u0061\u006e\u006f\u0072\u0061\u006d\u0061\u0055\u0072\u006c"]=this["\u0069\u006d\u0067\u004c\u0069\u0073\u0074"][0xcb7b6^0xcb7b6]['panorama'];let _0x54ac6d="".split("").reverse().join("");for(var _0xf8ccce=0xb5c08^0xb5c08;_0xf8ccce<(0x93742^0x93744);_0xf8ccce++){_0x54ac6d+=Math["\u0066\u006c\u006f\u006f\u0072"](Math["\u0072\u0061\u006e\u0064\u006f\u006d"]()*(0x26e13^0x26e19));}this["\u0076\u0069\u0065\u0077\u0065\u0072\u0049\u0064"]="-reweiv".split("").reverse().join("")+new Date()['getTime']()+_0x54ac6d;this['dynamicHTML']="\"=di vid<".split("").reverse().join("")+this["\u0076\u0069\u0065\u0077\u0065\u0072\u0049\u0064"]+">vid/<>\";%001:thgieh;%001:htdiw\"=elyts \"".split("").reverse().join("");setTimeout(()=>{},0xbc7a5^0xbc76d);this["\u0024\u006e\u0065\u0078\u0074\u0054\u0069\u0063\u006b"](()=>{this['initViewer']();if(!this['onlyView']){this['handelListenerViewerClick']();this["\u0068\u0061\u006e\u0064\u006c\u0065\u0053\u0065\u006c\u0065\u0063\u0074\u004d\u0061\u0072\u006b\u0065\u0072"]();this['handleHoverMarker']();this["\u0068\u0061\u006e\u0064\u006c\u0065\u004c\u0065\u0061\u0076\u0065\u004d\u0061\u0072\u006b\u0065\u0072"]();this["\u0024\u006e\u0065\u0078\u0074\u0054\u0069\u0063\u006b"](()=>{this['handleGalleryChange']();});this["\u006c\u0069\u0073\u0074\u0065\u006e\u0065\u0072\u0050\u0061\u006e\u0065\u006c"]();}});},"\u0077\u0061\u0074\u0063\u0068":{'imgList'(_0x3cabbf,_0x170ac7){this["\u0069\u006e\u0069\u0074\u0050\u0068\u006f\u0074\u006f\u0073"]();}},'methods':{'initViewer'(){const _0x45c1d1=this;let _0x6b6e27={"\u0063\u006f\u006e\u0074\u0061\u0069\u006e\u0065\u0072":this["\u0076\u0069\u0065\u0077\u0065\u0072\u0049\u0064"],'panorama':this['panoramaUrl'],'caption':'','loadingImg':'','mousewheelCtrlKey':![],'defaultPitch':_0x45c1d1['defaultAngleView']['pitch'],'defaultYaw':_0x45c1d1['defaultAngleView']['yaw'],'fisheye':_0x45c1d1['defaultViewerOptions']["\u0066\u0069\u0073\u0068\u0065\u0079\u0065"],'description':'<div\x20>hello,nihao\x20</div>','navbar':![],'plugins':[[GalleryPlugin,{'visibleOnLoad':![],'hideOnClick':![],"\u0074\u0068\u0075\u006d\u0062\u006e\u0061\u0069\u006c\u0053\u0069\u007a\u0065":{'width':0x50,'height':0x50}}],[AutorotatePlugin,{'autostartDelay':null,'autorotatePitch':_0x45c1d1['animatedValues']['pitch']["\u0065\u006e\u0064"],'autostartOnIdle':![],'autorotateSpeed':'1rpm'}],[MarkersPlugin,{'markers':[]}]]};if(typeof this['panoramaUrl']!="gnirts".split("").reverse().join("")){_0x6b6e27['adapter']=EquirectangularTilesAdapter;}this["\u0076\u0069\u0065\u0077\u0065\u0072"]=new Viewer(_0x6b6e27);this['viewer']["\u0073\u0065\u0074\u004f\u0070\u0074\u0069\u006f\u006e\u0073"]({'loadingImg':'','loadingTxt':"\u52a0\u8f7d\u4e2d\u002e\u002e\u002e"});this['currAlbumnIndexSave']=this['currAlbumnIndex'];_0x45c1d1['markersPlugin']=_0x45c1d1['viewer']['getPlugin'](MarkersPlugin);_0x45c1d1['autorotatePlugin']=