Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e01cc48d 1 parent 659d54ed

全景标记新增

Inline Side-by-side
Showing 6 changed files with 124 additions and 47 deletions
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
13 }, 13 },
14 "dependencies": { 14 "dependencies": {
15 "@photo-sphere-viewer/core": "^5.2.0", 15 "@photo-sphere-viewer/core": "^5.2.0",
16 + "@photo-sphere-viewer/gallery-plugin": "^5.2.0",
16 "@photo-sphere-viewer/markers-plugin": "^5.2.0", 17 "@photo-sphere-viewer/markers-plugin": "^5.2.0",
17 "@photo-sphere-viewer/virtual-tour-plugin": "^5.2.0", 18 "@photo-sphere-viewer/virtual-tour-plugin": "^5.2.0",
18 "@videojs-player/vue": "^1.0.0", 19 "@videojs-player/vue": "^1.0.0",
......
1 <!-- 1 <!--
2 * @Date: 2023-08-16 09:29:57 2 * @Date: 2023-08-16 09:29:57
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-08-16 15:16:06 4 + * @LastEditTime: 2023-08-17 09:55:35
5 * @FilePath: /map-demo/src/components/VRViewer/index.vue 5 * @FilePath: /map-demo/src/components/VRViewer/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -24,11 +24,15 @@ import $ from 'jquery'; ...@@ -24,11 +24,15 @@ import $ from 'jquery';
24 import { Viewer } from '@photo-sphere-viewer/core' // 引入插件 24 import { Viewer } from '@photo-sphere-viewer/core' // 引入插件
25 import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin'; 25 import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
26 import { VirtualTourPlugin } from '@photo-sphere-viewer/virtual-tour-plugin'; 26 import { VirtualTourPlugin } from '@photo-sphere-viewer/virtual-tour-plugin';
27 +import { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';
27 import '@photo-sphere-viewer/core/index.css' //引入CSS样式 28 import '@photo-sphere-viewer/core/index.css' //引入CSS样式
28 import '@photo-sphere-viewer/markers-plugin/index.css' 29 import '@photo-sphere-viewer/markers-plugin/index.css'
30 +import '@photo-sphere-viewer/gallery-plugin/index.css'
29 import temp_img from './temp1.jpg' 31 import temp_img from './temp1.jpg'
30 import temp_img2 from './temp2.webp' 32 import temp_img2 from './temp2.webp'
31 import temp_img3 from './temp3.webp' 33 import temp_img3 from './temp3.webp'
34 +import temp_img_loading from './loading.gif'
35 +import temp_img_pin from './pin.png'
32 import { showDialog } from 'vant'; 36 import { showDialog } from 'vant';
33 37
34 const markerLighthouse = { 38 const markerLighthouse = {
...@@ -60,25 +64,51 @@ export default { ...@@ -60,25 +64,51 @@ export default {
60 this.show_vr = val; 64 this.show_vr = val;
61 if (val && !this.panoramaViewer) { 65 if (val && !this.panoramaViewer) {
62 this.$nextTick(() => { 66 this.$nextTick(() => {
67 + // 初始化
63 this.initViewer(); 68 this.initViewer();
69 + // 工具栏添加
64 if ($('.psv-zoom-button').css('display') === 'none') { 70 if ($('.psv-zoom-button').css('display') === 'none') {
65 $('.psv-zoom-button').css('display', '') 71 $('.psv-zoom-button').css('display', '')
66 // $('.psv-zoom-range').css('display', '') 72 // $('.psv-zoom-range').css('display', '')
67 $('.psv-move-button').css('display', '') 73 $('.psv-move-button').css('display', '')
68 } 74 }
75 + // 当视图偏航和/或俯仰改变时触发。
76 + this.panoramaViewer.addEventListener('position-updated', ({ position }) => {
77 + // console.log(`new position is yaw: ${position.yaw} pitch: ${position.pitch}`);
78 + // 工具栏添加
79 + if ($('.psv-zoom-button').css('display') === 'none') {
80 + $('.psv-zoom-button').css('display', '')
81 + // $('.psv-zoom-range').css('display', '')
82 + $('.psv-move-button').css('display', '')
83 + }
84 + });
85 + // 监听marker回调
69 const markersPlugin = this.panoramaViewer.getPlugin(MarkersPlugin); 86 const markersPlugin = this.panoramaViewer.getPlugin(MarkersPlugin);
70 markersPlugin.addEventListener('select-marker', ({ marker }) => { 87 markersPlugin.addEventListener('select-marker', ({ marker }) => {
71 // 88 //
72 - if (marker.id === 'polygon') { 89 + if (marker.id === 'image2') {
73 showDialog({ 90 showDialog({
74 title: '温馨提示', 91 title: '温馨提示',
75 message: '这是一副来自中世纪的古画。', 92 message: '这是一副来自中世纪的古画。',
76 theme: 'round-button', 93 theme: 'round-button',
94 + confirmButtonColor: '#BC9348',
95 + }).then(() => {
96 + // on close
97 + });
98 + }
99 + //
100 + if (marker.id === 'image1') {
101 + showDialog({
102 + title: '温馨提示',
103 + message: '这是一副来自中世纪的沙发。',
104 + theme: 'round-button',
105 + confirmButtonColor: '#BC9348',
77 }).then(() => { 106 }).then(() => {
78 // on close 107 // on close
79 }); 108 });
80 } 109 }
81 }); 110 });
111 + // 虚拟旅游功能
82 const virtualTour = this.panoramaViewer.getPlugin(VirtualTourPlugin); 112 const virtualTour = this.panoramaViewer.getPlugin(VirtualTourPlugin);
83 virtualTour.setNodes([ 113 virtualTour.setNodes([
84 { 114 {
...@@ -89,9 +119,52 @@ export default { ...@@ -89,9 +119,52 @@ export default {
89 nodeId: '2', 119 nodeId: '2',
90 // position: { textureX: 2000, textureY: 1000 }, 120 // position: { textureX: 2000, textureY: 1000 },
91 position: { yaw: -300, pitch: 0 }, 121 position: { yaw: -300, pitch: 0 },
122 + arrowStyle: {
123 + color: '#AEEEEE',
124 + hoverColor: 0xaa5500,
125 + outlineColor: 0x000000,
126 + scale: [0.5, 2],
127 + }
128 + },
129 + ],
130 + markers: [
131 + // {
132 + // // polygon marker
133 + // id: 'polygon',
134 + // polygon: [
135 + // [6.2208, 0.0906], [0.0443, 0.1028], [0.2322, 0.0849], [0.4531, 0.0387],
136 + // [0.5022, -0.0056], [0.4587, -0.0396], [0.252, -0.0453], [0.0434, -0.0575],
137 + // [6.1302, -0.0623], [6.0094, -0.0169], [6.0471, 0.032], [6.2208, 0.0906],
138 + // ],
139 + // svgStyle: {
140 + // fill: 'rgba(200, 0, 0, 0.2)',
141 + // stroke: 'rgba(200, 0, 50, 0.8)',
142 + // strokeWidth: '2px',
143 + // },
144 + // tooltip: {
145 + // },
146 + // },
147 + {
148 + // image marker that opens the panel when clicked
149 + id: 'image1',
150 + position: { yaw: 250.5, pitch: 50.1 },
151 + image: temp_img_pin,
152 + size: { width: 50, height: 50 },
153 + // anchor: 'bottom center',
154 + zoomLvl: 100,
155 + },
156 + {
157 + // image marker that opens the panel when clicked
158 + id: 'image2',
159 + position: { yaw: 219.9, pitch: 50.5 },
160 + image: temp_img_pin,
161 + size: { width: 50, height: 50 },
162 + // anchor: 'bottom center',
163 + zoomLvl: 100,
92 }, 164 },
93 ], 165 ],
94 - markers: [markerLighthouse], 166 + name: '卧室',
167 + thumbnail: temp_img
95 }, 168 },
96 { 169 {
97 id: '2', 170 id: '2',
...@@ -103,6 +176,8 @@ export default { ...@@ -103,6 +176,8 @@ export default {
103 position: { yaw: 0, pitch: 0 }, 176 position: { yaw: 0, pitch: 0 },
104 }, 177 },
105 ], 178 ],
179 + name: '展厅',
180 + thumbnail: temp_img2
106 }, 181 },
107 { 182 {
108 id: '3', 183 id: '3',
...@@ -111,11 +186,13 @@ export default { ...@@ -111,11 +186,13 @@ export default {
111 { 186 {
112 nodeId: '1', 187 nodeId: '1',
113 // position: { textureX: 1000, textureY: 1000 }, 188 // position: { textureX: 1000, textureY: 1000 },
114 - position: { yaw: 0, pitch: 0 }, 189 + position: { yaw: 300, pitch: 0 },
115 }, 190 },
116 ], 191 ],
192 + name: '室外',
193 + thumbnail: temp_img3
117 }, 194 },
118 - ]) 195 + ], 1);
119 }) 196 })
120 } 197 }
121 } 198 }
...@@ -127,41 +204,40 @@ export default { ...@@ -127,41 +204,40 @@ export default {
127 initViewer: async function () { 204 initViewer: async function () {
128 this.panoramaViewer = new Viewer({ 205 this.panoramaViewer = new Viewer({
129 container: document.querySelector('#viewer'), // 容器 206 container: document.querySelector('#viewer'), // 容器
207 + // loadingImg: temp_img_loading,
130 panorama: temp_img, 208 panorama: temp_img,
131 defaultZoomLvl: 0, 209 defaultZoomLvl: 0,
132 - navbar: [ 210 + navbar: 'zoom move gallery',
133 - 'zoom',
134 - 'move',
135 - // 'caption',
136 - // 'fullscreen'
137 - ],
138 plugins: [ 211 plugins: [
139 [MarkersPlugin, { 212 [MarkersPlugin, {
140 - markers: [ 213 + // markers: [
141 - { 214 + // {
142 - // polygon marker 215 + // // polygon marker
143 - id: 'polygon', 216 + // id: 'polygon',
144 - polygon: [ 217 + // polygon: [
145 - [6.2208, 0.0906], [0.0443, 0.1028], [0.2322, 0.0849], [0.4531, 0.0387], 218 + // [6.2208, 0.0906], [0.0443, 0.1028], [0.2322, 0.0849], [0.4531, 0.0387],
146 - [0.5022, -0.0056], [0.4587, -0.0396], [0.252, -0.0453], [0.0434, -0.0575], 219 + // [0.5022, -0.0056], [0.4587, -0.0396], [0.252, -0.0453], [0.0434, -0.0575],
147 - [6.1302, -0.0623], [6.0094, -0.0169], [6.0471, 0.032], [6.2208, 0.0906], 220 + // [6.1302, -0.0623], [6.0094, -0.0169], [6.0471, 0.032], [6.2208, 0.0906],
148 - ], 221 + // ],
149 - svgStyle: { 222 + // svgStyle: {
150 - fill: 'rgba(200, 0, 0, 0.2)', 223 + // fill: 'rgba(200, 0, 0, 0.2)',
151 - stroke: 'rgba(200, 0, 50, 0.8)', 224 + // stroke: 'rgba(200, 0, 50, 0.8)',
152 - strokeWidth: '2px', 225 + // strokeWidth: '2px',
153 - }, 226 + // },
154 - tooltip: { 227 + // tooltip: {
155 - }, 228 + // },
156 - }, 229 + // },
157 - ], 230 + // ],
158 }], 231 }],
159 VirtualTourPlugin, 232 VirtualTourPlugin,
233 + [GalleryPlugin, {
234 + thumbnailSize: { width: 150, height: 150 },
235 + }]
160 ], // 标记点 236 ], // 标记点
161 size: { 237 size: {
162 width: '100%', 238 width: '100%',
163 height: '100%' 239 height: '100%'
164 - } 240 + },
165 }) 241 })
166 } 242 }
167 } 243 }
...@@ -171,8 +247,8 @@ export default { ...@@ -171,8 +247,8 @@ export default {
171 }, 247 },
172 methods: { 248 methods: {
173 onClose () { 249 onClose () {
174 - console.warn(1);
175 this.$emit('close', false) 250 this.$emit('close', false)
251 + // this.panoramaViewer = null;
176 }, 252 },
177 onClick () { 253 onClick () {
178 254
......
...@@ -82,21 +82,21 @@ export default ({ command, mode }) => { ...@@ -82,21 +82,21 @@ export default ({ command, mode }) => {
82 postcss: { 82 postcss: {
83 // 内联的 PostCSS 配置（格式同 postcss.config.js），或者一个（默认基于项目根目录的）自定义的 PostCSS 配置路径。其路径搜索是通过 postcss-load-config 实现的。 注意，如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源。 83 // 内联的 PostCSS 配置（格式同 postcss.config.js），或者一个（默认基于项目根目录的）自定义的 PostCSS 配置路径。其路径搜索是通过 postcss-load-config 实现的。 注意，如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源。
84 plugins: [ 84 plugins: [
85 - postcsspxtoviewport({ 85 + // postcsspxtoviewport({
86 - unitToConvert: 'px', // 要转化的单位 86 + // unitToConvert: 'px', // 要转化的单位
87 - viewportWidth: 375, // UI设计稿的宽度 87 + // viewportWidth: 375, // UI设计稿的宽度
88 - unitPrecision: 6, // 转换后的精度，即小数点位数 88 + // unitPrecision: 6, // 转换后的精度，即小数点位数
89 - propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换 89 + // propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
90 - viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw 90 + // viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
91 - fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw 91 + // fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
92 - selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名， 92 + // selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
93 - minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换 93 + // minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
94 - mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false 94 + // mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
95 - replace: true, // 是否转换后直接更换属性值 95 + // replace: true, // 是否转换后直接更换属性值
96 - // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配 96 + // // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
97 - exclude: [], 97 + // exclude: [],
98 - landscape: false, // 是否处理横屏情况 98 + // landscape: false, // 是否处理横屏情况
99 - }), 99 + // }),
100 ], 100 ],
101 }, 101 },
102 preprocessorOptions: { 102 preprocessorOptions: {
......
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
136 dependencies: 136 dependencies:
137 three "^0.155.0" 137 three "^0.155.0"
138 138
139 -"@photo-sphere-viewer/gallery-plugin@5.2.0": 139 +"@photo-sphere-viewer/gallery-plugin@5.2.0", "@photo-sphere-viewer/gallery-plugin@^5.2.0":
140 version "5.2.0" 140 version "5.2.0"
141 resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/gallery-plugin/-/gallery-plugin-5.2.0.tgz#c4f8a8a998b2a15f310538d4c3a9cb52cfd7c407" 141 resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/gallery-plugin/-/gallery-plugin-5.2.0.tgz#c4f8a8a998b2a15f310538d4c3a9cb52cfd7c407"
142 integrity sha512-JQHJNTYcF0JER2N1eiVMzN5uc/Fbi2GdsYFtEOaQQc2cs/pO4v/KKrotvE4ZTFLSieg57moSxDnEm82o4gz4nw== 142 integrity sha512-JQHJNTYcF0JER2N1eiVMzN5uc/Fbi2GdsYFtEOaQQc2cs/pO4v/KKrotvE4ZTFLSieg57moSxDnEm82o4gz4nw==
......