vue 项目中使用photo-sphere-viewer实现vr720度全景图片预览

最近项目中要求vr功能，可以进行图片的全景查看，在此，用到了vue里的一个实现全景预览的插件：photo-sphere-viewer。移动端和PC端都可以使用：下面给大家介绍一下使用步骤及方法。
1、安装 photo-sphere-viewer依赖

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

2、引入：在你需要使用的页面引入插件

  import {Viewer} from 'photo-sphere-viewer'
  import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'
  import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
  import 'photo-sphere-viewer/dist/plugins/markers.css';

3、接下来就可以正常使用

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

  import {getBizSectionVrList} from "../../../api/api";//调用接口
  import {Toast} from "vant";//消息提示
  import {baseUrlMobile} from '../../../api/http'//调用后台接口
  export default {
    data(){
      return{
        profileName:'',
        profileId:'',
        viewer:'',
        imageList:[]


      }
    },
    mounted(){
      this.getProfileVRInfoList()
      // this.initPhotoSphere(this.imageList)

    },
    beforeMount() {
      this.profileName=this.$route.query.profileName
      this.profileId=this.$route.query.profileId
    },
    methods:{
      initPhotoSphere(imageList){
        let _this=this
        let i=0
        _this.viewer = new Viewer({
          container:document.querySelector('#viewer'),
          panorama:baseUrlMobile+imageList[i].filePath,
          caption: _this.profileName,
          navbar:true,
          size: {
            width: '100%',
            height: _this.isMobile()? screen.availHeight : '100%'
          },
          navbar: [
            'autorotate',
            'zoom',
            'markers',
            'caption',
            'fullscreen'
          ],
          plugins: [
            [MarkersPlugin, {
              markers: [
                {
                  id:'circle',
                  image:require('../../../../static/icon/location.png'),
                  width:42,
                  height:42,
                  longitude: 20,
                  latitude:-0.15,
                  anchor:'bottom center',
                  className:'markers',
                  tooltip:{
                    content : '欢迎进入下一场景',
                    position: 'bottom left'
                  },
                  visible:true
                }
              ],
            }],
          ],
        });
        const markersPlugin = _this.viewer.getPlugin(MarkersPlugin);

        markersPlugin.on('select-marker', (e, marker) => {
          this.viewer.animate({
            longitude: marker.config.longitude,
            latitude: marker.config.latitude,
            zoom: 100,
            speed: '-2rpm',
          }).then(() =>{
            i=i+1 ===baseUrlMobile+imageList.length?0:i+1;
            this.viewer.setPanorama(
              baseUrlMobile+imageList[i].filePath
            ).then(() =>{
              markersPlugin.updateMarker({
                id: marker.id,
                longitude: -1.8,
                latitude: -0.28,
              }),
                this.viewer.animate({
                  zoom: 50,
                  speed: '2rpm',
                }).then(() =>{
                  imageList[i].filePath = baseUrlMobile+imageList[i].filePath;
                })
            })
          })
        });
      },

      isMobile() {

        let ua = navigator.userAgent;

        let ipad = ua.match(/(iPad).*OS\s([\d_]+)/),

          isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
          isAndroid = ua.match(/(Android)\s+([\d.]+)/),
          isMobile = isIphone || isAndroid;
        return isMobile;

      },
      onClickLeft(){
        this.$router.push({path: '/Navigation',
          query:{
            profileId:this.profileId,
            profileName:this.profileName
          }})
      },
      getProfileVRInfoList(){
        getBizSectionVrList(this.profileId).then((res) => {
          if (res.code == 200) {
                    this.imageList = res.rows;
                    if (res.rows.length == 0) {
                        this.isData = false;
                    } else {
                        this.isData = true;
                        this.$nextTick(() => {
                            this.initPhotoSphere(this.imageList);
                        });
                    }
                } else {
                    Toast.fail(res.msg);
                }
        });
      }
    },

  }