From 1dee40ea46601f2ee5d10aa0190625ebf03bdc4e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 02 Dec 2024 17:02:19 +0800
Subject: [PATCH] 1
---
src/pages/map/components/scomponents/baseMap.vue | 359 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 359 insertions(+), 0 deletions(-)
diff --git a/src/pages/map/components/scomponents/baseMap.vue b/src/pages/map/components/scomponents/baseMap.vue
new file mode 100644
index 0000000..8828cae
--- /dev/null
+++ b/src/pages/map/components/scomponents/baseMap.vue
@@ -0,0 +1,359 @@
+<!--
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2024-10-28 11:44:45
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2024-11-25 19:39:24
+ * @FilePath: \bigScreen\src\pages\layout\components\scomponents\baseMap.vue
+ * @Description:
+ *
+ * Copyright (c) 2024 by shuishen, All Rights Reserved.
+-->
+<template>
+ <public-box>
+ <template #name>
+ <div class="name"><i class="fa fa-map"></i> 底图</div>
+ </template>
+
+ <template #close>
+ <div class="close cursor-p" @click="$emit('close', 'map')"><i class="fa fa-close"></i></div>
+ </template>
+
+ <template #content>
+ <div class="layers-box-content">
+ <ul class="layers-box">
+ <li :class="{ on: item.mode == curMode }" v-for="item, index in baseMaps" :key="index"
+ @click="loadLAYER(item.mode, index)">
+ <div><img :src="item.src"></div>
+ <div>{{ item.name }}</div>
+ </li>
+ </ul>
+ </div>
+
+ <div class="show-terrain" style="margin-left:10px;color:#fff">
+ <el-checkbox @change="terrainChange" v-model="showTerrainFlag" label="显示地形" size="large" />
+ </div>
+ </template>
+ </public-box>
+</template>
+
+<script setup>
+import { getAssetsFile } from 'utils/utils'
+import AmapMercatorTilingScheme from './cesium/AmapMercatorTilingScheme/index'
+
+const { appContext } = getCurrentInstance()
+const global = appContext.config.globalProperties
+
+const cesiumToken =
+ 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYTZlNGNlYS01NTU1LTQ1MGEtYmNlZS0yNTE2NDk5YWM2MjEiLCJpZCI6MTc5Njk2LCJpYXQiOjE3MDA1NDcwMjV9.qcl4AH2731cfFd0-I1ZLUINPXqvglLkDFD-UGR2zU5M'
+window.$Cesium.Ion.defaultAccessToken = cesiumToken
+
+const TDT_Token = 'c6eea7dad4fa1e2d1e32ec0e7c9735db'
+// 天地图Key
+// 天地图地图
+const TDT_IMG_C = 'https://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
+ '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
+ '&style=default&format=tiles&tk=' + TDT_Token
+// 天地图注记
+const TDT_ZJ = 'https://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
+ '&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
+ '&style=default&format=tiles&tk=' + TDT_Token
+// 标准地图注记
+const TID_STAND = 'https://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0' +
+ '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
+ '&style=default&format=tiles&tk=' + TDT_Token
+
+const imageryProvider_standZh = new window.$Cesium.UrlTemplateImageryProvider({
+ url: 'https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
+ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ maximumLevel: 18,
+ credit: 'stand_zj',
+})
+
+const imageryProvider_stand = new window.$Cesium.UrlTemplateImageryProvider({
+ url: 'https://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,
+ credit: 'stand_tc',
+})
+
+const annotation = new window.$Cesium.WebMapTileServiceImageryProvider({
+ url: TDT_ZJ,
+ layer: 'tdtZwImg_c',
+ style: 'default',
+ format: 'tiles',
+ tileMatrixSetID: 'c',
+ subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
+ tilingScheme: new window.$Cesium.GeographicTilingScheme(),
+ tileMatrixLabels: [
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19',
+ ],
+ maximumLevel: 50,
+})
+
+const imageryProvider_tdt = new window.$Cesium.WebMapTileServiceImageryProvider({
+ url: TDT_IMG_C,
+ layer: 'tdtImg_c',
+ style: 'default',
+ format: 'tiles',
+ tileMatrixSetID: 'c',
+ subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
+ tilingScheme: new window.$Cesium.GeographicTilingScheme(),
+ tileMatrixLabels: [
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19',
+ ],
+ maximumLevel: 17,
+})
+
+const imageryProvider_ammapSL = new window.$Cesium.UrlTemplateImageryProvider({
+ url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+ layer: 'tdtVecBasicLayer',
+ style: 'default',
+ format: 'image/png',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ maximumLevel: 18,
+ tilingScheme: new AmapMercatorTilingScheme(),
+ credit: 'amap_SL',
+})
+
+const imageryProvider_ammap = new window.$Cesium.UrlTemplateImageryProvider({
+ url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+ layer: 'tdtVecBasicLayer',
+ style: 'default',
+ format: 'image/png',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ maximumLevel: 18,
+ tilingScheme: new AmapMercatorTilingScheme(),
+ credit: 'amap_stand',
+})
+
+const imageryProvider_ammapBz = new window.$Cesium.UrlTemplateImageryProvider({
+ url: 'https://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
+ tilingScheme: new AmapMercatorTilingScheme(),
+ minimumLevel: 3,
+})
+
+let mapLayers = [
+ {
+ src: getAssetsFile('stand.png'),
+ mode: '0',
+ name: '天地图矢量',
+ layers: [
+ { key: 'imageryProvider_standZh', layer: imageryProvider_standZh },
+ { key: 'imageryProvider_stand', layer: imageryProvider_stand },
+ ]
+ },
+ {
+ src: getAssetsFile('satellite.png'),
+ mode: '1',
+ name: '天地图影像',
+ layers: [
+ { key: 'annotation', layer: annotation },
+ {
+ key: 'imageryProvider_tdt',
+ layer: imageryProvider_tdt,
+ }
+ ]
+ },
+ {
+ src: getAssetsFile('stand.png'),
+ mode: '2',
+ name: '高德矢量',
+ layers: [
+ {
+ key: 'imageryProvider_ammapSL',
+ layer: imageryProvider_ammapSL,
+ }
+ ]
+ },
+ {
+ src: getAssetsFile('satellite.png'),
+ mode: '3',
+ name: '高德影像',
+ layers: [
+ { key: 'imageryProvider_ammapBz', layer: imageryProvider_ammapBz },
+ { key: 'imageryProvider_ammap', layer: imageryProvider_ammap },
+ ]
+ }
+]
+
+let curMode = ref(null)
+let baseMaps = reactive([])
+
+baseMaps = mapLayers.map(item => {
+ return {
+ src: item.src,
+ mode: item.mode,
+ name: item.name,
+ }
+})
+
+let globalBaseMapLayers = []
+
+const loadLAYER = (mode, ind, cb = () => { }) => {
+ if (mode == curMode.value) return
+
+ let curmapLayers = []
+
+ globalBaseMapLayers.length &&
+ globalBaseMapLayers.forEach((item) => {
+ item.mapLayer.show = false
+ })
+
+ curmapLayers.push(
+ ...mapLayers[ind].layers,
+ )
+
+ // 创建一个Set来快速查找array2中的id
+ let keyBaseMap = new Set(globalBaseMapLayers.map((item) => item.key))
+ let keyMapLayers = new Set(curmapLayers.map((item) => item.key))
+
+ let keyExistBaseMap = curmapLayers.filter((item) => !keyBaseMap.has(item.key))
+
+ let keyNoExistBaseMap = globalBaseMapLayers.filter((item) =>
+ keyMapLayers.has(item.key),
+ )
+
+ keyExistBaseMap.length &&
+ keyExistBaseMap.forEach((item) => {
+ let curLayer = {
+ key: item.key,
+ mapLayer: window.$viewer?.imageryLayers.addImageryProvider(item.layer),
+ }
+
+ curLayer.mapLayer.show = true
+ window.$viewer?.imageryLayers.lowerToBottom(curLayer.mapLayer)
+
+ globalBaseMapLayers.push(curLayer)
+ })
+
+ keyNoExistBaseMap.length &&
+ keyNoExistBaseMap.forEach((item) => {
+ item.mapLayer.show = true
+ window.$viewer?.imageryLayers.lowerToBottom(item.mapLayer)
+ })
+
+ curMode.value = mode
+
+}
+setTimeout(() => {
+ loadLAYER(1, 1)
+}, 0)
+
+const showTerrainFlag = ref(true)
+
+const terrainChange = (e) => {
+ if (e) {
+ let terrain = DC.TerrainFactory.createTerrain(DC.TerrainType.XYZ, {
+ url: 'https://data.mars3d.cn/terrain'
+ })
+ window.$viewer.setTerrain(terrain)
+ } else {
+ window.$viewer.setTerrain()
+ }
+}
+
+terrainChange(true)
+</script>
+
+<style lang="scss" scoped>
+.close {
+ cursor: pointer;
+}
+
+.layers-box-content {
+ .layers-box {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ width: 354px;
+ padding: 0 10px;
+ box-sizing: border-box;
+
+ li {
+ margin-top: 10px;
+ cursor: pointer;
+
+ &.on,
+ &:hover {
+ div:first-child {
+ border: solid 2px #337fe5;
+ }
+
+ div:last-child {
+ color: #337fe5;
+ }
+ }
+
+ div:first-child {
+ width: 76px;
+ height: 76px;
+ background: red;
+ border: 2px solid white;
+ box-sizing: border-box;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ div:last-child {
+ width: 76px;
+ height: 20px;
+ line-height: 20px;
+ color: #fff;
+ font-size: 12px;
+ text-align: center;
+ }
+ }
+ }
+}
+
+.show-terrain {
+ ::v-deep(.el-checkbox) {
+ .el-checkbox__label {
+ color: #fff;
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3