一键俯视，位置初始化

shuishen

2023-03-18 cf5f0dc4f746e604248b8a668fb51e94b2b35f49

一键俯视，位置初始化

 public/img/icon/overlook.png

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-18 08:38:21
 * @LastEditTime: 2023-03-18 09:19:55
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -12,6 +12,11 @@
    <div class="viewer-box" id="viewer-container">
        <slot ref="mainContent" name="mainContent"></slot>
        <slot name="showButton"></slot>
        <div class="over-look-btn">
            <el-tooltip content="一键俯视" placement="bottom" effect="dark">
                <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="bottom" effect="dark">
@@ -23,9 +28,12 @@
        </div>
        <!-- 切换矢量图按钮 -->
        <div class="image-switch-icon-btn">
            <div class="icon-box" @click.stop="showImgBtn = !showImgBtn">
                <img src="/img/base_map.png" alt />
            </div>
            <el-tooltip content="图层、模型、视角" placement="bottom" effect="dark">
                <div class="icon-box" @click.stop="showImgBtn = !showImgBtn">
                    <img src="/img/base_map.png" alt />
                </div>
            </el-tooltip>


            <div class="image-switch-img-btn" v-show="showImgBtn">
                <div class="layer-change-box">
@@ -33,6 +41,7 @@
                        底图
                        <div class="close" @click.stop="showImgBtn = false" title="关闭"></div>
                    </div>

                    <div class="content">
                        <div class="img" @click="switchImg">
                            <span :class="{ on: imgtype == 0 }">影像</span>
@@ -518,10 +527,30 @@
                        sitePitch: -45
                    })
                }

            document.querySelector('.dc-zoom-controller .refresh svg title').innerHTML = '初始化位置'

        })
    },

    methods: {
        overLookClick () {
            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    118.04, 28.46938164123123, 60000
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
        },

        angleChange (e) {
            if (e) {
                global.viewer.camera.flyTo({

 src/styles/dc/index.scss

@@ -55,6 +55,32 @@
    bottom: 362px !important;
}

.over-look-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: #fff;
    background: #fff;
    border-radius: 5px;
    z-index: 97;
    background-color: $bg-color !important;
}

.over-look-btn.homebottom {
    left: 402px !important;
    bottom: 540px;
}

.over-look-btn.shrink-btn {
    left: 410px !important;
}

.screen-full-btn {
    display: flex;
    align-items: center;
@@ -87,11 +113,11 @@
    bottom: 318px;
}

.dc-zoom-controller.shrink-btn {
.screen-full-btn.shrink-btn {
    left: 410px !important;
}

.screen-full-btn.shrink-btn {
.dc-zoom-controller.shrink-btn {
    left: 410px !important;
}


 src/styles/media/index.scss

@@ -2447,7 +2447,18 @@
                    left: countSizeVw(400, 1920);
                }

                .over-look-btn.homebottom {
                    left: countSizeVw(402, 1920) !important;
                    bottom: calc((100% - maxCountSizeVh(120)) / 3 + countSizeVh(220));
                }

                .over-look-btn.shrink-btn {
                    left: countSizeVw(410, 1920) !important;
                }


                // 地图，控制按钮
                .over-look-btn,
                .screen-full-btn {
                    left: countSizeVh(10);
                    bottom: countSizeVh(10);

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-16 09:34:42
 * @LastEditTime: 2023-03-18 08:59:32
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -658,6 +658,7 @@
            document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')
            // document.querySelector('.dc-container .dc-location-bar').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')
            this.setDomStyle()

@@ -2126,6 +2127,7 @@
        document.querySelector('.dc-container .dc-zoom-controller').classList.remove('homebottom')
        // document.querySelector('.dc-container .dc-location-bar').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')
        window.removeEventListener('resize', this.setDomStyle)
    },

 src/views/layout/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-22 13:43:08
 * @LastEditTime: 2023-03-18 09:00:11
 * @FilePath: \srs-police-affairs\src\views\layout\index.vue
 * @Description: 
 * 
@@ -12,23 +12,13 @@
    <div class="wrapper">
        <div class="main-header">
            <div class="menu-list left">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuLeftList"
                    :key="index"
                >
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
                            subItem.menuName
                                subItem.menuName
                            }}
                        </div>
                    </div>
@@ -41,23 +31,13 @@

            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuRightList"
                    :key="index"
                >
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
                            subItem.menuName
                                subItem.menuName
                            }}
                        </div>
                    </div>
