添加矢量地图切换

guanqb

2022-11-11 9690bf6e3ee78b07c3f6f806dc5ed416d87da013

添加矢量地图切换

 public/img/base_map.png

 public/img/elec.png

 public/img/favicon1.ico

Binary files differ

 public/img/favicon1.jpg

Binary files differ

 public/img/img.png

 public/img/logo.png

Binary files differ

 src/components/map/index.vue

@@ -27,6 +27,18 @@
                ></i>
            </el-tooltip>
        </div>
        <!-- 切换矢量图按钮 -->
        <div class="image-switch-icon-btn" title="切换影像" @click="showImgBtn = !showImgBtn">
            <img src="/img/base_map.png" alt />
        </div>
        <div class="image-switch-img-btn" v-show="showImgBtn">
            <div class="img" @click="switchImg">
                <span :class="{on:imgtype == 0}">影像</span>
            </div>
            <div class="elec" @click="switchElec">
                <span :class="{on:imgtype == 1}">矢量</span>
            </div>
        </div>
    </div>
</template>

@@ -43,6 +55,8 @@
}

let tilesetLayer = null

let baseLayers = null

let tilesetObject = {
    sdTilesetLayer: null
@@ -62,7 +76,9 @@
            searchDetailsShow: false,
            videoExist: true,
            videoTotal: 0,
            carTotal: 0
            carTotal: 0,
            showImgBtn: false,
            imgtype: 0,
        }
    },

@@ -101,7 +117,6 @@
            global.viewer.addLayer(siteEntitylayers)

            // 图层加入地图

            layersObjcect.housingEstateLayer = new global.DC.VectorLayer('housingEstateLayer')
            global.viewer.addLayer(layersObjcect.housingEstateLayer)
            layersObjcect.patrolWagonLayer = new global.DC.VectorLayer('patrolWagonLayer')
@@ -155,6 +170,7 @@
                    maximumLevel: 18
                })
            )


            // 上饶部署，内网使用的
            // global.viewer.imageryLayers.addImageryProvider(
@@ -292,6 +308,34 @@
                this.$router.push({ path: '/lyout/house', query: { searchName: 'xxx小区' } })
            }
        },
        switchImg () {
            // 天地图 影像
            this.imgtype = 0
            global.viewer.imageryLayers.remove(baseLayers)
            baseLayers = global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )
        },
        switchElec () {
            // 天地图 矢量
            this.imgtype = 1
            global.viewer.imageryLayers.remove(baseLayers)
            baseLayers = global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )
        },
        /**
         * @description: 全屏控制
         * @return {*} 无返回值
@@ -321,7 +365,6 @@
                } else if (fullscreen.msRequestFullscreen) {
                    fullscreen.msRequestFullscreen()
                }

                this.isFullscreen = true
            }
        },

 src/styles/dc/index.scss

@@ -92,4 +92,68 @@

.screen-full-btn.shrink-btn {
    left: 410px !important;
}
.image-switch-icon-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px;
    bottom: 200px;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: #fff;
    background: #fff;
    border-radius: 5px;
    z-index: 99;
    background-color: $bg-color !important;
    cursor: pointer;
}
.image-switch-icon-btn.iconbottom {
    left: 410px;
    bottom: 500px; 
}
.image-switch-img-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50px;
    bottom: 190px;
    font-size: 20px;
    color: #fff;
    background: #fff;
    border-radius: 5px;
    z-index: 99;
    background-color: $bg-color !important;
    cursor: pointer;
    .img,.elec {
        position: relative;
        background-image: url(/img/img.png);
        background-size: 100% 100%;
        width: 80px;
        height: 60px;
        border: 2px solid #1a6bae;
        span {
            position: absolute;
            font-size: 16px;
            right: 2px;
            bottom: 2px;
            padding: 0 2px;
        }
        &>.on{
            background-color: #1a6bae;
        }
    }
    .img:hover,.elec:hover {
        border: 2px solid #fff;
    }
    .elec{
        background-image: url(/img/elec.png);
    }
}
.image-switch-img-btn.imgbottom {
        left: 450px;
        bottom: 490px;
}

 src/views/home/index.vue

@@ -659,6 +659,8 @@
            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('.image-switch-icon-btn').classList.add('iconbottom')
            document.querySelector('.image-switch-img-btn').classList.add('imgbottom')
            this.setDomStyle()
        })
        // axios.get('/user/getUserList').then((res) => {
@@ -1497,6 +1499,8 @@
        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('.image-switch-icon-btn').classList.remove('iconbottom')
        document.querySelector('.image-switch-img-btn').classList.remove('imgbottom')
        window.removeEventListener('resize', this.setDomStyle)
    },
}