一键俯视，位置初始化

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">
            <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,21 +12,11 @@
    <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
                            }}
@@ -41,21 +31,11 @@

            <!-- 菜单导航 -->
            <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
                            }}
@@ -103,25 +83,15 @@
            <!-- 地图区域 -->
            <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')
                }
            })
@@ -453,6 +428,7 @@
            align-items: center;

            & > .nav-list {

                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                & > span.on {