首页显示与隐藏按钮完善

guanqb

2023-04-07 88ecb47aa7ce189f27d2fbfd3a00bd7234ae3b49

 src/components/map/index.vue

@@ -10,20 +10,24 @@
-->
<template>
    <div class="viewer-box" id="viewer-container">
        <slot ref="mainContent" name="mainContent"></slot>
        <slot name="showButton"></slot>
    <slot ref="mainContent" name="mainContent"></slot>
    <slot name="showButton"></slot>
        <div class="over-look-btn">
            <el-tooltip content="一键俯视" placement="top" effect="dark">
                <i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i>
            </el-tooltip>
            <i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i>
        </el-tooltip>
        </div>
        <!-- 全屏控制按钮 -->
        <div class="screen-full-btn">
            <el-tooltip v-if="isFullscreen" content="缩放" placement="top" effect="dark">
                <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </el-tooltip>
            <el-tooltip v-if="!isFullscreen" content="全屏" placement="top" effect="dark">
                <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            <!-- <el-tooltip v-if="isFullscreen" content="缩放" placement="top" effect="dark">
                                                                                <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
                                                                            </el-tooltip> -->

            <!-- <el-tooltip v-if="!isFullscreen" content="全屏" placement="top" effect="dark">
                                                                                    <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
                                                                                </el-tooltip> -->
            <el-tooltip content="显示/隐藏" placement="top" effect="dark">
                <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="switchShowHomeContent"></i>
            </el-tooltip>
        </div>
        <!-- 切换矢量图按钮 -->
@@ -733,6 +737,26 @@
            }
        },

        // 切换首页显示隐藏
        switchShowHomeContent () {
            this.$store.commit('SET_ISSHOWHOMECONTENT', !this.$store.state.popupParams.isShowHomeContent)

            if (this.$store.state.popupParams.isShowHomeContent) {
                if (document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')
                document.querySelector('.screen-full-btn').classList.add('homebottom')
                document.querySelector('.over-look-btn').classList.add('homebottom')
                document.querySelector('.image-switch-icon-btn').classList.add('iconbottom')
            } else {
                if (!document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('homebottom')
                document.querySelector('.screen-full-btn').classList.remove('homebottom')
                document.querySelector('.over-look-btn').classList.remove('homebottom')
                document.querySelector('.image-switch-icon-btn').classList.remove('iconbottom')
            }

        },

        /**
         * 在图层中添加实体(点)
         * @param {*} item 图标