pannellum插件 多分辨率 多场景转换 自动加载

• 简单功能可以使用vue的插件

• vue-pannellum组件
  https://github.com/jarvisniu/vue-pannellum

• pannellum插件
  https://pannellum.org/

• 下载pannellum，多分辨的json文件使用python转换

• 创建全景图模块，使用type: “multires”,设置为多分辨率，通过python生成的json文件来将数据设置在场景中，实现多场景的多分辨率全景图

• 多场景时，设置autoLoad不生效，无法自动加载，可以使用this.viewer.loadScene(‘circle’)来实现进去后场景自动加载，若是单场景，不需要切换场景，可以直接使用json的url设置将"type": "multires"设置后，"multiRes"设置为对应的url即可

//在template内
<template>
  <div id="panorama" :style="height">
    <div class="list">
      <div :class="num==0?'btn2':'btn1'" @click="scene1Change1">按钮1</div>
      <div :class="num==1?'btn2':'btn1'" @click="scene1Change2">按钮2</div>
      <div :class="num==2?'btn2':'btn1'" @click="scene1Change3">按钮3</div>
    </div>
    <div class="appearn_conten">
      <p>
        {{text}}
      </p>
    </div>
  </div>
</template>

//在javascript中
<script>
import "pannellum";
import "pannellum/build/pannellum.css";
import axios from "axios";
export default {
  data() {
    return {
    	 viewer: null,
		 height: "",     
		}
    },
    mounted() {
    //自适应高度
    let widowHeight = window.innerHeight
      ? window.innerHeight
      : document.documentElement && document.documentElement.clientHeight
      ? document.documentElement.clientHeight
      : document.body.offsetHeight;
    this.height = `height:${widowHeight}px`;
   	this.createdPannellum()
  },
  methods:{
		//创建全景图
		createdPannellum(){
			 // 设置场景,先将默认场景设置
     			   console.log(res);
     		   this.viewer = pannellum.viewer("panorama", {
          		 type: "multires",
          		 //设置场景的默认属性
         		 default: {
         		   firstScene: "circle",//默认场景
           		  sceneFadeDuration: 1000,//切换场景时间为1秒
          		},
          		//场景的设置
         		 scenes: {
         		 //可以在这里设置多个场景
           			 circle: {
						"basePath":`json文件路径`
						},//设置场景
         		 },
       		 });
       		 this.viewer.loadScene('circle')//场景自动加载，因为在配置的时候autoLoad不生效，所以调用加载场景的事件，实现自动加载
     	
     	 //下面可以循环获取python生成的json文件，添加不同的场景
   		
      		  this.viewer.addScene('house',{
						"basePath":`json文件路径`
						})
		},
	scene1Change1() {
      console.log("第一个按钮点击");
      //切换场景也可以使用loadScene进行切换
      this.viewer.loadScene("house");
      
    },
    scene1Change2() {
      console.log("第二个按钮点击");
     
      this.viewer.loadScene("circle");
    },
    scene1Change3() {
     
      console.log("第三个按钮点击");
    },
	}
 }
</script>