photo-sphere-viewer

photo-sphere-viewer

一、 安装依赖

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

二、 引入

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

三、 使用

<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: "", //
                 imgurl: [
                         require("../assets/1.jpeg"),
                         require("../assets/2.jpg"),
                         require("../assets/sphere.jpg"),
                         ],
                 imgIndex: 0,
            }
        },
        mounted() {
          this.init(this.imgurl[this.imgIndex]); //渲染
        },
        methods: {
         init(img) {
            this.viewer = new Viewer({
                 container: document.querySelector("#viewer"), //HTMLElement | string 包含全景图或元素标识符的HTML元素
        panorama: img, //_this.imgurl[_this.imgIndex], // 切换图片的数组 全景图像的路径
        // navbar: ["autorotate", "zoom", "caption", "fullscreen"], // 自带的功能如：自动旋转、下载、放大、缩小等
        // caption: '1111', // 导航栏显示文本
        // 设置图片展示的大小
        size: {
          width: "100%",
          height: "100%",
        },
        touchmoveTwoFingers: true,
        mousewheelCtrlKey: false,
        // 自定义按钮
        // navbar: [
        //   {
        //     id: "my-button", //按钮的唯一标识符，在使用该navbar.getButton()方法时很有用
        //     content: "Custom", //必需的,按钮内容
        //     title: "Hello world", //鼠标悬停在按钮上时显示工具提示
        //     className: "custom-button", //CSS类已添加到按钮
        //     onClick: () => {

        //       alert("Hello from custom button"); //必需的,单击按钮时调用的函数
        //     },
        //     // disabled:false,//最初禁用该按钮
        //     // hidden:false,//最初隐藏按钮
        //   },
        // ],
            });
        }
       }
    }
</script>

四、切换图片

<div class="toggle_icon">
      <i @click="toggleImg('reduce')"><</i>
      <i @click="toggleImg('add')">></i>
 </div>

async toggleImg(e) {
      const _this = this;

      if (e == "add") {
        if (_this.imgIndex < _this.imgurl.length - 1) {
          _this.imgIndex++;
        }
      } else {
        _this.imgIndex ? _this.imgIndex-- : _this.imgIndex;
      }
      await _this.viewer.destroy();
      _this.init(_this.imgurl[_this.imgIndex]);
    }, 

五、标记

引入

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

页面

// 所有插件均包含一个JavaScript类，该类必须提供给plugins数组。一些插件还将采用嵌套数组中提供的配置对象
this.viewer = new Viewer({
    container:document.querySelector('#viewer'),
    panorama:this.imgurl,
    size:{
        width: '100vw',
        height: '50vh',
    },
    plugins: [
        [MarkersPlugin, {
            markers: [
                {
                    id:'circle',
                    tooltip:'A circle of radius 30',
                    circle:30,
                    svgStyle : {
                        fill:'rgba(255,255,0,0.3)',
                        stroke:'yellow',
                        strokeWidth:'2px',
                    },
                    longitude: -1.5,
                    latitude: -0.28,
                    anchor: 'center right',
                }
            ],
        }],
    ],
});

// 初始化之后，可以使用getPlugin方法获得插件实例，从而允许在插件上调用方法并订阅事件。
 this.markersPlugin = _this.viewer.getPlugin(MarkersPlugin);
 this.markersPlugin.on("select-marker", (e, marker) => {
       // 点击选中标注
        console.log("select-marker e:", e);
        console.log("marker:", marker.id);
      });

// 点击添加标注
this.viewer.on("click", (e, data) => {
        // 添加标注
        const num = 1 + Math.round(Math.random() * 2);
        this.markersPlugin.addMarker({
          id: `mark${Math.random() * 10}`,
          position: { yaw: data.yaw, pitch: data.pitch },
          tooltip: `房间
                <p>1111</p>
            `,
          html: `
              <p class="remark">这里是标记</p>
              `,
          longitude: data.longitude,
          latitude: data.latitude,
          anchor: "center center",
          note: num,
        });
      });

// 删除当前tag 参数穿id
this.markersPlugin.removeMarker(Id);

中文文档可以看 http://www.cbww.cn/news/32642.shtml 文档不全只展示了一部分标记的参数事件方法
官方文档  https://photo-sphere-viewer.js.org/plugins/autorotate.html#usage

六、信息调查

1、photo-sphere-viewer 是开源使用的
2、全景图片应该没什么要求 这里有一些可设置全景图的参数

pano_data: {//在此示例中，4000x2000图像用作6000x3000全景图的一部分，剩余空间将呈现为黑色。
full_width: 6000,
full_height: 3000,
cropped_width: 4000,
cropped_height: 2000,
cropped_x: 1000,
cropped_y: 500}，

3、标记如果让后端存储 应该有哪些字段