Skip to content

F
founder_vue
Commit 6de7b373 by chenqiang
Options

1

parent 2e013b51
Showing with 86 additions and 46 deletions
src/views/Home.vue
......@@ -2,7 +2,8 @@
<template>
<div style="position: relative;">
<div class="PSViewer" ref="psvdbg"></div>
<div style="position:absolute;bottom:40px;height: 100px;width: 100%;z-index: 11;display:flex;justify-content: center;">
<div
style="position:absolute;bottom:40px;height: 100px;width: 100%;z-index: 11;display:flex;justify-content: center;">
<div v-for="item in imgList"
:key="item.id"
@click="getQh(item)"
......@@ -14,70 +15,105 @@
</template>
<script>
import photoSphereViewer from 'photo-sphere-viewer';
import photoSphereViewer from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
export default {
data() {
return {
img:require("../assets/img/gyzm1.jpg"),
imgList:[
img: require('../assets/img/gyzm1.jpg'),
imgList: [
{
id: 1,
url:require("../assets/img/slt1.jpg"),
url2: require("../assets/img/gyzm1.jpg"),
url: require('../assets/img/slt1.jpg'),
url2: require('../assets/img/gyzm1.jpg')
},
{
id: 2,
url: require("../assets/img/slt2.jpg"),
url2: require("../assets/img/gyzm2.jpg"),
url: require('../assets/img/slt2.jpg'),
url2: require('../assets/img/gyzm2.jpg')
},
{
{
id: 3,
url: require("../assets/img/slt3.jpg"),
url2: require("../assets/img/gyzm3.jpg"),
url: require('../assets/img/slt3.jpg'),
url2: require('../assets/img/gyzm3.jpg')
},
{
id: 4,
url: require("../assets/img/slt4.jpg"),
url2: require("../assets/img/gyzm4.jpg"),
},{
url: require('../assets/img/slt4.jpg'),
url2: require('../assets/img/gyzm4.jpg')
}, {
id: 5,
url: require("../assets/img/slt5.jpg"),
url2: require("../assets/img/gyzm5.jpg")
},
url: require('../assets/img/slt5.jpg'),
url2: require('../assets/img/gyzm5.jpg')
}
]
};
}
},
mounted(){
mounted() {
this.init()
},
// 1 大步社区卫生服务站
// 1 大步社区卫生服务站
// 2 创兴二路-观音祖庙
// 3 大步村应急避护场所
// 4 大步实验小学
// 5 东莞市麻涌中学
methods: {
init(){
const self =this;
angle(start, end) {
var diff_x = end.x - start.x
var diff_y = end.y - start.y
//返回弧度
return Math.atan(diff_y / diff_x)
},
//lat纵向
angle2(start, end) {
var diff_z = end.z - start.z
var diff_o = Math.sqrt(Math.pow(end.y - start.y, 2) + Math.pow(end.x - start.x, 2))
//返回弧度
return Math.atan(diff_z / diff_o)
},
init() {
const self = this
self.PSV = new photoSphereViewer({
panorama:self.img, // 图片路径
panorama: self.img, // 图片路径
container: self.$refs.psvdbg, // 容器
time_anim:false, //自动播放
time_anim: false, //自动播放
// caption: '',
// default_long: 1.4441088145446443,
// default_lat: 0.0800613513013615,
// sphere_correction: {pan: 30.01, tilt: 0, roll: 0},
zoom_level:100, //缩放界别，默认值为0，范围0-100
zoom_level: 100, //缩放界别，默认值为0，范围0-100
// default_fov:100,
default_fov: 100,
default_lat: -0.5,
// navbar_style:{
// backgroundColor:"rgba(58,67,77,0.7)"
// },
anim_speed:"0.6rpm", // 旋转速度
anim_speed: '0.6rpm', // 旋转速度
markers: [
{
id: 'circle1',
circle: 20,
// longitude: 113.579224180018,
// latitude: 23.0490926666545,
// x: 113.579224180018,
// y: 23.0490926666545,
content: '大步社区卫生服务站',
tooltip: '大步社区卫生服务站',
// longitude: 1.9822,
longitude: this.angle({x:113.576245148898,y:23.0494463866572,z:0.00999715365469456},
{x:113.579224180018,y:23.0490926666545,z:0.00996999256312847}),
// latitude: -0.4022,
latitude: this.angle2({x:113.576245148898,y:23.0494463866572,z:0.00999715365469456},
{x:113.579224180018,y:23.0490926666545,z:0.00996999256312847}),
width: 32,
height: 32,
// anchor: 'bottom center',
data: {
generated: true
}
},
{
id: 'circle',
circle: 20,
// longitude: 113.579224180018,
......@@ -87,13 +123,15 @@ export default {
content: '创兴二路-观音祖庙',
tooltip: '创兴二路-观音祖庙',
// longitude: 1.9822,
longitude: 1.9853485713380865,
longitude: this.angle({x:113.579224180018,y:23.0490926666545,z:0.00996999256312847},
{x:113.576245148898,y:23.0494463866572,z:0.00999715365469456}),
// latitude: -0.4022,
latitude: 0.40190698504664074,
latitude: this.angle2({x:113.579224180018,y:23.0490926666545,z:0.00996999256312847},
{x:113.576245148898,y:23.0494463866572,z:0.00999715365469456}),
width: 32,
height: 32,
anchor: 'bottom center',
data:{
// anchor: 'bottom center',
data: {
generated: true
}
}
......@@ -179,10 +217,10 @@ export default {
// tooltip: '东莞市麻涌中学'
// }
// ],
size:{
width:"100%",
height: screen.availHeight
// height: document.body.clientHeight
size: {
width: '100%',
// height: screen.availHeight
height: document.body.clientHeight
},
navbar: [
'fullscreen',
......@@ -193,22 +231,23 @@ export default {
], // 下方导航栏
theta_offset: 1000 // 旋转速度
})
self.PSV.on('select-marker', function(marker) {
self.PSV.on('select-marker', function (marker) {
debugger
if (self.PSV) {
self.PSV.destroy()
}
debugger
if(marker.content === '创兴二路-观音祖庙'){
self.img = require("../assets/img/gyzm2.jpg")
}else if(marker.content === '大步社区卫生服务站'){
self.img = require("../assets/img/gyzm1.jpg")
}else if(marker.content === '大步村应急避护场所'){
self.img = require("../assets/img/gyzm3.jpg")
}else if(marker.content === '大步实验小学'){
self.img = require("../assets/img/gyzm4.jpg")
}else if(marker.content === '东莞市麻涌中学'){
self.img = require("../assets/img/gyzm5.jpg")
if (marker.content === '创兴二路-观音祖庙') {
self.img = require('../assets/img/gyzm2.jpg')
} else if (marker.content === '大步社区卫生服务站') {
self.img = require('../assets/img/gyzm1.jpg')
} else if (marker.content === '大步村应急避护场所') {
self.img = require('../assets/img/gyzm3.jpg')
} else if (marker.content === '大步实验小学') {
self.img = require('../assets/img/gyzm4.jpg')
} else if (marker.content === '东莞市麻涌中学') {
self.img = require('../assets/img/gyzm5.jpg')
}
self.$nextTick(() => {
self.init()
......@@ -231,8 +270,9 @@ export default {
// });
// });
},
getQh(item){
getQh(item) {
let self = this
debugger
if (self.PSV) {
self.PSV.destroy()
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment