photo-sphere-viewer 加载全景图

<template>

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

</template>

<script>

import { Viewer } from "photo-sphere-viewer";

import { MarkersPlugin } from "photo-sphere-viewer/dist/plugins/markers"; //Markers插件

import "photo-sphere-viewer/dist/photo-sphere-viewer.css";

import "photo-sphere-viewer/dist/plugins/markers.css"; //Markers插件

export default {

  data () {

    return {

      viewer: "",

      imgurl1: require("../assets/666.jpeg"),

      imgurl2: require("../assets/bscj.jpg"),

      imgurl3: require("../assets/123.png"),

      imgurl4: require("../assets/bscj.jpg"),

      markers: [

        {

          id: "circle1", //标记的唯一标识符

          tooltip: "circle1", //提示的内容

          // circle: 30, //直径

          svgStyle: {

            fill: "rgba(255,255,0,0.3)",

            stroke: "#ccc",

            strokeWidth: "2px", //边框

          },

          "html": "<div><i class=\"el-icon-bottom\"></i><p class=\"bgc\">天空</p></div>",

          visible: true, //标记的初始可见性。默认true

          longitude: 5.75, //位置

          latitude: -0.37, //位置

          anchor: "center right",

          // content: "9999999999", //点击标记后侧边列表框显示的内容

          // image: 'assets/123.png',

          // defaultZoomLvl:-30

        },

        {

          id: "circle2", //标记的唯一标识符

          tooltip: "circle2", //提示的内容

          circle: 30, //直径

          svgStyle: {

            fill: "rgba(255,255,0,0.3)",

            stroke: "red",

            strokeWidth: "2px", //边框

          },

          longitude: -1.6, //位置

          latitude: -0.28, //位置

          anchor: "center right",

          visible: false, //标记的初始可见性。默认true

          // image: this.imgurl3,

        },

        {

          id: "circle3",

          tooltip: "circle3", //提示的内容

          longitude: -1.9, //位置

          latitude: -0.28, //位置

          rect: { width: 100, height: 100 }, //矩形宽高

          svgStyle: {

            fill: "rgba(194,29,18,1)",

            cursor: "help",

          },

          visible: false,

        },

        {

          id: "circle4",

          tooltip: "circle4", //提示的内容

          x: 2058,

          y: 1069,

          html: "HTML <b>marker</b> &hearts;",

          anchor: "bottom right",

          scale: [0.5, 1.5],

          style: {

            maxWidth: "100px",

            color: "white",

            fontSize: "20px",

            fontFamily: "Helvetica, sans-serif",

            textAlign: "center",

          },

          visible: false,

        },

      ],

    }

  },

  mounted () {

    this.viewer = new Viewer({

      container: document.querySelector("#viewer"), // 全景图的容器

      panorama: this.imgurl1, // 全景图的地址

      size: { // 全景图的大小

        width: "90vw",

        height: "90vh",

      },

      // minFov: 30,  // 最小视野（对应于最大缩放），介于 1 和 179 之间。

      // maxFov: 150, // 最大视野（对应于最小缩放），介于 1 和 179 之间

      // autorotateLat: 0,// 执行自动旋转的纬度

      // autorotateSpeed: 0.20943951023931962,//自动旋转速度

      // autorotateDelay: 1,//1毫秒后启动自动旋转

      // defaultZoomLvl: 0,//默认缩放 初始缩放级别，介于 0（对于 maxFov）和 100（对于 minfov）之间。

      // fisheye: true, // 使用 true 启用鱼眼效果或指定效果强度 (true = 1.0)

      // defaultLong: 0.0027446609001040845,//经度

      // defaultLat: 0.015220228499811306,//维度

      // loadingImg: '', //显示在加载圆圈中心的图像的路径，也就是loading图

      // loadingTxt: '', //加载圈中心显示的文本，仅在未提供loadingImg时使用

      plugins: [ // 插件

        [

          MarkersPlugin,

          { markers: this.markers }

        ],

      ],

    });

    // 初始化之后，可以使用getPlugin方法获得插件实例，从而允许在插件上调用方法并订阅事件

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

    // 点击事件监听

    this.viewer.on('click', (e, data) => {

      console.log(`${data.rightclick ? 'right clicked' : 'clicked'} at longitude: ${data.longitude} latitude: ${data.latitude}`);

    });

    // 监听点击marker

    markersPlugin.on("select-marker", (e, marker) => {

      console.log(marker.id);

      const markerid = marker.id;

      this.viewer

        // 动画

        .animate({

          longitude: marker.config.longitude,

          latitude: marker.config.latitude,

          zoom: 100,

          speed: "-5rpm",

        })

        .then(() => {

          // markersPlugin.clearMarkers()//移除所有markers

          // this.viewer.rotate({x: 1500,y: 600,});//改变摄像机的位置

          markersPlugin.hideMarker(marker.id);//隐藏点击的marker

          // this.viewer.defaultZoomLvl=0

          if (markerid == "circle1") {

            // setPanorama参数：图片地址、下一个场景的初始经纬度、transition 默认（false）

            this.viewer.setPanorama(this.imgurl2, { longitude: 6.232589417434965, latitude: 0.07016253709436304 }, true).then(() => {

              markersPlugin.showMarker("circle2")//显示你需要显示的marker

            }

            );

            console.log(this.viewer.defaultZoomLvl)

          }

          if (markerid == "circle2") {

            this.viewer

              .setPanorama(this.imgurl3, { longitude: 6.113027338614143, latitude: -2.914362084993627e-9 }, true)

              .then(() => markersPlugin.showMarker("circle3"));

          }

          if (markerid == "circle3") {

            this.viewer

              .setPanorama(this.imgurl4)

              .then(() => markersPlugin.showMarker("circle4"));

          }

          if (markerid == "circle4") {

            this.viewer.setPanorama(this.imgurl1)

              .then(() => markersPlugin.showMarker("circle1"));

          }

          this.viewer.zoom(0)//改变缩放

        });

    });

  },

};

</script>

<style >

.bgc {

  padding: 5px 10px;

  border-radius: 8px;

  background-color: rgba(0, 0, 0, 0.5);

  color: antiquewhite;

}

</style>