| | |
| | | </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> |
| | | </li> |
| | |
| | | |
| | | <script> |
| | | import { mapGetters } from 'vuex' |
| | | |
| | | let currentOrgLayer = null |
| | | |
| | | export default { |
| | | name: 'OrgNavBar', |
| | |
| | | 'orgNavBarTitle' |
| | | ]) |
| | | }, |
| | | watch: { |
| | | orgNavBarList: { |
| | | handler (newData, oldData) { |
| | | if (newData.length > 0) { |
| | | currentOrgLayer = new global.DC.HtmlLayer('currentOrgLayer') |
| | | global.viewer.addLayer(currentOrgLayer) |
| | | |
| | | newData.forEach((item, index) => { |
| | | const divIcon = new global.DC.DivIcon( |
| | | new global.DC.Position(Number(item.longitude), Number(item.latitude), 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> |
| | | ` |
| | | ) |
| | | |
| | | divIcon.attr.name = item.navTitle |
| | | |
| | | currentOrgLayer.addOverlay(divIcon) |
| | | }) |
| | | } else { |
| | | this.removeLayer() |
| | | } |
| | | }, |
| | | immediate: true |
| | | } |
| | | }, |
| | | methods: { |
| | | removeLayer () { |
| | | if (currentOrgLayer != null) { |
| | | global.viewer.removeLayer(currentOrgLayer) |
| | | currentOrgLayer = null |
| | | } |
| | | }, |
| | | |
| | | mapPopup (item) { |
| | | this.$store.commit('CLEAR_ALL', null) |
| | | |
| | |
| | | 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]) |
| | | |
| | | const divIcon = new global.DC.DivIcon( |
| | | new global.DC.Position(Number(param.longitude), Number(param.latitude), 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> |
| | | ` |
| | | ) |
| | | |
| | | divIcon.attr.name = param.navTitle |
| | | |
| | | currentOrgLayer.addOverlay(divIcon) |
| | | }, |
| | | flickerEnd (param, name) { |
| | | const layerIcon = currentOrgLayer.getOverlaysByAttr('name', name) |
| | | |
| | | currentOrgLayer.removeOverlay(layerIcon[0]) |
| | | |
| | | const divIcon = new global.DC.DivIcon( |
| | | new global.DC.Position(Number(param.longitude), Number(param.latitude), 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> |
| | | ` |
| | | ) |
| | | |
| | | divIcon.attr.name = param.navTitle |
| | | |
| | | currentOrgLayer.addOverlay(divIcon) |
| | | } |
| | | } |
| | | } |