简单说一下准备工作
安装 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
Vue 全景图 photo-sphere-viewer的使用以及改变图片
原文：https://www.cnblogs.com/cangqinglang/p/12582932.html