vue 全景圖 photo-sphere-viewer 實作

親測可用，一步一步教你在vue中使用photo-sphere-viewer，僅需5分鐘！！！

1.安裝photo-sphere-viewer的3.5.1版本

npm install [email protected] --save

2. 頁面引入

import photoSphereViewer from 'photo-sphere-viewer';
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
           

3.搞一張全景圖，如果搞不到，給我留言，最晚次日上午私發你

4.引入全景圖檔

data() {
    return {
      img:require("../../img/yule/sun.jpg")
    };
  },
           

5.html代碼

<template>
  <div class="PSViewer" ref="psvdbg"></div>
</template>
           

6.方法

methods: {
    init(){
      const self =this;
      var PSV = new photoSphereViewer({
        panorama:self.img, // 圖檔路徑
        container: self.$refs.psvdbg, // 容器
        time_anim:true, //自動播放
        navbar:["fullscreen","autorotate"], // 下方導航欄
        zoom_level:100, //縮放界别，預設值為0，範圍0-100
        default_fov:100,
        navbar_style:{
          backgroundColor:"rgba(58,67,77,0.7)"
        },
        anim_speed:"0.6rpm", // 旋轉速度
        size:{
          width:"100%",
          height:"500"
        }
      })
    }
  }
           

7.以下是完整代碼，直接複制即可使用（唯一需要改的就是圖檔的引入位址，改成你全景圖檔存儲的路徑即可）

<!-- 全景看圖 -->
<template>
  <div class="PSViewer" ref="psvdbg"></div>
</template>

<script>
import photoSphereViewer from 'photo-sphere-viewer';
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

export default {
  data() {
    return {
      img:require("../../img/yule/sun.jpg")
    };
  },
  mounted(){
    this.init()
  },

  methods: {
    init(){
      const self =this;
      var PSV = new photoSphereViewer({
        panorama:self.img, // 圖檔路徑
        container: self.$refs.psvdbg, // 容器
        time_anim:true, //自動播放
        navbar:["fullscreen","autorotate"], // 下方導航欄
        zoom_level:100, //縮放界别，預設值為0，範圍0-100
        default_fov:100,
        navbar_style:{
          backgroundColor:"rgba(58,67,77,0.7)"
        },
        anim_speed:"0.6rpm", // 旋轉速度
        size:{
          width:"100%",
          height:"500"
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
           

以上都搞定并且沒有報錯的話，你就可以看下配置參數了，自定義你自己風格的全景元件。

下面是該全景圖插件的所有可用配置參數：

panorama：必填參數，全景圖的路徑。

container：必填參數，放置全景圖的div元素。

autoload：可選，預設值為true，true為自動調用全景圖，false為在後面加載全景圖（通過.load()方法）。

usexmpdata：可選，預設值為true，如果Photo Sphere Viewer必須讀入XMP資料則為true。

default_position：可選，預設值為{}，定義預設的位置，及使用者看見的第一個點，例如：{long: Math.PI, lat: Math.PI/2}。

min_fov：可選，預設值為30，觀察的最小區域，機關degrees，在1-179之間。

max_fov：可選，預設值為90，觀察的最大區域，機關degrees，在1-179之間。

allow_user_interactions：可選，預設值為true，設定為false則禁止使用者和全景圖互動（導覽列不可用）。

tilt_up_max：可選，預設值為Math.PI/2，向上傾斜的最大角度，機關radians。

tilt_down_max：可選，預設值為Math.PI/2，向下傾斜的最大角度，機關radians。

zoom_level：可選，預設值為0，預設的縮放級别，值在0-100之間。

long_offset：可選，預設值為PI/360，mouse/touch移動時每像素經過的經度值。

lat_offset：可選，預設值為PI/180，mouse/touch移動時每像素經過的緯度值。

time_anim：可選，預設值為2000，全景圖在time_anim毫秒後會自動進行動畫。（設定為false禁用它）

theta_offset：過時的選項，可選，預設值為1440，自動動畫時水準方向的速度。

anim_speed：可選，預設值為2rpm，動畫的速度，每秒/分鐘多少radians/degrees/revolutions。

navbar：可選值，預設為false。顯示導覽列。

5
navbar_style：可選值，預設為{}。導覽列的自定義樣式。下面是可用的樣式清單：

backgroundColor：導覽列的背景顔色，預設值為rgba(61, 61, 61, 0.5)。

buttonsColor：按鈕的前景顔色，預設值為transparent。

activeButtonsBackgroundColor：按鈕激活狀态的背景顔色，預設值為rgba(255, 255, 255, 0.1)。

buttonsHeight：按鈕的高度，機關像素，預設值為20。

autorotateThickness：autorotate圖示的厚度，機關像素，預設值為1。

zoomRangeWidth：縮放的範圍，機關顯示，預設值50。

zoomRangeThickness：縮放的範圍的厚度，機關像素，預設值1。

zoomRangeDisk：縮放範圍的圓盤直徑，機關像素，預設值為7。

fullscreenRatio：全屏圖示的比例，預設值為3/4。

fullscreenThickness：全屏圖示的厚度，機關像素，預設值為2。

loading_msg：可選，預設值為Loading…，圖檔加載時的提示文字。

loading_img：可選，預設值為null，在加載時顯示的圖檔的路徑。

size：可選，預設值null，全景圖容器的最終尺寸。例如：{width: 500, height: 300}。

onready：可選值，預設值為null。當全景圖準備就緒并且第一張圖檔顯示時的回調函數。