VUE实现photo-sphere-viewer 全景图

飞上云端看世界

已于 2024-01-25 10:39:08 修改

阅读量1.1k

点赞数 12

分类专栏：功能文章标签： vue 3d java 前端

于 2024-01-24 11:54:31 首次发布

本文链接：https://blog.csdn.net/weixin_49983925/article/details/135814395

版权

功能专栏收录该内容

3 篇文章 0 订阅

订阅专栏

photo-sphere-viewer 全景图

前言
1、插件依赖下载
2、引用
3.简单的全景图vue代码
全景图添加标记Markers插件

前言

PhotoSphereViewer框架是基于Three.js二次封装的一个显示Photo Sphere全景照片的JavaScript库。可以制作全景图，如VR看房那种。
官方文档： photo-sphere-viewer.js.org/

1、插件依赖下载

npm install photo-sphere-viewer

2、引用

import { Viewer } from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

3.简单的全景图vue代码

<template>
  <div id="viewer"></div>
</template>
<script>
    import {Viewer} from 'photo-sphere-viewer'
    import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
    export default {
        data(){
            return{
                viewer:'',
                imgurl1:'https://photo-sphere-viewer-data.netlify.app/assets/sphere-cropped.jpg',
            }
        },
        mounted(){
            this.viewer = new Viewer({
                container:document.querySelector('#viewer'),
                panorama:this.imgurl1,
                size:{
                    width: '100vw',
                    height: '50vh',
                },
            });
        }
    }
</script>

全景图添加标记Markers插件

Markers插件
官方插件（在左侧菜单中列出）可在目录photo-sphere-viewer内的主软件包中找到dist/plugins。一些插件还具有其他CSS文件。

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

完整代码

<template>
  <div class="demo-container">
    测试
    <div id="viewer"></div>
    <ul class="item-container">
      <li
        v-for="(item, index) in itemArr"
        :key="index"
        @click="setViewer(item.img)"
      >
        {{`全景图${index+1}`}}
      </li>
    </ul>
  </div>
</template>

<script>
import { Viewer } from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

import { MarkersPlugin } from 'photo-sphere-viewer/dist/plugins/markers'
import 'photo-sphere-viewer/dist/plugins/markers.css'
import img1 from '@assets/photo/全景图1.jpg'
import img2 from '@assets/photo/全景图2.jpg'
import img3 from '@assets/photo/全景图3.jpg'
import img4 from '@assets/photo/全景图4.jpg'
import img5 from '@assets/photo/平面图1.png'
import img6 from '@assets/photo/cdn.btime.gif'
import img7 from '@assets/photo/jdoaj.png'

