index.vue
2.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!--
* @Date: 2023-08-16 09:29:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-16 10:33:43
* @FilePath: /map-demo/src/components/VRViewer/index.vue
* @Description: 文件描述
-->
<template>
<div class="vr-viewer">
<van-popup v-model:show="show_vr" position="right" :overlay="true"
:style="{ height: '100%', width: '100%', background: '#FFF' }">
<div class="vr" style="height: 90%;">
<div id="viewer"></div>
</div>
<div style="height: 10%;">
<span @click="onClose">关闭</span>
</div>
</van-popup>
</div>
</template>
<script>
import { Viewer } from '@photo-sphere-viewer/core' // 引入插件
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
import '@photo-sphere-viewer/core/index.css' //引入CSS样式
import '@photo-sphere-viewer/markers-plugin/index.css'
import temp_img from './temp1.jpg'
export default {
props: {
show: {
type: Boolean,
default: () => { }
}
},
watch: {
show(val) {
this.show_vr = val;
if (val && !this.panoramaViewer) {
this.$nextTick(() => {
this.initViewer();
})
}
}
},
data() {
return {
show_vr: false,
panoramaViewer: null,
initViewer: async function () {
this.panoramaViewer = new Viewer({
container: document.querySelector('#viewer'), // 容器
panorama: temp_img,
navbar: [
'zoom',
'move',
// 'caption',
// 'fullscreen'
],
plugins: [
[MarkersPlugin, {
markers: [
{
// polygon marker
id: 'polygon',
polygon: [
[6.2208, 0.0906], [0.0443, 0.1028], [0.2322, 0.0849], [0.4531, 0.0387],
[0.5022, -0.0056], [0.4587, -0.0396], [0.252, -0.0453], [0.0434, -0.0575],
[6.1302, -0.0623], [6.0094, -0.0169], [6.0471, 0.032], [6.2208, 0.0906],
],
svgStyle: {
fill: 'rgba(200, 0, 0, 0.2)',
stroke: 'rgba(200, 0, 50, 0.8)',
strokeWidth: '2px',
},
tooltip: {
content: 'A dynamic polygon marker',
position: 'bottom right',
},
},
],
}],
], // 标记点
size: {
width: '100%',
height: '100%'
}
})
}
}
},
mounted() {
},
methods: {
onClose () {
console.warn(1);
this.$emit('close', false)
}
}
}
</script>
<style lang="less" scoped>
</style>