Vue 全景图 photo-sphere-viewer的使用以及改变图片

1.安装 photo-sphere-viewer依赖

npm install photo-sphere-viewer --save

2.在你需要用到的页面引入文件

import PhotoSphereViewer from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

3.使用

<div id="viewer"></div>
data() {
 　　return {
 　　　　imgUrl: require('../../assets/panorama-image/noImage.png')
　　}
},
methods: {
　　initPhotoSphere() {
　　　　this.PSV = PhotoSphereViewer({
　　　　　　container: document.getElementById('viewer'),
　　　　　　panorama: this.imgUrl,
　　　　　　size: {
　　　　　　　　width: '100%',
　　　　　　　　height: screen.availHeight
　　　　　　},
　　　　　　// caption: '鸟瞰图',
　　　　　　caption: ' ',
　　　　　　time_anim: false,
　　　　　　default_long: 1.4441088145446443,
　　　　　　default_lat: 0.0800613513013615,
　　　　　　sphere_correction: {pan: 30.01, tilt: 0, roll: 0},
　　　　　　// max_fov: 100, // 最大缩放值
　　　　　　// min_fov: 99, // 最小缩放值
　　　　　　default_fov: 100, // 默认缩放值，在1-179之间
　　　　　　// latitude_range: [0,0],//禁止上下滑动
　　　　　　// mousewheel: false, // 禁止鼠标滚轮缩放
　　　　　　// navbar: false,
　　　　　　navbar: [
　　　　　　　　'autorotate',
　　　　　　　　'zoom',
　　　　　　　　'markers',
　　　　　　　　'caption',
　　　　　　　　'fullscreen'
　　　　　　],
　　　　　　theta_offset: 1000, // 旋转速度
　　　　　　// markers: this.markersData
　　　　})
　　}
}

兼容各端切换图片

// 兼容pc和安卓
if (this.PSV) {
　　this.PSV.destroy()
}
this.$nextTick(() => {
　　this.initPhotoSphere()
})


// 兼容ios  Cannot load image的报错
if (this.PSV) {
　　this.PSV.setPanorama(this.imgUrl, true, true)
} else {
　　this.initPhotoSphere()
}


// 兼容大频率切换图片，声明一个imageLoaded控制PSVError: Loading already in progress
if (this.PSV) {
　　this.imageLoaded = false
　　console.log(this.imageLoaded)
　　this.PSV.setPanorama(this.imgUrl, true, true).then(() => {
　　this.imageLoaded = true
　　console.log('-------替换图片完成--------')
});
} else {
　　this.initPhotoSphere()
}