工具栏，菜单，等更改

shuishen

2024-10-30 65f4b3f007fe452dc2dcc0045577f1cd10dd4e06

 src/views/layout/components/scomponents/baseMap.vue

@@ -2,20 +2,23 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-28 11:44:45
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 00:05:47
 * @LastEditTime: 2024-10-29 20:50:40
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\baseMap.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
  <div class="map-layers-change-box">
    <div class="title">
  <public-box>
    <template #name>
      <div class="name"><i class="fa fa-map"></i>&nbsp;底图</div>
      <div class="close" @click="$emit('close')"><i class="fa fa-close"></i></div>
    </div>
    </template>

    <div class="content">
    <template #close>
      <div class="close" @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"
@@ -26,18 +29,23 @@
        </ul>
      </div>

      <div class="checkbox checkbox-primary checkbox-inline" style="margin-left:10px;color:#fff"><input
          id="chkHasTerrain" class="styled" type="checkbox"> <label for="chkHasTerrain">显示地形</label></div>
    </div>
  </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 Cesium = DC.getLib('Cesium')
const cesiumToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYTZlNGNlYS01NTU1LTQ1MGEtYmNlZS0yNTE2NDk5YWM2MjEiLCJpZCI6MTc5Njk2LCJpYXQiOjE3MDA1NDcwMjV9.qcl4AH2731cfFd0-I1ZLUINPXqvglLkDFD-UGR2zU5M'
Cesium.Ion.defaultAccessToken = cesiumToken

const TDT_Token = 'c6eea7dad4fa1e2d1e32ec0e7c9735db'
// 天地图Key
@@ -166,7 +174,7 @@

let mapLayers = [
  {
    src: '',
    src: getAssetsFile('stand.png'),
    mode: '0',
    name: '天地图矢量',
    layers: [
@@ -175,7 +183,7 @@
    ]
  },
  {
    src: '',
    src: getAssetsFile('satellite.png'),
    mode: '1',
    name: '天地图影像',
    layers: [
@@ -187,7 +195,7 @@
    ]
  },
  {
    src: '',
    src: getAssetsFile('stand.png'),
    mode: '2',
    name: '高德矢量',
    layers: [
@@ -198,7 +206,7 @@
    ]
  },
  {
    src: '',
    src: getAssetsFile('satellite.png'),
    mode: '3',
    name: '高德影像',
    layers: [
@@ -268,78 +276,79 @@
}

loadLAYER(0, 0)

const showTerrainFlag = ref(false)

const terrainChange = (e) => {
  if (e) {
    let terrain = DC.TerrainFactory.createTerrain(DC.TerrainType.XYZ, {
      url: 'https://data.marsgis.cn/terrain'
    })
    global.$viewer.setTerrain(terrain)
  } else {
    global.$viewer.setTerrain()
  }
} 
</script>

<style lang="scss" scoped>
.map-layers-change-box {
  position: absolute;
  right: 540px;
  z-index: 99;
  top: 152px;
  border: 1px solid #4081CB;
  border-radius: 4px;
  background: rgba(135, 158, 199, 0.3);
  box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);
  pointer-events: auto;
.close {
  cursor: pointer;
}

  .title {
.layers-box-content {
  .layers-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 354px;
    padding: 0 10px;
    border-color: rgba(32, 160, 255, 0.3);
    background: rgba(30, 36, 50, 0.6);
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 16px;
    box-sizing: border-box;

    .close {
    li {
      margin-top: 10px;
      cursor: pointer;
    }
  }

  .content {
    .layers-box-content {
      .layers-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 354px;
        padding: 0 10px;
        box-sizing: border-box;
      &.on,
      &:hover {
        div:first-child {
          border: solid 2px #337fe5;
        }

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

          div:last-child {
            width: 76px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
          }
        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;
    }
  }
}