<template>
|
<public-box class="public-org-nav-bar">
|
<template slot="public-box-header">
|
<div class="title">
|
<img class="icon deblurring" src="/img/icon/jg.png" alt />
|
<span>{{ orgNavBarTitle }}</span>
|
</div>
|
<img class="close deblurring" src="/img/navicon/close.png" alt @click="closeModel" />
|
</template>
|
<template slot="public-box-content">
|
<ul>
|
<li
|
@mouseover="flickerStart(item, item.navTitle)"
|
@mouseout="flickerEnd(item, item.navTitle)"
|
v-for="(item, index) in orgNavBarList"
|
:key="index"
|
@click="mapPopup(item)"
|
>
|
<img :src="item.icon" alt />
|
<span>{{ item.navTitle }}</span>
|
</li>
|
</ul>
|
</template>
|
</public-box>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
|
let currentOrgLayer = null
|
|
export default {
|
name: 'OrgNavBar',
|
data () {
|
return {
|
}
|
},
|
created () {
|
},
|
computed: {
|
...mapGetters([
|
'popupBgUrl',
|
'pupupQRUrl',
|
// 点信息
|
'pointPosition',
|
// 点名称
|
'stateName',
|
// 地址
|
'siteName',
|
// 介绍
|
'introduceText',
|
// 全景地址
|
'panoramaUrl',
|
'orgNavBarList',
|
'orgNavBarTitle',
|
'twoOrThree'
|
])
|
},
|
watch: {
|
orgNavBarList: {
|
handler (newData, oldData) {
|
if (newData.length > 0) {
|
currentOrgLayer = new global.DC.HtmlLayer('currentOrgLayer')
|
global.viewer.addLayer(currentOrgLayer)
|
|
newData.forEach((item, index) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = this.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.longitude, lat: item.latitude
|
}
|
}
|
|
let divIcon = null
|
if (this.twoOrThree == '三 维') {
|
divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
`
|
<div class="tag-entitys-box">
|
<div class="tag-content">
|
${item.navTitle}
|
</div>
|
<div class="tag-angle-content">
|
<img src="https://map.hit.edu.cn/images/tarrow_xq.png">
|
</div>
|
</div>
|
`
|
)
|
} else {
|
divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(item.longitude), Number(item.latitude), 50),
|
`
|
<div class="tag-entitys-box">
|
<div class="tag-content">
|
${item.navTitle}
|
</div>
|
<div class="tag-angle-content">
|
<img src="https://map.hit.edu.cn/images/tarrow_xq.png">
|
</div>
|
</div>
|
`
|
)
|
}
|
|
divIcon.attr.name = item.navTitle
|
|
divIcon.attr.params = item
|
|
currentOrgLayer.addOverlay(divIcon)
|
})
|
} else {
|
this.removeLayer()
|
}
|
},
|
immediate: true
|
},
|
twoOrThree: {
|
handler (newData, oldData) {
|
if (newData == '三 维') {
|
if (currentOrgLayer != null) {
|
currentOrgLayer.eachOverlay((item) => {
|
const position = this.coordinate(item.attr.params.x)
|
item.position = new global.DC.Position(Number(position.lng), Number(position.lat), 0)
|
})
|
}
|
} else {
|
if (currentOrgLayer != null) {
|
currentOrgLayer.eachOverlay((item) => {
|
item.position = new global.DC.Position(Number(item.attr.params.jd), Number(item.attr.params.wd), 50)
|
})
|
}
|
}
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
coordinate (item) {
|
const arr = item.split(',')
|
|
return {
|
lng: arr[0],
|
lat: arr[1]
|
}
|
},
|
|
removeLayer () {
|
if (currentOrgLayer != null) {
|
global.viewer.removeLayer(currentOrgLayer)
|
currentOrgLayer = null
|
}
|
},
|
|
mapPopup (item) {
|
let obj = {}
|
|
if (item.x && item.x != '') {
|
const position = this.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.longitude, lat: item.latitude
|
}
|
}
|
|
this.$store.commit('CLEAR_ALL', null)
|
|
var imgArr = item.bgImg.split(',')
|
this.$store.commit('SET_POPUPBGURL', imgArr[0])
|
this.$store.commit('SET_POPUPQRURL', item.QRImg)
|
|
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)
|
if (item.videourl && item.videourl != '') {
|
this.$store.commit('SET_MONITORURL', item.videourl)
|
}
|
|
this.newPopup(item, obj)
|
|
if (this.twoOrThree == '三 维') {
|
this.$store.commit('SET_POINTPOSITION', [
|
Number(obj.lng),
|
Number(obj.lat),
|
Number(item.alt),
|
Number(item.heading),
|
Number(item.pitch),
|
Number(item.roll)
|
])
|
global.viewer.flyToPosition(
|
new global.DC.Position(
|
Number(obj.lng),
|
Number(obj.lat),
|
300,
|
Number(item.heading),
|
Number(item.pitch),
|
Number(item.roll)
|
),
|
function () { },
|
3
|
)
|
} else {
|
this.$store.commit('SET_POINTPOSITION', [
|
Number(item.longitude),
|
Number(item.latitude),
|
Number(50),
|
Number(item.heading),
|
Number(item.pitch),
|
Number(item.roll)
|
])
|
global.viewer.flyToPosition(
|
new global.DC.Position(
|
Number(item.longitude),
|
Number(item.latitude),
|
300,
|
Number(item.heading),
|
Number(item.pitch),
|
Number(item.roll)
|
),
|
function () { },
|
3
|
)
|
}
|
},
|
|
newPopup (item, obj) {
|
let position
|
if (this.twoOrThree == '三 维') {
|
position = global.DC.Transform.transformWGS84ToCartesian(
|
new global.DC.Position(
|
Number(obj.lng),
|
Number(obj.lat),
|
Number(item.alt)
|
)
|
)
|
} else {
|
position = global.DC.Transform.transformWGS84ToCartesian(
|
new global.DC.Position(
|
Number(item.longitude),
|
Number(item.latitude),
|
Number(50)
|
)
|
)
|
}
|
|
// eslint-disable-next-line no-unused-vars
|
var popup = new global.DC.DivForms(global.viewer, {
|
domId: 'divFormsDomBox',
|
position: [position]
|
})
|
|
this.$store.commit('SET_PANORAMAPOPUP', false)
|
this.$store.commit('SET_MONITORPOPUP', false)
|
this.$store.commit('SET_DETAILSPOPUP', true)
|
},
|
|
closeModel () {
|
var path = this.$route.path
|
if (path.indexOf('/orgnav') != -1) {
|
this.$store.dispatch('delVisitedViews', this.$route)
|
this.$router.push('/pcLayout/default')
|
}
|
|
this.$store.commit('SET_ORGNAVBARTITLE', '')
|
this.$store.commit('SET_ORGNAVBARFLAG', false)
|
this.$store.commit('SET_ORGNAVBARLIST', [])
|
|
this.$store.commit('SET_DETAILSPOPUP', false)
|
this.$store.commit('SET_PANORAMAPOPUP', false)
|
this.$store.commit('SET_MONITORPOPUP', false)
|
this.removeLayer()
|
},
|
|
flickerStart (param, name) {
|
const layerIcon = currentOrgLayer.getOverlaysByAttr('name', name)
|
|
currentOrgLayer.removeOverlay(layerIcon[0])
|
|
let divIcon = null
|
|
let obj = {}
|
|
if (param.x && param.x != '') {
|
const position = this.coordinate(param.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: param.longitude, lat: param.latitude
|
}
|
}
|
|
if (this.twoOrThree == '三 维') {
|
divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
`
|
<div class="tag-entitys-box layer-entity-animation">
|
<div class="tag-content">
|
${param.navTitle}
|
</div>
|
<div class="tag-angle-content">
|
<img src="https://map.hit.edu.cn/images/tarrow_xq.png">
|
</div>
|
</div>
|
`
|
)
|
} else {
|
divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(param.longitude), Number(param.latitude), 50),
|
`
|
<div class="tag-entitys-box layer-entity-animation">
|
<div class="tag-content">
|
${param.navTitle}
|
</div>
|
<div class="tag-angle-content">
|
<img src="https://map.hit.edu.cn/images/tarrow_xq.png">
|
</div>
|
</div>
|
`
|
)
|
}
|
|
divIcon.attr.name = param.navTitle
|
|
currentOrgLayer.addOverlay(divIcon)
|
},
|
|
flickerEnd (param, name) {
|
const layerIcon = currentOrgLayer.getOverlaysByAttr('name', name)
|
|
currentOrgLayer.removeOverlay(layerIcon[0])
|
|
let divIcon = null
|
|
let obj = {}
|
|
if (param.x && param.x != '') {
|
const position = this.coordinate(param.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: param.longitude, lat: param.latitude
|
}
|
}
|
if (this.twoOrThree == '三 维') {
|
divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
`
|
<div class="tag-entitys-box">
|
<div class="tag-content">
|
${param.navTitle}
|
</div>
|
<div class="tag-angle-content">
|
<img src="https://map.hit.edu.cn/images/tarrow_xq.png">
|
</div>
|
</div>
|
`
|
)
|
} else {
|
divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(param.longitude), Number(param.latitude), 50),
|
`
|
<div class="tag-entitys-box">
|
<div class="tag-content">
|
${param.navTitle}
|
</div>
|
<div class="tag-angle-content">
|
<img src="https://map.hit.edu.cn/images/tarrow_xq.png">
|
</div>
|
</div>
|
`
|
)
|
}
|
|
divIcon.attr.name = param.navTitle
|
|
currentOrgLayer.addOverlay(divIcon)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss"></style>
|
