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

简单说一下准备工作

• 安装 photo-sphere-viewer依赖

    npm install  photo-sphere-viewer --save-dev 

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

    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的值来限制