From e40ee62d3e9b71ffe3432d32a53a00c4097b5708 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 31 Dec 2021 09:03:28 +0800
Subject: [PATCH] +3d 2.5d
---
src/components/orgNavBar/index.vue | 103 ++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 77 insertions(+), 26 deletions(-)
diff --git a/src/components/orgNavBar/index.vue b/src/components/orgNavBar/index.vue
index 7579241..d8f67e1 100644
--- a/src/components/orgNavBar/index.vue
+++ b/src/components/orgNavBar/index.vue
@@ -6,7 +6,7 @@
@mousedown="move"
:class="{'move': moveFlag}">
<div class="title">
- <img class="icon"
+ <img class="icon deblurring"
src="/img/icon/jg.png"
alt="">
<span>
@@ -37,6 +37,7 @@
<script>
import { mapGetters } from 'vuex'
+
export default {
name: 'OrgNavBar',
data () {
@@ -60,7 +61,17 @@
...mapGetters([
'viewer',
'popupBgUrl',
- 'pupupQRUrl'
+ 'pupupQRUrl',
+ // 点信息
+ 'pointPosition',
+ // 点名称
+ 'stateName',
+ // 地址
+ 'siteName',
+ // 介绍
+ 'introduceText',
+ // 全景地址
+ 'panoramaUrl'
])
},
methods: {
@@ -114,31 +125,39 @@
this.$parent.closeModel()
},
mapPopup (item) {
- this.$store.commit('SET_POPUPBGURL', item.bgImg)
- this.$store.commit('SET_POPUPQRURL', item.QRImg)
+ this.$store.commit('CLEAR_ALL', null)
- console.log(this.popupBgUrl)
- var that = this
- // item.alt, item.heading, item.pitch, item.roll
- this.viewer.zoomToPosition(
- new this.DC.Position(item.longitude, item.latitude, item.alt, 35, -45, 0),
+ var imgArr = item.bgImg.split(',')
+
+ this.$store.commit('SET_POPUPBGURL', imgArr[0])
+ this.$store.commit('SET_POPUPQRURL', item.QRImg)
+ this.$store.commit('SET_POINTPOSITION', [Number(item.longitude), Number(item.latitude), Number(item.alt), Number(item.heading), Number(item.pitch), Number(item.roll)])
+ this.$store.commit('SET_STATENAME', item.navTitle)
+ this.$store.commit('SET_SITENAME', item.address)
+ this.$store.commit('SET_TELEPHONE', item.telephone)
+ this.$store.commit('SET_INTRODUCETEXT', item.introduce)
+ this.$store.commit('SET_POPUPIMGATLAS', imgArr)
+
+ this.newPopup(item)
+ this.viewer.flyToPosition(
+ new this.DC.Position(Number(item.longitude), Number(item.latitude), 3000, Number(item.heading), Number(item.pitch), Number(item.roll)),
function () {
- that.newPopup(item)
- }
+ },
+ 3
)
},
newPopup (item) {
- const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(item.longitude, item.latitude, item.alt, 35, -45, 0))
- // eslint-disable-next-line new-cap
- var popup = new this.DC.divForms(this.viewer, {
- domId: 'div1',
- title: item.navTitle,
- className: 'divForms-dom',
- content: document.getElementById('mapChildContent'),
+ const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.longitude), Number(item.latitude), Number(item.alt), Number(item.heading), Number(item.pitch), Number(item.roll)))
+ // eslint-disable-next-line no-unused-vars
+ var popup = new this.DC.DivForms(this.viewer, {
+ domId: 'divFormsDomBox',
position: [
position
]
})
+
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_DETAILSPOPUP', true)
}
}
}
@@ -150,11 +169,12 @@
width: 322px;
height: auto;
border-radius: 8px;
- top: 24%;
- left: 20%;
- background-color: #fff;
+ top: 140px;
+ left: 140px;
+ background-color: transparent;
z-index: 999;
font-size: 14px;
+
.container {
.header {
position: relative;
@@ -162,14 +182,27 @@
width: 100%;
height: 36px;
line-height: 36px;
- background-color: #020c17;
+ background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
+ background: -webkit-linear-gradient(
+ to left,
+ rgba(0, 180, 219, 0.9),
+ rgba(0, 131, 176, 0.9)
+ ); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(
+ to left,
+ rgba(0, 180, 219, 0.9),
+ rgba(0, 131, 176, 0.9)
+ ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
.title {
padding-left: 10px;
+
img {
- width: 18px;
- height: 18px;
+ width: 20px;
+ height: 20px;
vertical-align: middle;
}
+
span {
margin-left: 6px;
display: inline-block;
@@ -177,6 +210,7 @@
color: #fff;
}
}
+
.close {
position: absolute;
right: 6px;
@@ -186,11 +220,14 @@
margin: auto;
width: 14px;
height: 14px;
+ cursor: pointer;
}
}
+
.move {
cursor: move;
}
+
.content {
clear: both;
width: 100%;
@@ -198,12 +235,23 @@
margin-top: 0px;
text-align: center;
overflow-y: auto;
- background: url(/img/bg/nav-bg.jpeg) no-repeat;
- background-size: 100% 100%;
+ background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
+ background: -webkit-linear-gradient(
+ to left,
+ rgba(0, 180, 219, 0.9),
+ rgba(0, 131, 176, 0.9)
+ ); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(
+ to left,
+ rgba(0, 180, 219, 0.9),
+ rgba(0, 131, 176, 0.9)
+ ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-radius: 0 0 8px 8px;
+
ul {
padding: 15px;
padding-top: 4px;
+
li {
padding-left: 24px;
position: relative;
@@ -212,6 +260,7 @@
list-style: none;
border-bottom: 1px dashed #ccc;
text-align: left;
+
img {
position: absolute;
left: 0;
@@ -221,10 +270,12 @@
margin: auto;
width: 14px;
}
+
span {
color: #fff;
cursor: pointer;
}
+
span:hover {
text-decoration: underline;
}
--
Gitblit v1.9.3