liuyg
2022-03-31 f3e4a728bca47d424fb3f9f0e2ef438cec58a2e3
src/components/orgNavBar/index.vue
@@ -9,7 +9,13 @@
        </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>
@@ -21,6 +27,8 @@
<script>
import { mapGetters } from 'vuex'
let currentOrgLayer = null
export default {
    name: 'OrgNavBar',
    data () {
@@ -31,7 +39,6 @@
    },
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl',
            // 点信息
@@ -48,7 +55,47 @@
            '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)
@@ -74,7 +121,7 @@
            }
            this.newPopup(item)
            this.viewer.flyToPosition(
            global.viewer.flyToPosition(
                new global.DC.Position(
                    Number(item.longitude),
                    Number(item.latitude),
@@ -97,7 +144,7 @@
                )
            )
            // eslint-disable-next-line no-unused-vars
            var popup = new global.DC.DivForms(this.viewer, {
            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'divFormsDomBox',
                position: [position]
            })
@@ -115,10 +162,59 @@
            }
            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])
            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)
        }
    }
}