# 全景图
# photo-sphere-viewer
一个全景图插件
cnpm i photo-sphere-viewer --save
# 霞浦社区全景图使用实例
PSV.toggleAutorotate() 全景图自动播放功能
PSV.destroy() 在切换到其他小区网格时，可以销毁全景图，因为页面可能会因为全屏时再次进入全景图时的页面丢失全景图功能，当然，如果没有切换这种场景自然也不需要销毁
项目中不能动态添加数据(可以点击后添加，但是不符合项目要求，只能在加载时一次性加完！)
<template>
<div class='viewcity' id='viewcity'>
<div id='photosphere' v-if='!isphotosphere'></div>
<div id='static' v-show='isphotosphere'>
<Grid class="grid"/>
</div>
<Shebei v-if="isshebi" :mydata="mydata"/>
<div v-if="isshebi" class="mask" @click="close"></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 VisibleRangePlugin from 'photo-sphere-viewer/dist/plugins/visible-range'
import 'photo-sphere-viewer/dist/plugins/markers.css';
import {getMapData,getFacilities} from '@/api/table.js'
import {shebeiarr} from '@/views/location/shebei.js'
import Grid from '@/views/Grid.vue'
import Shebei from '../components/Shebei.vue'
function portpoint(type){
let html =`
<div class="portpoint type${type}" >
<span></span>
</div>
`
return html
}
let PSV,markers;
export default {
data(){
return{
img1:require('@/assets/img/background.jpg'),
red_card:require('@/assets/img/red_card.png'),
isphotosphere:false,
indexarr:[],
isshebi:false,
mydata:null
}
},
components:{
Grid,
Shebei
},
watch:{
'$store.state.switch':function(){
let tem = document.getElementById('photosphere')
if(this.$store.state.querytype === '$1'){
this.isphotosphere=false
setTimeout(()=>{
this.quanjingtufun()
},1000)
}else{
this.isphotosphere=true
try {
PSV.destroy()
} catch (error) {
}
}
const data={
}
if(this.$store.state.querytype === '$1'){
data.communityId='1'
}
},
'$store.state.rollindex':function(){
PSV.toggleAutorotate()
},
},
mounted(){
this.quanjingtufun()
},
methods:{
getdata(data){
getMapData(data).then(res=>{
console.log(res)
})
},
close(){
this.isshebi=false
},
t1(){
// console.log(10)
PSV.toggleAutorotate()
},
quanjingtufun(){
let _this = this
let temarr=[]
let pointarr=[]
const data={
// type1:'COMMUNITY_PERSON',
// type2:'BASE',
communityId:'1'
}
let num=0;
getMapData(data).then((res)=>{
// console.log(res)
temarr=res.data
getFacilities().then(res=>{
console.log(res)
pointarr =res.data;
PSV = new Viewer({
container : 'photosphere',//容器id
panorama :this.img1,//全景图骗
size:{ //尺寸
width: '100vw',
height: '100vh',
},
defaultLong:'-0.2',//初始经纬度
defaultLat:'-0.2',
minFov:70,//放大缩小控制
maxFov:70,
autorotateSpeed: '1rpm',//自动播放速度
autorotateDelay: 0,
// fisheye:true,
plugins:[
[MarkersPlugin,{ //插件：绘制标记，可以是文字 图片 线段等
markers:(function(){
var a = [];
function pointfun(longitude,latitude,id,type,name){
a.push({
id,
html: portpoint(type),
className:`point`,
anchor: 'bottom right',
longitude,
latitude,
style:{
cursor:"pointer",
},
tooltip : {
content : name,
position: 'right bottom',
},
})
}
pointarr.forEach((el,i)=>{
pointfun(shebeiarr[i].longitude,shebeiarr[i].latitude,pointarr[i].id,pointarr[i].type,pointarr[i].name)
})
return a //返回出一个数组，然后绘制在页面上
}())
}]
]
})
markers = PSV.getPlugin(MarkersPlugin); //得到插件marker
markers.on('select-marker', function (e, marker, data) { //监听marker事件
if(marker.config.className == 'point'){
console.log(marker.id)
console.log("处理特殊的点")
_this.isshebi=true
pointarr.forEach((el,i)=>{
if(el.id == marker.id){
_this.mydata={
introduction:el.introduction,
name:el.name,
photo:el.photo
}
}
})
}else{
_this.$store.commit('eidtQuerytype','$2')
_this.$store.commit('changeid', marker.id)
// 触发首页的选择框
_this.$store.commit('triggerselect',{wg:marker.id})
}
});
})
})
try {
} catch (error) {
console.log(error)
}
}
}
}
</script>