| | |
| | | <template slot="public-box-header"> |
| | | <div class="title"> |
| | | <img class="icon deblurring" src="/img/icon/jg.png" alt /> |
| | | <span>{{orgNavBarTitle}}</span> |
| | | <span>{{ orgNavBarTitle }}</span> |
| | | </div> |
| | | <img class="close" src="/img/navicon/close.png" alt @click="closeModel" /> |
| | | <img class="close deblurring" src="/img/navicon/close.png" alt @click="closeModel" /> |
| | | </template> |
| | | <template slot="public-box-content"> |
| | | <ul> |
| | | <li v-for="(item, index) in orgNavBarList" :key="index" @click="mapPopup(item)"> |
| | | <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> |
| | | <span>{{ item.navTitle }}</span> |
| | | </li> |
| | | </ul> |
| | | </template> |
| | |
| | | <script> |
| | | import { mapGetters } from 'vuex' |
| | | |
| | | let currentOrgLayer = null |
| | | |
| | | export default { |
| | | name: 'OrgNavBar', |
| | | data () { |
| | | return { |
| | | DC: null |
| | | } |
| | | }, |
| | | created () { |
| | | this.DC = global.DC |
| | | }, |
| | | computed: { |
| | | ...mapGetters([ |
| | | 'viewer', |
| | | 'popupBgUrl', |
| | | 'pupupQRUrl', |
| | | // 点信息 |
| | |
| | | // 全景地址 |
| | | 'panoramaUrl', |
| | | 'orgNavBarList', |
| | | 'orgNavBarTitle' |
| | | '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_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_MONITORURL', item.videourl) |
| | | } |
| | | |
| | | this.newPopup(item) |
| | | this.viewer.flyToPosition( |
| | | new this.DC.Position(Number(item.longitude), Number(item.latitude), 300, Number(item.heading), Number(item.pitch), Number(item.roll)), |
| | | function () { |
| | | }, |
| | | 3 |
| | | ) |
| | | 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) { |
| | | const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.longitude), Number(item.latitude), Number(item.alt))) |
| | | 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 this.DC.DivForms(this.viewer, { |
| | | var popup = new global.DC.DivForms(global.viewer, { |
| | | domId: 'divFormsDomBox', |
| | | position: [ |
| | | position |
| | | ] |
| | | position: [position] |
| | | }) |
| | | |
| | | this.$store.commit('SET_PANORAMAPOPUP', false) |
| | |
| | | } |
| | | |
| | | 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> |
| | | <style scoped lang="scss"></style> |