添加矢量地图切换

guanqb

2022-11-11 9690bf6e3ee78b07c3f6f806dc5ed416d87da013

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