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' {
VanImage: typeof import('vant/es')['Image']
VanPopup: typeof import('vant/es')['Popup']
VanRow: typeof import('vant/es')['Row']
VRViewer: typeof import('./src/components/VRViewer/index.vue')['default']
}
}
......
......@@ -12,6 +12,8 @@
"cypress:open": "cypress open"
},
"dependencies": {
"@photo-sphere-viewer/core": "^5.2.0",
"@photo-sphere-viewer/markers-plugin": "^5.2.0",
"@videojs-player/vue": "^1.0.0",
"@vitejs/plugin-legacy": "^1.8.2",
"@vueuse/core": "^8.5.0",
......@@ -28,6 +30,7 @@
"mockjs": "^1.1.0",
"moment": "^2.29.3",
"mui-player": "^1.6.0",
"photo-sphere-viewer": "^4.8.1",
"svgson": "^5.3.1",
"typescript": "^4.7.3",
"unplugin-vue-components": "^0.24.1",
......
<!--
* @Date: 2023-07-27 11:04:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-11 14:14:16
* @LastEditTime: 2023-08-16 09:52:07
* @FilePath: /map-demo/src/components/Floor/index.vue
* @Description: 文件描述
-->
......@@ -34,6 +34,11 @@
<van-icon name="arrow-down" size="1.25rem" />
</span>
</div>
<div v-if="level_show" class="icon" style="top: 18rem; right: 1rem;">
<span @click="showVR">
<van-icon name="tv-o" size="1.25rem" />
</span>
</div>
<div class="animate-bar icon">
<div v-if="level_show == 4" class="">
<div v-if="!svg_safe_animate_status" @click="createAnimation(true, level_show - 1, 'safe')" style="font-size: 1.25rem;">
......@@ -84,7 +89,6 @@
<div class="level_after">L{{ index + 1 }}</div>
</div>
</div>
</div>
</div>
</div>
......@@ -116,6 +120,8 @@
</van-row>
</div>
</van-popup>
<vr-viewer :show="show_vr" @close="onVrClose"></vr-viewer>
</div>
</template>
......@@ -125,8 +131,10 @@ import $ from 'jquery';
import SvgIcon from './svgIcon.vue'
import Data from './pin'
import { wxInfo } from '@/utils/tools'
import VrViewer from '@/components/VRViewer'
export default {
components: { VrViewer },
data() {
return {
level_show: '',
......@@ -182,7 +190,7 @@ export default {
},
svg_safe_animate_status: false,
svg_safe_animate: `
<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">
<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">
</path>
<circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
<animateMotion dur="8s" repeatCount="indefinite">
......@@ -192,7 +200,7 @@ export default {
`,
svg_toilet_animate_status: false,
svg_toilet_animate: `
<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">
<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">
</path>
<circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
<animateMotion dur="8s" repeatCount="indefinite">
......@@ -202,7 +210,7 @@ export default {
`,
svg_door_animate_status: false,
svg_door_animate: `
<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">
<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">
</path>
<circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
<animateMotion dur="8s" repeatCount="indefinite">
......@@ -210,6 +218,7 @@ export default {
</animateMotion>
</circle>
`,
show_vr: false,
}
},
async mounted() {
......@@ -394,6 +403,12 @@ export default {
this.svg_animate_obj[level] = this.svg_animate_obj[level].filter(item => item === id);
}
},
showVR() {
this.show_vr = true;
},
onVrClose() {
this.show_vr = false;
},
}
}
</script>
......
/*
* @Date: 2023-08-01 13:55:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-10 16:51:33
* @LastEditTime: 2023-08-12 06:41:47
* @FilePath: /map-demo/src/components/Floor/pin.js
* @Description: 文件描述
*/
......
<!--
* @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>
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-11 14:16:19
* @LastEditTime: 2023-08-15 17:10:55
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 内部地图主体页面
-->
......@@ -277,7 +277,7 @@ export default {
point_range: [ // 景区范围经纬度
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
],
show_floor_popup: false,
show_floor_popup: true,
}
},
async mounted() {
......
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.