zhyq/bigScreen.git

<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-28 11:44:45
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-12-03 12:01:12
 * @FilePath: \bigScreen\src\pages\map\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>&nbsp;底图</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)
 
onUnmounted(() => {
  terrainChange(false)
})
</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>