export default {
  name: 'demo',
  data() {
    return {
      viewer: '',
      markersPlugin: '',
      itemArr: [
        {
          // img: require('@/assets/imgs/demo/demo1.jpeg'),
          img: img1
        },
        {
          img: img2
        },
        {
          img: img3
        },
        {
          img: img4
        },
        {
          //用一张平面图来看看区别
          img: img5
        }
      ]
    }
  },
  methods: {

    //创建viewer
    setViewer(panorama) {
      // 切换场景的话 先销毁原来的场景，从页面中删除Viewer并释放three.js 使用的内存。
      // Vue项目中，切换全景图时，需要先卸载当前的全景图
      // 有时候this.viewer.destroy()执行会报错 如果报错 这里手动remove掉对应的元素
      if (this.viewer) 
      try {
        this.viewer.destroy()
      } catch (e) {
        console.log(e)
        const viewer = document.querySelector('#viewer')
        viewer.removeChild(viewer.childNodes[0])
      }
      //初始化全景图
      this.viewer = new Viewer({
        //全景图的容器，可以是DOM元素或者DOM的ID
        // container: document.querySelector('#viewer'),
        container:'viewer',
        navbar: [ // 底部导航栏，依次是自动播放、缩放、图库(gallery)、文字、全屏
                    'autorotate',
                    'zoom', 
                    'caption',
                    'fullscreen',
                ],  
                lang: { // 鼠标移到导航栏显示的文字说明
                    autorotate: '自动旋转',
                    zoom      : '缩放',
                    zoomOut   : '缩小',
                    zoomIn    : '放大',
                    fullscreen: '全屏'
                },
        //全景图适配器
        // adapter: 'equirectangular',
        //全景图地址，如果用默认的适配器，只支持传单个
        panorama: panorama,
        //全景图宽高
        size: {
          width: '1586px',
          height: '800px'
        },
        // 最小视野（对应于最大缩放），介于 1 和 179 之间。默认30,
        minFov:30,
        //最大视野（对应于最小缩放），介于 1 和 179 之间。默认90。初始越大相当于图放的越大
        maxFov:90,
        // 初始缩放级别，介于 0（对于 maxFov）和 100（对于 minfov）之间。
        defaultZoomLvl:60,
        //使用 true 启用鱼眼效果或指定效果强度 (true = 1.0)。(此模式可能会对标记渲染产生副作用)
        fisheye:false,
        //初始精度 初始经度，介于 0 和 2π 之间。
        defaultLong:0,
        //初始纬度，介于 -π/2 和 π/2 之间。
        defaultLat:0,
        //自动旋转开始后的延迟，以毫秒为单位(没试验成功)
        // autorotateDelay:10,
        //自动旋转速度 default: 2rpm
        // autorotateSpeed:0.3,
        //执行自动旋转的纬度  default: defaultLat
        // autorotateLat:0,

        //插件
        plugins: [
          [
            MarkersPlugin,
            {
              markers: [
                
              ]
            }
          ]
        ],
        //导航栏中显示的文本。如果导航栏被禁用，它无论如何都会显示，但没有按钮。允许使用 HTML
        caption:'标题2',
        //新增“i”按钮，当用户单击“i”按钮时，在侧面板中显示的文本
        description:'description'
      })

      // 等待Viewer就绪（不懂）
      this.viewer.once('ready', () => {
        console.log('ready')
           // 自动旋转
        // this.viewer.startAutorotate()
      })

      this.markersPlugin = this.viewer.getPlugin(MarkersPlugin)

      this.markersPlugin.on('select-marker', (e, marker) => {
        // 点击选中标注
        console.log('select-marker e:', e)
        console.log('marker:', marker)
        if (e.args[0].config.note) this.setViewer(this.itemArr[e.args[0].config.note].img)
      })

      //点击触发事件
      this.viewer.on('click', (e, data) => {
        console.log("data",data);
        //随机整数
        const num = 1 + Math.round(Math.random() * 3  )
        console.log('num:', num)
        // 添加标注
        this.markersPlugin.addMarker({
          id: `mark${Math.random() * 10}`,
          tooltip: `213123
              <p>点击标注跳去${num + 1}全景图</p></p>
              <img style="width:100px;height:100px;" src= ${img6} />
          `,
          html: `
            <p class="remark">点击标注跳去${num + 1}全景图</p>
            <p class="remark">这里是标记${Math.floor(data.longitude * 200) / 100} - ${Math.floor(data.latitude * 200) / 100}
            </p>
            <img  src=${img7} />
            `,
          longitude: data.longitude,
          latitude: data.latitude,
          anchor: 'center center',
          note: num
        })
        let configArr = Object.keys(this.markersPlugin.markers).map(
          (item) => this.markersPlugin.markers[item].config
        )
        localStorage.setItem('configArr', JSON.stringify(configArr))
      })
    }
  },
  mounted() {
    debugger
    this.setViewer(this.itemArr[0].img)
    debugger
    const configArr = JSON.parse(localStorage.getItem('configArr'))
    this.viewer.once('ready', () => {
      //标注的对象
      configArr.forEach((item) => {
        this.markersPlugin.addMarker(item)
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  position: relative;
  min-width: 1439px;
  margin: 0 auto;

  #viewer {
    margin: 0 auto;

    ::v-deep .psv-container {

      .psv-marker {
        border: 1px solid  white;
        padding: 10px;

        .remark {
          padding: 10px 15px;
          color: white;
        }
        //标注弹框的小图片大小
        img {
          width: 50px;
          height: 40px;
          margin: 0 auto;
          display: block;
        }
      }

      .psv-tooltip {
        .psv-tooltip-content {
          img {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            display: block;
          }
        }
      }
    }
  }

  .item-container {
    text-align: center;
    margin-top: 20px;
    li {
      cursor: pointer;
      display: inline-block;
      padding: 10px 20px;
      &:hover {
        background-color: blue;
        color: white;
      }
    }
  }
}
</style>

注释代码里面也有可以复制过去更换参数自己试一试

panorama：必填参数，全景图的路径。
container：必填参数，放置全景图的div元素。
autoload：可选，默认值为true，true为自动调用全景图，false为在后面加载全景图(通过.load()方法)。
us empdata：可选，默认值为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：可选，默认值为 Math.PI/360，mouse/touch移动时每像素经过的经度值。
lat_offset：可选，默认值为 Math.PI/180，mouse/touch移动时每像素经过的纬度值。
time_anim：可选，默认值为2000，全景图在time_anim毫秒后会自动进行动画。(设置为false禁用它)
theta_offset：过时的选项，可选，默认值为1440，自动动画时水平方向的速度。
anim_speed：可选，默认值为2rpm，动画的速度，每秒/分钟多少radians/degrees/revolutions。
navbar：可选值，默认为false。显示导航条。
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。当全景图准备就绪并且第一张图片显示时的回调函数。