@@ -75,53 +55,43 @@
                    <div class="userBtn">
                        <div class="back-system" v-if="userBackSystem" @click="goToBack">
                            <i class="el-icon-user-back"></i>
                            运维管理
                        </div>
                        <div class="edit" @click="goTOLogout">
                            <i class="el-icon-user-quit"></i>
                            退出登录
                        </div>
                        运维管理
                    </div>
                    <div class="edit" @click="goTOLogout">
                        <i class="el-icon-user-quit"></i>
                        退出登录
                    </div>
                </div>
            </div>
            <!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser">
        </div>
        <!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser">
                <div class="userDetail" v-if="isShowUserDetail">
                    <div class="triangle"></div>
                    <div class="userName">用户名：{{userName}}</div>
                    <div class="userBtn">
                        <div class="edit" @click="goTOLogin">
                            >
                            <img src="../../../public/img/editLogin.webp" alt />
                        </div>
                        <div class="return" @click="goTOFllow">返回引导页</div>
                    </div>
                </div>
            </div>-->
                                <div class="userName">用户名：{{userName}}</div>
                                <div class="userBtn">
                                    <div class="edit" @click="goTOLogin">
                                        >
                                        <img src="../../../public/img/editLogin.webp" alt />
                                    </div>
                                    <div class="return" @click="goTOFllow">返回引导页</div>
                                </div>
                            </div>
                        </div>-->
        </div>

        <div class="main-container">
            <!-- 地图区域 -->
            <map-box ref="modalForm">
                <!-- 主体内容区域 -->
                <div
                    slot="mainContent"
                    class="main-content"
                    id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                >
                <div slot="mainContent" class="main-content" id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                    <router-view ref="target-name"></router-view>
                </div>

                <el-button
                    slot="showButton"
                    v-show="leftShow"
                    class="flexible-btn"
                <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
                    id="FlexibleBtn"
                    type="primary"
                    @click="flexibelClick"
                ></el-button>
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                    @click="flexibelClick"></el-button>
            </map-box>
        </div>
    </div>
@@ -236,6 +206,7 @@
                this.$nextTick(() => {
                    document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                    document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
                })

@@ -297,12 +268,14 @@
            if (this.show) {
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                document.querySelector('.screen-full-btn').classList.add('shrink-btn')
                document.querySelector('.over-look-btn').classList.add('shrink-btn')

                document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
            } else {

                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
            }
        },
@@ -319,12 +292,14 @@

                    document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.add('shrink-btn')
                    document.querySelector('.over-look-btn').classList.add('shrink-btn')

                    document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
                } else {

                    document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                    document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
                }
            })
@@ -412,7 +387,7 @@
            overflow: hidden;
            letter-spacing: 6px;

            & > img {
            &>img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -428,7 +403,7 @@
                // border-radius: 10px 16px 10px 16px;
                transform: skew(58deg);

                & > span {
                &>span {
                    transform: skew(-58deg);
                }
            }
@@ -442,7 +417,7 @@
                // border-radius: 16px 10px 16px 10px;
                transform: skew(-58deg);

                & > span {
                &>span {
                    transform: skew(58deg);
                }
            }
@@ -452,10 +427,11 @@
            display: flex;
            align-items: center;

            & > .nav-list {
            &>.nav-list {

                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                & > span.on {
                &>span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }
@@ -583,7 +559,7 @@
                    font-size: 16px;
                    font-weight: normal;

                    & > div {
                    &>div {
                        margin-top: 4px;
                        width: 100px;
                        height: 32px;