Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
46664c99 1 parent e01cc48d

调整全景地图控制

Inline Side-by-side
Showing 3 changed files with 73 additions and 10 deletions
......@@ -14,7 +14,9 @@
"dependencies": {
"@photo-sphere-viewer/core": "^5.2.0",
"@photo-sphere-viewer/gallery-plugin": "^5.2.0",
"@photo-sphere-viewer/gyroscope-plugin": "^5.2.0",
"@photo-sphere-viewer/markers-plugin": "^5.2.0",
"@photo-sphere-viewer/stereo-plugin": "^5.2.0",
"@photo-sphere-viewer/virtual-tour-plugin": "^5.2.0",
"@videojs-player/vue": "^1.0.0",
"@vitejs/plugin-legacy": "^1.8.2",
......
<!--
* @Date: 2023-08-16 09:29:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-17 09:55:35
* @LastEditTime: 2023-08-17 13:53:41
* @FilePath: /map-demo/src/components/VRViewer/index.vue
* @Description: 文件描述
-->
......@@ -9,11 +9,11 @@
<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%;">
<!-- <div style="height: 10%;">
<span @click="onClose">关闭</span>
</div> -->
<div class="vr" style="height: 100%;">
<div id="viewer"></div>
</div>
</van-popup>
</div>
......@@ -25,6 +25,8 @@ import { Viewer } from '@photo-sphere-viewer/core' // 引入插件
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
import { VirtualTourPlugin } from '@photo-sphere-viewer/virtual-tour-plugin';
import { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';
import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';
// import { StereoPlugin } from '@photo-sphere-viewer/stereo-plugin';
import '@photo-sphere-viewer/core/index.css' //引入CSS样式
import '@photo-sphere-viewer/markers-plugin/index.css'
import '@photo-sphere-viewer/gallery-plugin/index.css'
......@@ -116,6 +118,7 @@ export default {
panorama: temp_img,
links: [
{
name: '2',
nodeId: '2',
// position: { textureX: 2000, textureY: 1000 },
position: { yaw: -300, pitch: 0 },
......@@ -123,7 +126,7 @@ export default {
color: '#AEEEEE',
hoverColor: 0xaa5500,
outlineColor: 0x000000,
scale: [0.5, 2],
scale: [1, 1],
}
},
],
......@@ -164,13 +167,17 @@ export default {
},
],
name: '卧室',
thumbnail: temp_img
thumbnail: temp_img,
},
{
id: '2',
panorama: temp_img2,
links: [
{
nodeId: '1',
position: { yaw: 10, pitch: 0 },
},
{
nodeId: '3',
// position: { textureX: 1000, textureY: 1000 },
position: { yaw: 0, pitch: 0 },
......@@ -186,13 +193,29 @@ export default {
{
nodeId: '1',
// position: { textureX: 1000, textureY: 1000 },
position: { yaw: 300, pitch: 0 },
position: { yaw: 10, pitch: 0 },
},
{
nodeId: '2',
position: { yaw: 0, pitch: 0 },
},
],
name: '室外',
thumbnail: temp_img3
},
], 1);
// 监听节点切换状态
virtualTour.addEventListener('node-changed', ({ node, data }) => {
// console.log(`Current node is ${node.id}`);
// if (data.fromNode) {
// // other data are available
// console.log(`Previous node was ${data.fromNode.id}`);
// }
// console.warn(node);
// console.warn(data);
// 打开陀螺仪
// $('.psv-gyroscope-button').trigger('click');
});
})
}
}
......@@ -207,7 +230,15 @@ export default {
// loadingImg: temp_img_loading,
panorama: temp_img,
defaultZoomLvl: 0,
navbar: 'zoom move gallery',
navbar: ['zoom', 'move', 'gallery' , 'gyroscope', {
id: 'my-button',
content: '<svg t="1692238613802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4229" width="64" height="64"><path d="M879.480512 64.020082c-22.23235 0-42.339294 9.080819-56.830333 23.728424l-0.007163-0.007163L511.706311 398.677025 200.77063 87.741343l-0.007163 0.007163c-14.492062-14.647605-34.597983-23.728424-56.830333-23.728424-44.155662 0-79.950913 35.795251-79.950913 79.950913 0 22.23235 9.080819 42.339294 23.728424 56.830333l-0.007163 0.007163 310.935682 310.935682L87.702458 822.680878l0.007163 0.007163c-14.647605 14.492062-23.728424 34.597983-23.728424 56.830333 0 44.155662 35.795251 79.950913 79.950913 79.950913 22.23235 0 42.339294-9.080819 56.830333-23.728424l0.007163 0.007163 310.935682-310.935682 310.935682 310.935682 0.007163-0.007163c14.492062 14.647605 34.597983 23.728424 56.830333 23.728424 44.155662 0 79.950913-35.795251 79.950913-79.950913 0-22.23235-9.080819-42.339294-23.728424-56.830333l0.007163-0.007163L624.77346 511.745197l310.935682-310.935682-0.007163-0.007163c14.647605-14.492062 23.728424-34.597983 23.728424-56.830333C959.431425 99.815333 923.635151 64.020082 879.480512 64.020082z" fill="#cecdcb" p-id="4230"></path></svg>',
title: 'Hello world',
className: 'custom-button',
onClick: (viewer) => {
this.onClose();
},
},],
plugins: [
[MarkersPlugin, {
// markers: [
......@@ -230,6 +261,8 @@ export default {
// ],
}],
VirtualTourPlugin,
GyroscopePlugin,
// StereoPlugin,
[GalleryPlugin, {
thumbnailSize: { width: 150, height: 150 },
}]
......@@ -260,5 +293,18 @@ export default {
}
</script>
<style lang="less" scoped>
<style lang="less">
.custom-button {
svg {
width: 20px;
height: 20px;
}
}
.psv-navbar {
height: 50px;
}
.psv--has-navbar .psv-gallery {
bottom: 50px;
transform: translateY(calc(100% + 50px));
}
</style>
......
......@@ -143,6 +143,13 @@
dependencies:
"@photo-sphere-viewer/core" "5.2.0"
"@photo-sphere-viewer/gyroscope-plugin@5.2.0", "@photo-sphere-viewer/gyroscope-plugin@^5.2.0":
version "5.2.0"
resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/gyroscope-plugin/-/gyroscope-plugin-5.2.0.tgz#a956df8e17ec075157809aa8368d26844073b88d"
integrity sha512-Cbtuij+pZ3x2X32JtTt+MJD4dvJp4TuEJo/+rcmHJdMaNc2N62nj7kxrUY7zg+ZTdZ1iMDlH7nT51TVBYQGU9g==
dependencies:
"@photo-sphere-viewer/core" "5.2.0"
"@photo-sphere-viewer/markers-plugin@5.2.0", "@photo-sphere-viewer/markers-plugin@^5.2.0":
version "5.2.0"
resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/markers-plugin/-/markers-plugin-5.2.0.tgz#709a4a0848aa86496d2334557c94ac7b05ccc3b5"
......@@ -150,6 +157,14 @@
dependencies:
"@photo-sphere-viewer/core" "5.2.0"
"@photo-sphere-viewer/stereo-plugin@^5.2.0":
version "5.2.0"
resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/stereo-plugin/-/stereo-plugin-5.2.0.tgz#6fe8922e0179b08dce3be8d980c2a5d96372b739"
integrity sha512-TU5AngtCHhjikK49HKWvAA52NqOfCYbOU0vWMAX49aXf70hS5A0N3AgpQqZEAB6DKS5Pq0gW4VsxQABFLejtyw==
dependencies:
"@photo-sphere-viewer/core" "5.2.0"
"@photo-sphere-viewer/gyroscope-plugin" "5.2.0"
"@photo-sphere-viewer/virtual-tour-plugin@^5.2.0":
version "5.2.0"
resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/virtual-tour-plugin/-/virtual-tour-plugin-5.2.0.tgz#32419fe510d5de91e783ce56bdf759ef2a1e1244"
......