1、安装
cnpm i photo-sphere-viewer --save2、使用
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);},
}