shuishen
2022-03-24 369b82a3d81afe2f0574e2c44fd0a2918516b433
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>
@@ -20,6 +26,8 @@
<script>
import { mapGetters } from 'vuex'
let currentOrgLayer = null
export default {
    name: 'OrgNavBar',
@@ -47,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)
@@ -120,6 +168,53 @@
            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)
        }
    }
}