+注释

liuyg

2022-03-31 4dab9528d8e69c0c3f8ce03a7d4617bb13ecec8d

 src/components/orgNavBar/index.vue

@@ -5,11 +5,17 @@
                <img class="icon deblurring" src="/img/icon/jg.png" alt />
                <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>
                </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,14 +55,54 @@
            '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)

            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),
@@ -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)
        }
    }
}