photo-sphere-viewer全景插件使用笔记

 1、安装

cnpm i photo-sphere-viewer --save

2、使用

2-1、新建Panorama组件

<template>
    <div id="viewer"></div>
    <!-- <div class="swiper">
      <div class="swiper_item" @click="changeImg(0)">
        <img src="../assets/imgs/hall1.png" alt />
      </div>
      <div class="swiper_item" @click="changeImg(1)">
        <img src="../assets/imgs/hall2.png" alt />
      </div>
      <div class="swiper_item" @click="changeImg(2)">
        <img src="../assets/imgs/hall3.png" alt />
      </div>
    </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";

export default {
  name: "HelloWorld",
  props: {
    allMarkers: {
      type: Array,
      default:()=>[]
    },
  },
  data() {
    return {
      markersPlugin: null,
      viewer: null,
      selectedImg: require("../assets/imgs/1.png"),
      imgs: [
        require("../assets/imgs/1.png"),
        require("../assets/imgs/2.png"),
        require("../assets/imgs/3.png")
      ],
      selectMarkers: [],
    };
  },

  mounted() {
    this.selectMarkers = this.allMarkers[0].markers;
    this.init();
  },
  methods: {
    init() {
      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({
        container: document.querySelector("#viewer"),
        panorama: this.selectedImg,
        caption: "全景",
        defaultLong: 0,
        defaultLat: -1,
        defaultZoomLvl: 0,
        loadingTxt: "加载中...",
        // loadingImg:'',
        // navbar: [
        //   'autorotate',
        //   'zoom',
        //   'caption',
        //   'fullscreen'
        // ],
        size: {
          width: "100vw",
          height: "100vh"
        },
        plugins: [
          [
            MarkersPlugin,
            {
              markers: this.selectMarkers
            }
          ]
        ]
      });
      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);
        this.$emit("markerClick", marker);
        //if (e.args[0].config.note)
          //this.viewer.setViewer(this.itemArr[e.args[0].config.note].img);
      });
      this.viewer.on("click", (e, data) => {
        //  console.log('点击事件对象:', e)
        // console.log('点击事件数据data:', data)
        // 添加标注
        // let configArr = Object.keys(this.markersPlugin.markers).map(
        //   item => this.markersPlugin.markers[item].config
        // );
        // localStorage.setItem("configArr", JSON.stringify(configArr));
      });
      this.viewer.on('position-updated', (e, position) => {
        // console.log(`new position is longitude: ${position.longitude} latitude: ${position.latitude}`);
      });

    },
    changeImg(index) {
      this.selectedImg = this.imgs[index];
      //this.viewer.setPanorama(this.selectedImg);
      this.selectMarkers = this.allMarkers[index].markers;
      this.init();
    }
  },
  watch: {
    allMarkers (newValue, oldValue) {

    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

  #viewer {
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  // .swiper {
  //   position: absolute;
  //   left: 0;
  //   top: 30%;
  //   display: flex;
  //   align-items: center;
  //   cursor: pointer;
  //   z-index: 6;
  //   background: rgba(0, 0, 0, 0.5);
  //   width: 100%;
  //   height: 100px;
  //   justify-content: center;
  //   .swiper_item {
  //     width: 180px;
  //     height: 90px;
  //     border: 2px solid #fff;
  //     img {
  //       width: 100%;
  //       height: 100%;
  //     }
  //   }
  // }

</style>

2-2、在父组件中使用

 <Viewer ref="viewer" :allMarkers="allMarkers" @markerClick="markerClick"></Viewer>

import Viewer from "@/components/Panorama";
components: {
    Viewer,
},
data() {
    return {
         allMarkers: [
        {
          id: 1,
          markers: [
            {
              id: "circle1",
              tooltip: "告别厅",
              image: require("../assets/imgs/location.png"),
              width: 42,
              height: 42,
              type: 2, //0：火化间；1：冷藏间；2：礼厅；3：整容室；4：寄存楼
              latitude: -0.4221159803388941,
              longitude: 0.03261432372133218,
              //image:require('http://r7usw4smv.hn-bkt.clouddn.com/location.png'),
              // circle: 30,
              // svgStyle: {
              //   fill: "rgba(255,255,0,0.3)",
              //   stroke: "yellow",
              //   strokeWidth: "2px"
              // },
              tooltip: {
                content: "告别厅",
                position: "top center"
              },

              anchor: "center right"
            },
            {
              id: "circle2",
              tooltip: "火化车间",
              image: require("../assets/imgs/location.png"),
              width: 42,
              height: 42,
              type: 0, //0：火化间；1：冷藏间；2：礼厅；3：整容室；4：寄存楼
              latitude: -0.3096705823556736,
              longitude: 1.1343366046831023,
              //image:require('http://r7usw4smv.hn-bkt.clouddn.com/location.png'),
              // circle: 30,
              // svgStyle: {
              //   fill: "rgba(255,255,0,0.3)",
              //   stroke: "yellow",
              //   strokeWidth: "2px"
              // },
              tooltip: {
                content: "火化车间",
                position: "top center"
              },

              anchor: "center right"
            },
            {
              id: "circle3",
              tooltip: "冷藏车间",
              image: require("../assets/imgs/location.png"),
              width: 42,
              height: 42,
              type: 1, //0：火化间；1：冷藏间；2：礼厅；3：整容室；4：寄存楼
              latitude: -0.28699595792868204,
              longitude: 0.9175876718648941,
              //image:require('http://r7usw4smv.hn-bkt.clouddn.com/location.png'),
              // circle: 30,
              // svgStyle: {
              //   fill: "rgba(255,255,0,0.3)",
              //   stroke: "yellow",
              //   strokeWidth: "2px"
              // },
              tooltip: {
                content: "冷藏车间",
                position: "top center"
              },

              anchor: "center right"
            }
          ]
        },
        {
          id: 2,
          markers: [
            {
              id: "circle21",
              tooltip: "告别厅",
              image: require("../assets/imgs/location.png"),
              width: 42,
              height: 42,
              type: 2, //0：火化间；1：冷藏间；2：礼厅；3：整容室；4：寄存楼
              longitude: 3.0766780303950747,
              latitude: -0.21467843779267137,
              //image:require('http://r7usw4smv.hn-bkt.clouddn.com/location.png'),
              // circle: 30,
              // svgStyle: {
              //   fill: "rgba(255,255,0,0.3)",
              //   stroke: "yellow",
              //   strokeWidth: "2px"
              // },
              tooltip: {
                content: "告别厅",
                position: "top center"
              },

              anchor: "center right"
            },
            {
              id: "circle22",
              tooltip: "火化车间",
              image: require("../assets/imgs/location.png"),
              width: 42,
              height: 42,
              type: 0, //0：火化间；1：冷藏间；2：礼厅；3：整容室；4：寄存楼
              longitude: 3.286823799201783,
              latitude: -0.21291828556393577,
              //image:require('http://r7usw4smv.hn-bkt.clouddn.com/location.png'),
              // circle: 30,
              // svgStyle: {
              //   fill: "rgba(255,255,0,0.3)",
              //   stroke: "yellow",
              //   strokeWidth: "2px"
              // },
              tooltip: {
                content: "火化车间",
                position: "top center"
              },

              anchor: "center right"
            },
            {
              id: "circle23",
              tooltip: "冷藏车间",
              image: require("../assets/imgs/location.png"),
              width: 42,
              type: 1, //0：火化间；1：冷藏间；2：礼厅；3：整容室；4：寄存楼
              height: 42,
              longitude: 3.2390790716404045,
              latitude: -0.10984851141091401,
              //image:require('http://r7usw4smv.hn-bkt.clouddn.com/location.png'),
              // circle: 30,
              // svgStyle: {
              //   fill: "rgba(255,255,0,0.3)",
              //   stroke: "yellow",
              //   strokeWidth: "2px"
              // },
              tooltip: {
                content: "冷藏车间",
                position: "top center"
              },

              anchor: "center right"
            }
          ]
        },
        {
          id: 3,
          markers: [
            {
              id: "circle31",
              tooltip: "火化车间",
              image: require("../assets/imgs/location.png"),
              width: 42,
              height: 42,
              type: 0, //0：火化间；1：冷藏间；2：礼厅；3：整容室；4：寄存楼
              longitude: 3.473472070069134,
              latitude: -0.1269166471157681,
              //image:require('http://r7usw4smv.hn-bkt.clouddn.com/location.png'),
              // circle: 30,
              // svgStyle: {
              //   fill: "rgba(255,255,0,0.3)",
              //   stroke: "yellow",
              //   strokeWidth: "2px"
              // },
              tooltip: {
                content: "火化车间",
                position: "top center"
              },

              anchor: "center right"
            },
            {
              id: "circle32",
              tooltip: "告别厅",
              image: require("../assets/imgs/location.png"),
              width: 42,
              height: 42,
              type: 2, //0：火化间；1：冷藏间；2：礼厅；3：整容室；4：寄存楼
              longitude: 3.328840666762973,
              latitude: -0.1983232261151171,
              //image:require('http://r7usw4smv.hn-bkt.clouddn.com/location.png'),
              // circle: 30,
              // svgStyle: {
              //   fill: "rgba(255,255,0,0.3)",
              //   stroke: "yellow",
              //   strokeWidth: "2px"
              // },
              tooltip: {
                content: "告别厅",
                position: "top center"
              },

              anchor: "center right"
            },
            {
              id: "circle33",
              tooltip: "冷藏车间",
              image: require("../assets/imgs/location.png"),
              width: 42,
              height: 42,
              type: 1, //0：火化间；1：冷藏间；2：礼厅；3：整容室；4：寄存楼
              longitude: 3.5987922730603397,
              latitude: -0.23625929132905643,
              //image:require('http://r7usw4smv.hn-bkt.clouddn.com/location.png'),
              // circle: 30,
              // svgStyle: {
              //   fill: "rgba(255,255,0,0.3)",
              //   stroke: "yellow",
              //   strokeWidth: "2px"
              // },
              tooltip: {
                content: "冷藏车间",
                position: "top center"
              },

              anchor: "center right"
            }
          ]
        }
      ], //馆内标记点
}
},
methods:{
     //选择馆
    changeHall(num) {
      this.selectBtn = `b${num + 1}`;
      this.init();
      //获取标记点

      this.$refs.viewer.changeImg(num);
    },
    //点击标记点获取数据
    async markerClick(marker) {
      // console.log(marker,'点击的标记点')
      this.loading=Loading.service({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      let params = {
        orgCode: this.selectBtn,
        type: marker.config.type
      };
      let res = await fetchNowData(params);

    },
}