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

喜歡這篇文章？歡迎打賞~~