Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9f156a09 1 parent 42a0bbaf

新增VR测试

Expand all
Inline Side-by-side
Showing 10 changed files with 132 additions and 8 deletions
...@@ -25,5 +25,6 @@ declare module '@vue/runtime-core' { ...@@ -25,5 +25,6 @@ declare module '@vue/runtime-core' {
25 VanImage: typeof import('vant/es')['Image'] 25 VanImage: typeof import('vant/es')['Image']
26 VanPopup: typeof import('vant/es')['Popup'] 26 VanPopup: typeof import('vant/es')['Popup']
27 VanRow: typeof import('vant/es')['Row'] 27 VanRow: typeof import('vant/es')['Row']
28 + VRViewer: typeof import('./src/components/VRViewer/index.vue')['default']
28 } 29 }
29 } 30 }
......
...@@ -12,6 +12,8 @@ ...@@ -12,6 +12,8 @@
12 "cypress:open": "cypress open" 12 "cypress:open": "cypress open"
13 }, 13 },
14 "dependencies": { 14 "dependencies": {
15 + "@photo-sphere-viewer/core": "^5.2.0",
16 + "@photo-sphere-viewer/markers-plugin": "^5.2.0",
15 "@videojs-player/vue": "^1.0.0", 17 "@videojs-player/vue": "^1.0.0",
16 "@vitejs/plugin-legacy": "^1.8.2", 18 "@vitejs/plugin-legacy": "^1.8.2",
17 "@vueuse/core": "^8.5.0", 19 "@vueuse/core": "^8.5.0",
...@@ -28,6 +30,7 @@ ...@@ -28,6 +30,7 @@
28 "mockjs": "^1.1.0", 30 "mockjs": "^1.1.0",
29 "moment": "^2.29.3", 31 "moment": "^2.29.3",
30 "mui-player": "^1.6.0", 32 "mui-player": "^1.6.0",
33 + "photo-sphere-viewer": "^4.8.1",
31 "svgson": "^5.3.1", 34 "svgson": "^5.3.1",
32 "typescript": "^4.7.3", 35 "typescript": "^4.7.3",
33 "unplugin-vue-components": "^0.24.1", 36 "unplugin-vue-components": "^0.24.1",
......
1 <!-- 1 <!--
2 * @Date: 2023-07-27 11:04:04 2 * @Date: 2023-07-27 11:04:04
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-08-11 14:14:16 4 + * @LastEditTime: 2023-08-16 09:52:07
5 * @FilePath: /map-demo/src/components/Floor/index.vue 5 * @FilePath: /map-demo/src/components/Floor/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -34,6 +34,11 @@ ...@@ -34,6 +34,11 @@
34 <van-icon name="arrow-down" size="1.25rem" /> 34 <van-icon name="arrow-down" size="1.25rem" />
35 </span> 35 </span>
36 </div> 36 </div>
37 + <div v-if="level_show" class="icon" style="top: 18rem; right: 1rem;">
38 + <span @click="showVR">
39 + <van-icon name="tv-o" size="1.25rem" />
40 + </span>
41 + </div>
37 <div class="animate-bar icon"> 42 <div class="animate-bar icon">
38 <div v-if="level_show == 4" class=""> 43 <div v-if="level_show == 4" class="">
39 <div v-if="!svg_safe_animate_status" @click="createAnimation(true, level_show - 1, 'safe')" style="font-size: 1.25rem;"> 44 <div v-if="!svg_safe_animate_status" @click="createAnimation(true, level_show - 1, 'safe')" style="font-size: 1.25rem;">
...@@ -84,7 +89,6 @@ ...@@ -84,7 +89,6 @@
84 <div class="level_after">L{{ index + 1 }}</div> 89 <div class="level_after">L{{ index + 1 }}</div>
85 </div> 90 </div>
86 </div> 91 </div>
87 -
88 </div> 92 </div>
89 </div> 93 </div>
90 </div> 94 </div>
...@@ -116,6 +120,8 @@ ...@@ -116,6 +120,8 @@
116 </van-row> 120 </van-row>
117 </div> 121 </div>
118 </van-popup> 122 </van-popup>
123 +
124 + <vr-viewer :show="show_vr" @close="onVrClose"></vr-viewer>
119 </div> 125 </div>
120 </template> 126 </template>
121 127
...@@ -125,8 +131,10 @@ import $ from 'jquery'; ...@@ -125,8 +131,10 @@ import $ from 'jquery';
125 import SvgIcon from './svgIcon.vue' 131 import SvgIcon from './svgIcon.vue'
126 import Data from './pin' 132 import Data from './pin'
127 import { wxInfo } from '@/utils/tools' 133 import { wxInfo } from '@/utils/tools'
134 +import VrViewer from '@/components/VRViewer'
128 135
129 export default { 136 export default {
137 + components: { VrViewer },
130 data() { 138 data() {
131 return { 139 return {
132 level_show: '', 140 level_show: '',
...@@ -182,7 +190,7 @@ export default { ...@@ -182,7 +190,7 @@ export default {
182 }, 190 },
183 svg_safe_animate_status: false, 191 svg_safe_animate_status: false,
184 svg_safe_animate: ` 192 svg_safe_animate: `
185 - <path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5"> 193 + <path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="8">
186 </path> 194 </path>
187 <circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7"> 195 <circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
188 <animateMotion dur="8s" repeatCount="indefinite"> 196 <animateMotion dur="8s" repeatCount="indefinite">
...@@ -192,7 +200,7 @@ export default { ...@@ -192,7 +200,7 @@ export default {
192 `, 200 `,
193 svg_toilet_animate_status: false, 201 svg_toilet_animate_status: false,
194 svg_toilet_animate: ` 202 svg_toilet_animate: `
195 - <path id="myPath" d="M 1138.427 213.33 L 486.79 224.966 L 473.061 123.103" fill="none" stroke="#D49333" stroke-width="5"> 203 + <path id="myPath" d="M 1138.427 213.33 L 486.79 224.966 L 473.061 123.103" fill="none" stroke="#D49333" stroke-width="8">
196 </path> 204 </path>
197 <circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7"> 205 <circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
198 <animateMotion dur="8s" repeatCount="indefinite"> 206 <animateMotion dur="8s" repeatCount="indefinite">
...@@ -202,7 +210,7 @@ export default { ...@@ -202,7 +210,7 @@ export default {
202 `, 210 `,
203 svg_door_animate_status: false, 211 svg_door_animate_status: false,
204 svg_door_animate: ` 212 svg_door_animate: `
205 - <path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5"> 213 + <path id="myPath" d="M 1138.427 213.33 L 486.79 224.966 L 473.061 123.103" fill="none" stroke="#D49333" stroke-width="8">
206 </path> 214 </path>
207 <circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7"> 215 <circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
208 <animateMotion dur="8s" repeatCount="indefinite"> 216 <animateMotion dur="8s" repeatCount="indefinite">
...@@ -210,6 +218,7 @@ export default { ...@@ -210,6 +218,7 @@ export default {
210 </animateMotion> 218 </animateMotion>
211 </circle> 219 </circle>
212 `, 220 `,
221 + show_vr: false,
213 } 222 }
214 }, 223 },
215 async mounted() { 224 async mounted() {
...@@ -394,6 +403,12 @@ export default { ...@@ -394,6 +403,12 @@ export default {
394 this.svg_animate_obj[level] = this.svg_animate_obj[level].filter(item => item === id); 403 this.svg_animate_obj[level] = this.svg_animate_obj[level].filter(item => item === id);
395 } 404 }
396 }, 405 },
406 + showVR() {
407 + this.show_vr = true;
408 + },
409 + onVrClose() {
410 + this.show_vr = false;
411 + },
397 } 412 }
398 } 413 }
399 </script> 414 </script>
......
1 /* 1 /*
2 * @Date: 2023-08-01 13:55:03 2 * @Date: 2023-08-01 13:55:03
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-08-10 16:51:33 4 + * @LastEditTime: 2023-08-12 06:41:47
5 * @FilePath: /map-demo/src/components/Floor/pin.js 5 * @FilePath: /map-demo/src/components/Floor/pin.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
......
1 +<!--
2 + * @Date: 2023-08-16 09:29:57
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-08-16 10:33:43
5 + * @FilePath: /map-demo/src/components/VRViewer/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="vr-viewer">
10 + <van-popup v-model:show="show_vr" position="right" :overlay="true"
11 + :style="{ height: '100%', width: '100%', background: '#FFF' }">
12 + <div class="vr" style="height: 90%;">
13 + <div id="viewer"></div>
14 + </div>
15 + <div style="height: 10%;">
16 + <span @click="onClose">关闭</span>
17 + </div>
18 + </van-popup>
19 + </div>
20 +</template>
21 +
22 +<script>
23 +import { Viewer } from '@photo-sphere-viewer/core' // 引入插件
24 +import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
25 +import '@photo-sphere-viewer/core/index.css' //引入CSS样式
26 +import '@photo-sphere-viewer/markers-plugin/index.css'
27 +import temp_img from './temp1.jpg'
28 +
29 +export default {
30 + props: {
31 + show: {
32 + type: Boolean,
33 + default: () => { }
34 + }
35 + },
36 + watch: {
37 + show(val) {
38 + this.show_vr = val;
39 + if (val && !this.panoramaViewer) {
40 + this.$nextTick(() => {
41 + this.initViewer();
42 + })
43 + }
44 + }
45 + },
46 + data() {
47 + return {
48 + show_vr: false,
49 + panoramaViewer: null,
50 + initViewer: async function () {
51 + this.panoramaViewer = new Viewer({
52 + container: document.querySelector('#viewer'), // 容器
53 + panorama: temp_img,
54 + navbar: [
55 + 'zoom',
56 + 'move',
57 + // 'caption',
58 + // 'fullscreen'
59 + ],
60 + plugins: [
61 + [MarkersPlugin, {
62 + markers: [
63 + {
64 + // polygon marker
65 + id: 'polygon',
66 + polygon: [
67 + [6.2208, 0.0906], [0.0443, 0.1028], [0.2322, 0.0849], [0.4531, 0.0387],
68 + [0.5022, -0.0056], [0.4587, -0.0396], [0.252, -0.0453], [0.0434, -0.0575],
69 + [6.1302, -0.0623], [6.0094, -0.0169], [6.0471, 0.032], [6.2208, 0.0906],
70 + ],
71 + svgStyle: {
72 + fill: 'rgba(200, 0, 0, 0.2)',
73 + stroke: 'rgba(200, 0, 50, 0.8)',
74 + strokeWidth: '2px',
75 + },
76 + tooltip: {
77 + content: 'A dynamic polygon marker',
78 + position: 'bottom right',
79 + },
80 + },
81 + ],
82 + }],
83 + ], // 标记点
84 + size: {
85 + width: '100%',
86 + height: '100%'
87 + }
88 + })
89 + }
90 + }
91 + },
92 + mounted() {
93 +
94 + },
95 + methods: {
96 + onClose () {
97 + console.warn(1);
98 + this.$emit('close', false)
99 + }
100 + }
101 +}
102 +</script>
103 +
104 +<style lang="less" scoped>
105 +</style>
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-08-11 14:16:19 4 + * @LastEditTime: 2023-08-15 17:10:55
5 * @FilePath: /map-demo/src/views/inner.vue 5 * @FilePath: /map-demo/src/views/inner.vue
6 * @Description: 内部地图主体页面 6 * @Description: 内部地图主体页面
7 --> 7 -->
...@@ -277,7 +277,7 @@ export default { ...@@ -277,7 +277,7 @@ export default {
277 point_range: [ // 景区范围经纬度 277 point_range: [ // 景区范围经纬度
278 [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005] 278 [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
279 ], 279 ],
280 - show_floor_popup: false, 280 + show_floor_popup: true,
281 } 281 }
282 }, 282 },
283 async mounted() { 283 async mounted() {
......
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.