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 @@
},
"dependencies": {
"@photo-sphere-viewer/core": "^5.2.0",
"@photo-sphere-viewer/gallery-plugin": "^5.2.0",
"@photo-sphere-viewer/markers-plugin": "^5.2.0",
"@photo-sphere-viewer/virtual-tour-plugin": "^5.2.0",
"@videojs-player/vue": "^1.0.0",
......
<!--
* @Date: 2023-08-16 09:29:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-16 15:16:06
* @LastEditTime: 2023-08-17 09:55:35
* @FilePath: /map-demo/src/components/VRViewer/index.vue
* @Description: 文件描述
-->
......@@ -24,11 +24,15 @@ import $ from 'jquery';
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 '@photo-sphere-viewer/core/index.css' //引入CSS样式
import '@photo-sphere-viewer/markers-plugin/index.css'
import '@photo-sphere-viewer/gallery-plugin/index.css'
import temp_img from './temp1.jpg'
import temp_img2 from './temp2.webp'
import temp_img3 from './temp3.webp'
import temp_img_loading from './loading.gif'
import temp_img_pin from './pin.png'
import { showDialog } from 'vant';
const markerLighthouse = {
......@@ -60,25 +64,51 @@ export default {
this.show_vr = val;
if (val && !this.panoramaViewer) {
this.$nextTick(() => {
// 初始化
this.initViewer();
// 工具栏添加
if ($('.psv-zoom-button').css('display') === 'none') {
$('.psv-zoom-button').css('display', '')
// $('.psv-zoom-range').css('display', '')
$('.psv-move-button').css('display', '')
}
// 当视图偏航和/或俯仰改变时触发。
this.panoramaViewer.addEventListener('position-updated', ({ position }) => {
// console.log(`new position is yaw: ${position.yaw} pitch: ${position.pitch}`);
// 工具栏添加
if ($('.psv-zoom-button').css('display') === 'none') {
$('.psv-zoom-button').css('display', '')
// $('.psv-zoom-range').css('display', '')
$('.psv-move-button').css('display', '')
}
});
// 监听marker回调
const markersPlugin = this.panoramaViewer.getPlugin(MarkersPlugin);
markersPlugin.addEventListener('select-marker', ({ marker }) => {
//
if (marker.id === 'polygon') {
if (marker.id === 'image2') {
showDialog({
title: '温馨提示',
message: '这是一副来自中世纪的古画。',
theme: 'round-button',
confirmButtonColor: '#BC9348',
}).then(() => {
// on close
});
}
//
if (marker.id === 'image1') {
showDialog({
title: '温馨提示',
message: '这是一副来自中世纪的沙发。',
theme: 'round-button',
confirmButtonColor: '#BC9348',
}).then(() => {
// on close
});
}
});
// 虚拟旅游功能
const virtualTour = this.panoramaViewer.getPlugin(VirtualTourPlugin);
virtualTour.setNodes([
{
......@@ -89,9 +119,52 @@ export default {
nodeId: '2',
// position: { textureX: 2000, textureY: 1000 },
position: { yaw: -300, pitch: 0 },
arrowStyle: {
color: '#AEEEEE',
hoverColor: 0xaa5500,
outlineColor: 0x000000,
scale: [0.5, 2],
}
},
],
markers: [markerLighthouse],
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: {
// },
// },
{
// image marker that opens the panel when clicked
id: 'image1',
position: { yaw: 250.5, pitch: 50.1 },
image: temp_img_pin,
size: { width: 50, height: 50 },
// anchor: 'bottom center',
zoomLvl: 100,
},
{
// image marker that opens the panel when clicked
id: 'image2',
position: { yaw: 219.9, pitch: 50.5 },
image: temp_img_pin,
size: { width: 50, height: 50 },
// anchor: 'bottom center',
zoomLvl: 100,
},
],
name: '卧室',
thumbnail: temp_img
},
{
id: '2',
......@@ -103,6 +176,8 @@ export default {
position: { yaw: 0, pitch: 0 },
},
],
name: '展厅',
thumbnail: temp_img2
},
{
id: '3',
......@@ -111,11 +186,13 @@ export default {
{
nodeId: '1',
// position: { textureX: 1000, textureY: 1000 },
position: { yaw: 0, pitch: 0 },
position: { yaw: 300, pitch: 0 },
},
],
name: '室外',
thumbnail: temp_img3
},
])
], 1);
})
}
}
......@@ -127,41 +204,40 @@ export default {
initViewer: async function () {
this.panoramaViewer = new Viewer({
container: document.querySelector('#viewer'), // 容器
// loadingImg: temp_img_loading,
panorama: temp_img,
defaultZoomLvl: 0,
navbar: [
'zoom',
'move',
// 'caption',
// 'fullscreen'
],
navbar: 'zoom move gallery',
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: {
},
},
],
// 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: {
// },
// },
// ],
}],
VirtualTourPlugin,
[GalleryPlugin, {
thumbnailSize: { width: 150, height: 150 },
}]
], // 标记点
size: {
width: '100%',
height: '100%'
}
},
})
}
}
......@@ -171,8 +247,8 @@ export default {
},
methods: {
onClose () {
console.warn(1);
this.$emit('close', false)
// this.panoramaViewer = null;
},
onClick () {
......
......@@ -82,21 +82,21 @@ export default ({ command, mode }) => {
postcss: {
// 内联的 PostCSS 配置（格式同 postcss.config.js），或者一个（默认基于项目根目录的）自定义的 PostCSS 配置路径。其路径搜索是通过 postcss-load-config 实现的。 注意，如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源。
plugins: [
postcsspxtoviewport({
unitToConvert: 'px', // 要转化的单位
viewportWidth: 375, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
// exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
exclude: [],
landscape: false, // 是否处理横屏情况
}),
// postcsspxtoviewport({
// unitToConvert: 'px', // 要转化的单位
// viewportWidth: 375, // UI设计稿的宽度
// unitPrecision: 6, // 转换后的精度，即小数点位数
// propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
// viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
// fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
// selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
// minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
// mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
// replace: true, // 是否转换后直接更换属性值
// // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
// exclude: [],
// landscape: false, // 是否处理横屏情况
// }),
],
},
preprocessorOptions: {
......
......@@ -136,7 +136,7 @@
dependencies:
three "^0.155.0"
"@photo-sphere-viewer/gallery-plugin@5.2.0":
"@photo-sphere-viewer/gallery-plugin@5.2.0", "@photo-sphere-viewer/gallery-plugin@^5.2.0":
version "5.2.0"
resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/gallery-plugin/-/gallery-plugin-5.2.0.tgz#c4f8a8a998b2a15f310538d4c3a9cb52cfd7c407"
integrity sha512-JQHJNTYcF0JER2N1eiVMzN5uc/Fbi2GdsYFtEOaQQc2cs/pO4v/KKrotvE4ZTFLSieg57moSxDnEm82o4gz4nw==
......