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

简单说一下准备工作

安装 photo-sphere-viewer依赖

npm install photo-sphere-viewer --save

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

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

接下来就可以正常使用了

<div id="viewer"></div>

data() {
 　　return {
 　　　　factoryLink: require('../../assets/panorama-image/noImage.png')
　　}
},
methods: {
　　initPhotoSphere() {
　　　　this.PSV = PhotoSphereViewer({
　　　　　　container: document.getElementById('viewer'),
　　　　　　panorama: this.factoryLink,
　　　　　　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端以及Android上都没有问题。

if (this.PSV) {
　　this.PSV.destroy()
}
this.$nextTick(() => {
　　this.initPhotoSphere()
})

但是…在ios上展示的时候图片没出来，也没有Cannot load image的报错，初步判断应该不是图片路径的问题。尝试换一种切换图片的方式。如下

if (this.PSV) {
　　this.PSV.setPanorama(this.factoryLink, true, true)
} else {
　　this.initPhotoSphere()
}

此时在ios上是可以显示的，但是…哈哈哈又有了新的问题，在切换频率高时这个方法报错PSVError: Loading already in progress大概意思就是上个图还没加载完，这样我们在切换的时候可能导致图片不显示。。所以，我们将点击事件做个限制，如下

//定义了一个变量imageLoaded来判断是否加载完成，在每次切换时设为false

if (this.PSV) {
　　this.imageLoaded = false
　　console.log(this.imageLoaded)
　　this.PSV.setPanorama(this.factoryLink, true, true).then(() => {
　　this.imageLoaded = true
　　console.log('-------替换图片完成--------')
});
} else {
　　this.initPhotoSphere()
}

//然后我们就可以在点击事件的位置通过imageLoaded的值来限制
————————————————
版权声明：本文为CSDN博主「sunfan0」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_20659435/java/article/details/90901908

原文地址：https://www.cnblogs.com/cangqinglang/p/12582932.html