布局及路由相关文件

shuishen

2024-12-02 1adb6bd1d242cd061cdaf324dc5e7d1cf5a03290

布局及路由相关文件

 src/pages/map/components/mainMenu.vue

New file
@@ -0,0 +1,120 @@
<template>
  <div class="page-mode">
    <div @mouseenter="item.childrenFlag = true" :class="{ active: currentUrl.indexOf(item.path) != -1 }"
      @mouseleave="item.childrenFlag = false" @click="goToPath(item)" v-for="(item, index) in menuList" :key="index">
      {{ item.menuName }}
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { getTime } from '@/utils/getTime.js'
import { useRouterStore } from 'store/router'
const store = useRouterStore()
let router = useRouter()
let currentUrl = ref('statistics')

const menuList = ref(
  [
    {
      menuName: '园区概况',
      path: '/layout/map/survey'
    },
    {
      menuName: '风险源',
      path: '/layout/map/rs'
    },
    {
      menuName: '应急空间',
      path: '/layout/map/space'
    },
    {
      menuName: '应急物资',
      path: '/layout/single/supplies'
    },
    {
      menuName: '三级防控',
      path: '/layout/map/pac'
    },
    {
      menuName: '救援队伍',
      path: '/layout/single/rt'
    },
    {
      menuName: '突发事件模拟',
      path: '/layout/map/pd'
    },
    {
      menuName: '作战图',
      path: '/layout/single/ochart'
    },
  ]
)

const goToPath = (params) => {
  if (params.children && params.children.length > 0) return

  if (params.path) {
    if (router.currentRoute.value.path == params.path) return
    router.push({
      path: params.path
    })
  } else {
    params.childrenFlag = !params.childrenFlag
  }
}

watch(
  () => router.currentRoute.value,
  (newValue, oldValue) => {

    currentUrl.value = newValue.path

  },
  { immediate: true }
)

const userName = ref('管理员')
</script>

<style lang="scss" scoped>
.page-mode {
  position: absolute;
  top: auto;
  bottom: 55px;
  left: 50%;
  z-index: 99;
  transform: translateX(-50%);
  display: flex;
  pointer-events: auto;

  &>div {
    background-image: url(/images/mode-tab.png);
    background-size: cover;
    width: 136px;
    height: 50px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    color: #BFD3E5;
    line-height: 32px;
    padding-top: 12px;
    margin-right: -20px;
    font-style: italic;
    cursor: pointer;
    box-sizing: border-box;

    &:last-child {
      margin-right: 0px;
    }

    &.active {
      color: #F6FCFF;
      background-image: url(/images/mode-tab-ac.png);
    }
  }
}
</style>

 src/pages/map/components/mainSearch.vue

New file
@@ -0,0 +1,208 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-26 16:09:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-28 19:25:51
 * @FilePath: \bigScreen\src\pages\map\components\mainSearch.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
  <div class="page-search">
    <el-input placeholder="请输入内容" :suffix-icon="Search" @input="onSearch()" v-model="searchVal"
      @focus="onFocus"></el-input>
    <div class="page-search-value-box" v-show="isShowSearchSKValBox">
      <ul>
        <li v-if="searchSKValList.length > 0" v-for="(item, index) in searchSKValList" :key="index"
          @click="sKValItemClick(item)">{{ item.name }}
        </li>
        <!-- <li v-else>暂无数据</li> -->
        <span v-else>{{ showText }}</span>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'

import { fuzzyQuery } from '../../../api/firmInfo/firmInfo'

// 搜索栏相关
let isShowSearchSKValBox = false
let searchVal = ref('')
let searchSKValList = ref([])

let showText = ref('暂无数据')

const onSearch = () => {
  if (searchVal.value == '') {
    isShowSearchSKValBox = false
    // 清空
    clearPoint()
  } else {
    showText.value = '搜索中...'
    searchSKValList.value = []
    isShowSearchSKValBox = true
    getFuzzyQuery()
  }
}

function getFuzzyQuery () {
  fuzzyQuery({
    name: searchVal.value
  }).then(res => {
    if (res.data.data.length > 0) {
      searchSKValList.value = res.data.data
    } else {
      showText.value = '暂无数据'
    }
  })
}

const onFocus = () => {
  onSearch()
}

const sKValItemClick = (item) => {
  isShowSearchSKValBox = false
  if (item.lat && item.lng) {
    handleCheckChange(item)
  } else {
    console.log('没有经纬度')
  }
}
let addTileLayers = {}
const handleCheckChange = (item) => {
  // 先清空，在添加
  clearPoint()
  if (!addTileLayers[item.name]) {
    addTileLayers[item.name] = new DC.HtmlLayer(item.name)
    window.$viewer.addLayer(addTileLayers[item.name])
    let iconEl = ''
    if ('showPanel' in item && item.showPanel == false) {
      if (item.backgroundIcon) {
        iconEl = `
                        <div class="map-name">${i[item.showParams] || item.name}</div>
                        <div class="map-icon">
                          <img src="${item.backgroundIcon}">
                        </div>
                        `
      }
    } else {
      iconEl = `<div class="marsBlueGradientPnl">
                               <div>${item.name}</div>  </div>`
    }
    let divIcon = new DC.DivIcon(
      new DC.Position(item.lng, item.lat, 0),
      `<div class="public-map-popup">
                  ${iconEl}
                </div>`
    )

    divIcon.attrParams = item

    let incident = () => { }

    if (item.incident) incident = item.incident

    divIcon.on(DC.MouseEventType.CLICK, incident)

    addTileLayers[item.name].addOverlay(divIcon)
    window.$viewer.flyToPosition(new DC.Position(item.lng, item.lat, 2000, 0, -90, 0))

  } else {
    window.$viewer.removeLayer(addTileLayers[item.name])
    addTileLayers[item.name] = null
    delete addTileLayers[item.name]
  }
}


function clearPoint () {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] = null
    delete addTileLayers[i]
  })
}

onUnmounted(() => {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] = null
    delete addTileLayers[i]
  })

  addTileLayers = null
})
</script>

<style lang="scss" scoped>
.page-search {
  position: absolute;
  left: 488px;
  z-index: 99;
  top: 110px;
  pointer-events: auto;

  ::v-deep(.el-input) {
    height: 38px;
    width: 280px;

    .el-input__wrapper {
      font-size: 16px;
      font-weight: 400;
      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);

      .el-input__inner {
        color: #BFD3E5;
      }
    }
  }

  .page-search-value-box {
    position: absolute;
    width: 100%;
    height: 200px;
    left: 0;
    top: 40px;
    background: rgba(135, 158, 199, 0.3);
    border-radius: 2px;
    overflow-y: scroll;

    ul>li {
      color: #ffffff;
      cursor: pointer;
      height: 20px;
      margin: 3px;
      line-height: 20px;
      padding-left: 10px;
      overflow: hidden;
    }

    ul>li:hover {
      background-color: #949597;
    }
  }

  .page-search-value-box>ul>span {
    color: #fff;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }



  .page-search-value-box::-webkit-scrollbar {
    display: none
  }
}
</style>

 src/pages/map/components/mainTool.vue

New file
@@ -0,0 +1,115 @@
<template>
  <div class="toolBarRight animation-slide-top no-print-view">
    <el-button v-for="item, index in btnGroup" :key="index" @click="btnClick(item)"
      class="btn btn-link toolBarRight-btn">
      <i :class="item.icon"></i>{{ item.name }}
    </el-button>
  </div>

  <base-map v-show="currentComponent == 'map'" @close="closeBox"></base-map>
  <layers-control :show="currentComponent == 'layers'" @close="closeBox"></layers-control>
  <tool-list :moreToolShow="moreToolShow" @close="closeBox"></tool-list>
</template>

<script setup>
import baseMap from './scomponents/baseMap.vue'
import layersControl from './scomponents/layersControl.vue'
import toolList from './scomponents/toolList.vue'

const currentComponent = ref('')
let moreToolShow = ref(false)

const btnGroup = [
  {
    name: '底图',
    icon: 'fa fa-map',
    key: 'map',
  },
  {
    name: '图层',
    icon: 'fa fa-tasks',
    key: 'layers',
  },
  {
    name: '工具',
    icon: 'fa fa-cubes',
    key: 'tool',
  },
]

const btnClick = (item) => {
  if (item.key == 'tool') {
    moreToolShow.value = !moreToolShow.value
    return
  }

  if (currentComponent.value == item.key) {
    closeBox(item.key)
    return
  }

  currentComponent.value = item.key
}

const closeBox = (type) => {
  if (type == 'tool') {
    moreToolShow.value = false
  } else {
    currentComponent.value = ''
  }
}
</script>

<style lang="scss" scoped>
.toolBarRight {
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  right: 540px;
  z-index: 99;
  top: 110px;

  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;

  ::v-deep(.el-button) {
    margin-left: 0;
    border: none;
    border-radius: 0;
    background: transparent;

    &.btn {
      padding: 4px 12px;
      font-size: 14px;
      line-height: 1.6;
      -webkit-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
      -o-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
      transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
    }

    &.btn-link {
      font-weight: 400;
      color: #007bff;
      text-decoration: none;
    }

    &.toolBarRight-btn {
      list-style-type: none;
      cursor: pointer;
      border-right: solid 1px #2b2c2f;
      color: #edffff;
    }

    &.toolBarRight-btn:last-child {
      border-right: none;
    }

    i {
      margin-right: 4px;
    }
  }
}
</style>

 src/pages/map/components/scomponents/baseMap.vue

New file
@@ -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>&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)
</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>

 src/pages/map/components/scomponents/cesium/AmapMercatorTilingScheme/CoordTransform.js

New file
@@ -0,0 +1,178 @@
// 定义一些常量
const BD_FACTOR = (3.14159265358979324 * 3000.0) / 180.0;
const PI = 3.1415926535897932384626;
const RADIUS = 6378245.0;
const EE = 0.00669342162296594323;

class CoordTransform {
    /**
     * BD-09(百度坐标系) To GCJ-02(火星坐标系)
     * @param lng
     * @param lat
     * @returns {number[]}
     */
    static BD09ToGCJ02(lng, lat) {
        let x = +lng - 0.0065;
        let y = +lat - 0.006;
        let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * BD_FACTOR);
        let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * BD_FACTOR);
        let gg_lng = z * Math.cos(theta);
        let gg_lat = z * Math.sin(theta);
        return [gg_lng, gg_lat];
    }

    /**
     * GCJ-02(火星坐标系) To BD-09(百度坐标系)
     * @param lng
     * @param lat
     * @returns {number[]}
     * @constructor
     */
    static GCJ02ToBD09(lng, lat) {
        lat = +lat;
        lng = +lng;
        let z =
            Math.sqrt(lng * lng + lat * lat) +
            0.00002 * Math.sin(lat * BD_FACTOR);
        let theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * BD_FACTOR);
        let bd_lng = z * Math.cos(theta) + 0.0065;
        let bd_lat = z * Math.sin(theta) + 0.006;
        return [bd_lng, bd_lat];
    }

    /**
     * WGS-84(世界大地坐标系) To GCJ-02(火星坐标系)
     * @param lng
     * @param lat
     * @returns {number[]}
     */
    static WGS84ToGCJ02(lng, lat) {
        lat = +lat;
        lng = +lng;
        if (this.out_of_china(lng, lat)) {
            return [lng, lat];
        } else {
            let d = this.delta(lng, lat);
            return [lng + d[0], lat + d[1]];
        }
    }

    /**
     * GCJ-02(火星坐标系) To WGS-84(世界大地坐标系)
     * @param lng
     * @param lat
     * @returns {number[]}
     * @constructor
     */
    static GCJ02ToWGS84(lng, lat) {
        lat = +lat;
        lng = +lng;
        if (this.out_of_china(lng, lat)) {
            return [lng, lat];
        } else {
            let d = this.delta(lng, lat);
            let mgLng = lng + d[0];
            let mgLat = lat + d[1];
            return [lng * 2 - mgLng, lat * 2 - mgLat];
        }
    }

    /**
     *
     * @param lng
     * @param lat
     * @returns {number[]}
     */
    static delta(lng, lat) {
        let dLng = this.transformLng(lng - 105, lat - 35);
        let dLat = this.transformLat(lng - 105, lat - 35);
        const radLat = (lat / 180) * PI;
        let magic = Math.sin(radLat);
        magic = 1 - EE * magic * magic;
        const sqrtMagic = Math.sqrt(magic);
        dLng = (dLng * 180) / ((RADIUS / sqrtMagic) * Math.cos(radLat) * PI);
        dLat =
            (dLat * 180) / (((RADIUS * (1 - EE)) / (magic * sqrtMagic)) * PI);
        return [dLng, dLat];
    }

    /**
     *
     * @param lng
     * @param lat
     * @returns {number}
     */
    static transformLng(lng, lat) {
        lat = +lat;
        lng = +lng;
        let ret =
            300.0 +
            lng +
            2.0 * lat +
            0.1 * lng * lng +
            0.1 * lng * lat +
            0.1 * Math.sqrt(Math.abs(lng));
        ret +=
            ((20.0 * Math.sin(6.0 * lng * PI) +
                20.0 * Math.sin(2.0 * lng * PI)) *
                2.0) /
            3.0;
        ret +=
            ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) *
                2.0) /
            3.0;
        ret +=
            ((150.0 * Math.sin((lng / 12.0) * PI) +
                300.0 * Math.sin((lng / 30.0) * PI)) *
                2.0) /
            3.0;
        return ret;
    }

    /**
     *
     * @param lng
     * @param lat
     * @returns {number}
     */
    static transformLat(lng, lat) {
        lat = +lat;
        lng = +lng;
        let ret =
            -100.0 +
            2.0 * lng +
            3.0 * lat +
            0.2 * lat * lat +
            0.1 * lng * lat +
            0.2 * Math.sqrt(Math.abs(lng));
        ret +=
            ((20.0 * Math.sin(6.0 * lng * PI) +
                20.0 * Math.sin(2.0 * lng * PI)) *
                2.0) /
            3.0;
        ret +=
            ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) *
                2.0) /
            3.0;
        ret +=
            ((160.0 * Math.sin((lat / 12.0) * PI) +
                320 * Math.sin((lat * PI) / 30.0)) *
                2.0) /
            3.0;
        return ret;
    }

    /**
     * 判断是否在国内。不在国内不做偏移
     * @param lng
     * @param lat
     * @returns {boolean}
     */
    static out_of_china(lng, lat) {
        lat = +lat;
        lng = +lng;
        return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
    }
}

export default CoordTransform;

 src/pages/map/components/scomponents/cesium/AmapMercatorTilingScheme/index.js

New file
@@ -0,0 +1,53 @@
/*
 * @Author: GuLiMmo 2820890765@qq.com
 * @Date: 2024-05-11 09:18:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-27 11:19:55
 * @FilePath: \bigScreen\src\pages\layout\components\scomponents\cesium\AmapMercatorTilingScheme\index.js
 * @Description: 高德地图纠偏
 * Copyright (c) 2024 by GuLiMmo, All Rights Reserved.
 */
const {
  WebMercatorProjection,
  WebMercatorTilingScheme,
  Math,
  Cartographic,
  Cartesian2,
} = DC.__namespace.Cesium
// window.DC.getLib('Cesium')
import CoordTransform from './CoordTransform'
class AmapMercatorTilingScheme extends WebMercatorTilingScheme {
  constructor() {
    super()

    let projection = new WebMercatorProjection()

    this._projection.project = function (cartographic, result) {
      result = CoordTransform.WGS84ToGCJ02(
        Math.toDegrees(cartographic.longitude),
        Math.toDegrees(cartographic.latitude),
      )
      result = projection.project(
        new Cartographic(
          Math.toRadians(result[0]),
          Math.toRadians(result[1]),
        ),
      )
      return new Cartesian2(result.x, result.y)
    }

    this._projection.unproject = function (cartesian, result) {
      let cartographic = projection.unproject(cartesian)
      result = CoordTransform.GCJ02ToWGS84(
        Math.toDegrees(cartographic.longitude),
        Math.toDegrees(cartographic.latitude),
      )
      return new Cartographic(
        Math.toRadians(result[0]),
        Math.toRadians(result[1]),
      )
    }
  }
}

export default AmapMercatorTilingScheme

 src/pages/map/components/scomponents/layersControl.vue

New file
@@ -0,0 +1,968 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-31 10:47:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-12-01 21:45:13
 * @FilePath: \bigScreen\src\pages\map\components\scomponents\layersControl.vue
 * @Description:
 *
 * Copyright (c) 2024 by shuishen, All Rights Reserved.
-->
<template>
  <public-box v-show="showLayerControl">
    <template #name>
      <div class="name"><i class="fa fa-tasks"></i>&nbsp;图层</div>
    </template>

    <template #close>
      <div class="close cursor-p" @click="emit('close', 'layers')"><i class="fa fa-close"></i></div>
    </template>

    <template #content>
      <div class="tree-content">
        <el-tree ref="treeRef" :data="data" draggable="" show-checkbox node-key="id" default-expand-all
          :default-checked-keys="indexPoint" :props="defaultProps" :indent="treeProps['indent']"
          @check="handleCheckChange">
          <template v-slot:default="{ node }">
            <element-tree-line :node="node" :showLabelLine="treeProps['showLabelLine']" :indent="treeProps['indent']">
              <!-- 自定义label的slot -->
              <template v-slot:node-label>
                <span style="font-size: 12px">
                  {{ node.label }}
                  <i class="el-icon-eleme"></i></span>
              </template>
              <!-- 在右边追加内容的slot -->
              <!-- <template v-slot:after-node-label>
                <span style="padding-right: 10px">
                  <el-button type="primary" size="mini" @click.stop="openDrawer(node)">新增子节点</el-button>
                  <el-button type="primary" size="mini" @click.stop="openDrawer(node)">修改</el-button>
                  <el-button type="danger" size="mini" @click.stop="openDialog">删除</el-button></span>
              </template> -->
            </element-tree-line>
          </template>
        </el-tree>
      </div>
    </template>
  </public-box>

  <panorama v-show="panoramaShow" :title="panoramaTitle" :url="panoramaUrl" @closePanoramaPopup="closePanoramaPopup">
  </panorama>
</template>

<script setup>
let addPupoLayers = {}
let addTileLayers = {}
let tileLayers = new DC.TilesetLayer('tileLayers')
window.$viewer.addLayer(tileLayers)

const {
  show: showLayerControl
} = defineProps({
  show: {
    default: false
  }
})

const emit = defineEmits(['close'])
import panorama from './popup/panorama.vue'
import { getPage } from '@/api/indParkInfo'
import { getPage as getfirmPage } from '@/api/firmInfo/firmInfo'
import { getList, getGouQu } from "@/api/space/space"
import { getList as getRiskList } from "@/api/riskSource/riskSource"
import { getPanoramaList } from "@/api/panorama/"
import yqfw from "@/assets/json/yqfw"
import gsgw from "@/assets/json/gsgw"
import rqgw from "@/assets/json/rqgw"
import wsgw from "@/assets/json/wsgw"
import ysgw from "@/assets/json/ysgw"
import { onUnmounted } from 'vue'
import EventBus from 'utils/bus'
import { usePointStore } from 'store/usepoint'
const pointStore = usePointStore()

const { VITE_APP_BASE } = import.meta.env
// , '7', 
let indexPoint = ref(['1', '5'])

const treeRef = ref(null)

const treeProps = {
  indent: 16,
  showLabelLine: true,
}

// 全景相关
const panoramaShow = ref(false)
const panoramaTitle = ref('')
const panoramaUrl = ref('')
const closePanoramaPopup = () => {
  panoramaShow.value = false
}

const data = [
  {
    id: '1',
    label: '园区倾斜摄影',
    type: 'layer',
    subType: '3Dtile',
    urlData: [

    ],
    layerName: 'hgyq'
  },

  {
    id: '2',
    label: '企业分布',
    type: 'layer',
    subType: 'labelPoint',
    method: getPage,
    params: {
      size: 1000
    },
    backgroundIcon: VITE_APP_BASE + 'img/mapicon/qy.png',
    className: 'qyfb-box',
    showPanel: false,
    layerName: 'qyfb'
  },

  {
    id: '3',
    label: '应急空间',
    children: [
      {
        id: '3-1',
        label: '应急池',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 1,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjc.png',
        className: 'yjc-box',
        showPanel: false,
        layerName: 'yjc',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
            <div>${attrParams.fullName}</div>
            <img src="${attrParams.imageUrl}" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      },
      {
        id: '3-2',
        label: '阀门',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 2,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/ysf.png',
        className: 'ysf-box',
        showPanel: false,
        layerName: 'fm',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      },

      {
        id: '3-3',
        label: '公共管网',
        children: [
          // 给水管网、污水管网、燃气管网、雨水管网
          {
            id: '3-3-1',
            label: '给水管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'gsgw',
            source: gsgw,
            color: DC.Color.BLUE.withAlpha(0.9),
            height: 65,
          },
          {
            id: '3-3-2',
            label: '污水管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'wsgw',
            source: wsgw,
            color: DC.Color.DARKBLUE.withAlpha(0.9),
            height: 68,
          },
          {
            id: '3-3-3',
            label: '燃气管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'rqgw',
            source: rqgw,
            color: DC.Color.RED.withAlpha(0.9),
            height: 71,
          },
          {
            id: '3-3-4',
            label: '雨水管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'ysgw',
            source: ysgw,
            color: DC.Color.CYAN.withAlpha(0.9),
            height: 75,
          },
        ]
      },

      {
        id: '3-4',
        label: '污水提升泵站',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 4,
          size: 1000
        },
        layerName: 'wstsbz',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      },

      {
        id: '3-5',
        label: '水库',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 5,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/sk.png',
        className: 'sk-box',
        showPanel: false,
        layerName: 'sk',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                   <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      },

      {
        id: '3-6',
        label: '应急泵',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 6,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjb.png',
        className: 'yjb-box',
        showPanel: false,
        layerName: 'yjb',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      },

      {
        id: '3-8',
        label: '沟渠',
        type: 'layer',
        subType: 'geojsonPolygon',
        method: getGouQu,
        params: {
          type: 8,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/gouqu.png',
        className: 'xfs-box',
        showPanel: false,
        layerName: 'gouqu'
      },
      {
        id: '3-9',
        label: '废水处理站',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 9,
          size: 1000
          // name: '吉水县绿源污水处理厂',
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsclc.png',
        className: 'xfs-box',
        showPanel: false,
        layerName: 'fsclz'
      },
      {
        id: '3-10',
        label: '排水口',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 10,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/psk.png',
        className: 'xfs-box',
        showPanel: false,
        layerName: 'psk'
      },
      {
        id: '3-11',
        label: '污水池',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 11,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsc.png',
        className: 'xfs-box',
        showPanel: false,
        layerName: 'wsc'
      }
    ]
  },

  {
    id: '4',
    label: '风险源',
    children: [
      {
        id: '4-1',
        label: '一般',
        type: 'layer',
        subType: 'labelPoint',
        method: getRiskList,
        params: {
          riskLevel: 1,
          size: 1000
        },
        showParams: 'category',
        className: 'fxy-ordinary',
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png',
        showPanel: false,
        layerName: 'fxyOrdinary',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
            <li>${attrParams.firmName || ''}</li>
            <li>${attrParams.riskLevelName || ''}</li>
            </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-three">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      },
      {
        id: '4-2',
        label: '较大',
        type: 'layer',
        subType: 'labelPoint',
        method: getRiskList,
        params: {
          riskLevel: 2,
          size: 1000
        },
        showParams: 'category',
        className: 'fxy-larger',
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png',
        showPanel: false,
        layerName: 'fxyLarger',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
            <li>${attrParams.firmName || ''}</li>
            <li>${attrParams.riskLevelName || ''}</li>
            </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-three">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      }
    ]
  },

  {
    id: '5',
    label: '园区范围',
    type: 'layer',
    subType: 'geojsonWall',
    layerName: 'yqfw',
    source: yqfw
  },

  {
    id: '7',
    label: '空中全景分布',
    type: 'layer',
    subType: 'labelPoint',
    method: getPanoramaList,
    params: {
      size: 1000,
      remark: '1'
    },
    backgroundIcon: VITE_APP_BASE + 'img/mapicon/qj.png',
    showPanel: false,
    layerName: 'kzqjdwfb',
    incident: (e) => {
      const { attrParams } = e.overlay
      panoramaTitle.value = attrParams.name
      if (
        attrParams.url.indexOf("http://vr.jxpskj.com:180") != -1
      ) {
        attrParams.url = attrParams.url.replace(
          "http://vr.jxpskj.com:180",
          "/panorama"
        )
      }
      panoramaUrl.value = attrParams.url
      panoramaShow.value = true
    }
  },
  {
    id: '8',
    label: '地面全景分布',
    type: 'layer',
    subType: 'labelPoint',
    method: getPanoramaList,
    params: {
      size: 1000,
      remark: '2'
    },
    backgroundIcon: VITE_APP_BASE + 'img/mapicon/qj.png',
    showPanel: false,
    layerName: 'dtqjdwfb',
    incident: (e) => {
      const { attrParams } = e.overlay
      panoramaTitle.value = attrParams.name
      if (
        attrParams.url.indexOf("http://vr.jxpskj.com:180") != -1
      ) {
        attrParams.url = attrParams.url.replace(
          "http://vr.jxpskj.com:180",
          "/panorama"
        )
      }
      panoramaUrl.value = attrParams.url
      panoramaShow.value = true
    }
  },
]

// let modellayer = new DC.VectorLayer("modellayer").addTo(window.$viewer)
// let model = new DC.Model("121.46748793889597,31.22345700031846,200", VITE_APP_BASE + 'gltf/dajiang.gltf')
// model.setStyle({
//   scale: 10000
// })
// modellayer.addOverlay(model)
// window.$viewer.flyToPosition("121.46748793889597,31.22345700031846,300,0,-90")

const defaultProps = {
  children: 'children',
  label: 'label',
}

const checkType = (value) => {
  if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
    return 'obj'
  } else if (Array.isArray(value)) {
    return 'arr'
  }
}
// 用于存储收集到的节点的数组
const collectedNodes = reactive([])

// 递归函数，收集所有 flag 为 true 的子节点
const collectNodesWithFlag = (nodes) => {
  if (checkType(nodes) == 'obj') {
    if (nodes.type == 'layer') {
      collectedNodes.value.push(nodes)
    }
    if (nodes.children && nodes.children.length > 0) {
      collectNodesWithFlag(nodes.children)
      return
    }
  }

  if (checkType(nodes) == 'arr') {
    nodes.forEach(item => {
      if (item) {
        if (item.type == 'layer') {
          collectedNodes.value.push(item)
        }

        if (item.children && item.children.length > 0) {
          collectNodesWithFlag(item.children)
        }
      }
    })
  }
}

const handleCheckChange = (data) => {
  let options = treeRef.value?.getCheckedNodes()
  collectedNodes.value = []
  collectNodesWithFlag(data)

  collectedNodes.value.forEach(item => {
    if (options?.some(i => i.id == item.id)) {

      //  const window.$Cesium  = DC
      if (item.subType == '3Dtile') {
        if (!addTileLayers[item.layerName]) {
          // addTileLayers[item.layerName] = []
          // let tile = window.$viewer.delegate.scene.primitives.add(new window.$Cesium.Cesium3DTileset({
          //   url: '/zhyq/mx/tile_01/tileset.json',
          // }))

          //   url: '/zhyq/mx/tile_01/tileset.json',
          // }), 121323)
          // item.urlData.forEach(i => {

          // })
          addTileLayers[item.layerName] = []
          item.urlData.forEach((m, ind) => {
            let tile = new DC.Tileset(m.url, {
              maximumMemoryUsage: 1024,
              maximumScreenSpaceError: 8,
              skipLevels: 5,
              skipLevelOfDetail: true,
              skipScreenSpaceErrorFactor: 128,
              progressiveResolutionHeightFraction: 0.5,
              baseScreenSpaceError: 1024
            })
            tile.setSplitDirection(1)
            // tile.setHeight(-420)
            // tile.setSplitDirection(-1)
            window.$viewer.sceneSplit.addTileset(tile)
            tileLayers.addOverlay(tile)
            window.$viewer.sceneSplit.enable = false
            addTileLayers[item.layerName][ind] = tile
          })
        } else {
          addTileLayers[item.layerName].forEach(m => m.show = true)
        }
      } else if (item.subType == 'labelPoint') {
        if (!addTileLayers[item.layerName]) {
          addTileLayers[item.layerName] = new DC.HtmlLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])

          item.method(item.params).then(res => {
            let data = res.data.data.records

            data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
              let iconEl = ''

              if ('showPanel' in item && item.showPanel == false) {
                if (item.backgroundIcon) {
                  iconEl = `
                  <div class="map-name">${i[item.showParams] || i.name}</div>
                  <div class="map-icon">
                    <img src="${item.backgroundIcon}">
                  </div>
                  `
                }
              } else {
                iconEl = `<div class="marsBlueGradientPnl">
                  <div>${i[item.showParams] || i.name}</div>
                </div>`
              }

              let divIcon = new DC.DivIcon(
                new DC.Position(i.lng, i.lat, 64),
                `<div class="public-map-popup ${item.className || ''}">
                    ${iconEl}
                  </div>`
              )

              divIcon.attrParams = i

              let incident = () => {
              }

              if (item.incident) incident = item.incident

              divIcon.on(DC.MouseEventType.CLICK, incident)

              addTileLayers[item.layerName].addOverlay(divIcon)
            })
          })
        } else {
          addTileLayers[item.layerName].show = true
        }
      } else if (item.subType == 'geojsonWall') {
        if (!addTileLayers[item.layerName]) {
          addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])

          item.source.features.forEach(i => {
            let wall = new DC.Wall(
              i.geometry.coordinates[0].map(d => [...d, 125].join(',')).join(';')
            )

            wall.setStyle({
              material: new DC.WallTrailMaterialProperty({
                color: window.$Cesium.Color.fromBytes(0, 123, 255, 180),
                speed: 8
              })
            })
            addTileLayers[item.layerName].addOverlay(wall)
          })
        } else {
          addTileLayers[item.layerName].show = true
        }
      } else if (item.subType == 'geojsonPipe') {
        if (!addTileLayers[item.layerName]) {
          addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])

          function computeCircle (radius) {
            var positions = []
            for (var i = 0; i < 360; i++) {
              var radians = DC.Math.toRadians(i)
              positions.push({
                x: radius * Math.cos(radians),
                y: radius * Math.sin(radians),
              })
            }
            return positions
          }

          item.source.features.forEach(i => {
            let polylineVolume = new DC.PolylineVolume(
              i.geometry.coordinates.map(d => [d[0], d[1], item.height].join(',')).join(';'),
              computeCircle(2)
            )

            polylineVolume.setStyle({
              material: item.color
            })
            addTileLayers[item.layerName].addOverlay(polylineVolume)
          })
        } else {
          addTileLayers[item.layerName].show = true
        }
      } else if (item.subType == 'geojsonPolygon') {
        if (!addTileLayers[item.layerName]) {
          addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])
          item.method(item.params).then(res => {
            let data = res.data.data.records
            data.forEach(i => {
              let stl = ''
              try {
                let geom = JSON.parse(i.geom)
                if (geom && geom.coordinates && geom.coordinates[0]) {
                  stl = geom.coordinates[0][0].map(d => d[0] + ',' + d[1]).join(';')
                } else {
                  console.error('Invalid geom structure')
                }
              } catch (error) {
                console.error('Failed to parse geom:', error)
              }
              let polygon = new DC.Polygon(stl)
              polygon.setStyle({
                width: 2,
                material: DC.Color.BLUE,
                clampToGround: true
              })
              addTileLayers[item.layerName].addOverlay(polygon)
            })
          })
        } else {
          addTileLayers[item.layerName].show = true
        }
      }
    } else {
      if (addTileLayers[item.layerName]) {
        if (item.subType == '3Dtile') {
          addTileLayers[item.layerName].forEach(m => m.show = false)
        } else {
          addTileLayers[item.layerName].clear()
          window.$viewer && window.$viewer.removeLayer(addTileLayers[item.layerName])
          addTileLayers[item.layerName] = null
          delete addTileLayers[item.layerName]
        }
      }
    }
  })
}

function findObjectById (data, id) {
  // 遍历数据数组
  for (let i = 0; i < data.length; i++) {
    const item = data[i]

    // 检查当前项的 id 是否匹配
    if (item.id === id) {
      return item // 找到匹配项，返回它
    }

    // 如果当前项有 children 数组，则递归查找
    if (item.children && item.children.length > 0) {
      const found = findObjectById(item.children, id)
      if (found) {
        return found // 在 children 中找到匹配项，返回它
      }
    }
  }

  // 如果没有找到匹配项，返回 null
  return null
}

const restHandleCheckChange = (key) => {
  let checkIds = treeRef.value?.getCheckedKeys()

  if (checkIds && checkIds.some(i => i == key)) {
    return
  }

  treeRef.value?.setCheckedKeys([...checkIds, key])
  handleCheckChange([findObjectById(data, key)])
}

const restHandleDelChange = (key) => {
  let checkIds = treeRef.value?.getCheckedKeys()

  if (checkIds && !checkIds.some(i => i == key)) {
    return
  }

  treeRef.value?.setCheckedKeys(checkIds.filter(i => i.indexOf(key)))
  handleCheckChange([findObjectById(data, key)])
}

// 飞到园区范围
const flyToyqfw = () => {
  window.$viewer.zoomToPosition(new DC.Position(
    115.1021,
    27.2360,
    5000,
    0,
    -45,
    0
  ), () => {
  })
}

EventBus.on('restHandleCheckChange', restHandleCheckChange)
EventBus.on('restHandleDelChange', restHandleDelChange)
EventBus.on('flyToyqfw', flyToyqfw)

onMounted(() => {
  setTimeout(() => {
    handleCheckChange(data.filter(i => indexPoint.value.includes(i.id)))
  }, 3000)
})

// const sharedData = computed(() => pointStore.sharedData);
// watch(sharedData, (newValue) => {
// });

// 销毁
function destroy () {
  let arr = Object.keys(addPupoLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i])
    addPupoLayers[i] = null
    delete addPupoLayers[i]
  })
  addPupoLayers = {}
}

onUnmounted(() => {
  if (tileLayers) {
    tileLayers.clear()
    window.$viewer && window.$viewer.removeLayer(tileLayers)
    tileLayers = null
  }

  let arr = Object.keys(addTileLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] = null
    delete addTileLayers[i]
  })
  addTileLayers = null
  // 弹窗销毁
  destroy()
  addPupoLayers = null

  EventBus.off('restHandleCheckChange', restHandleCheckChange)
  EventBus.off('restHandleDelChange', restHandleDelChange)
  EventBus.off('flyToyqfw', flyToyqfw)
})
</script>

<style lang="scss" scoped>
.tree-content {
  min-width: 200px;
  padding: 10px;

  ::v-deep(.el-tree) {
    color: #fff;
    background: transparent;

    /* 鼠标浮动过的背景颜色 */
    .el-tree-node__content:hover {
      background: #0074b7;
    }

    /* 鼠标点击时节点的背景颜色 */
    .el-tree-node:focus>.el-tree-node__content {
      background-color: #0074b7 !important;
      color: rgb(255, 255, 255);
    }

    /* 鼠标失去焦点时节点背景的颜色 */
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      background: rgb(0, 129, 204);
    }
  }
}
</style>

 src/pages/map/components/scomponents/popup/panorama.vue

New file
@@ -0,0 +1,70 @@
<template>
  <div class="panorama-container">
    <div class="title">
      <div>{{ title }}</div>
      <div class="close cursor-p" @click="$emit('closePanoramaPopup')">
        <i class="fa fa-close"></i>
      </div>
    </div>
    <div class="content">
      <iframe class="w100 h100" :src="url" frameborder="0"></iframe>
    </div>
  </div>
</template>

<script setup>
const {
  title,
  url
} = defineProps({
  title: {
    default: ''
  },
  url: {
    default: ''
  }
})

</script>

<style lang="scss" scoped>
.panorama-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  background: transparent;
  /* fallback for old browsers */
  // background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff);
  /* Chrome 10-25, Safari 5.1-6 */
  // background: linear-gradient(to right, #3a7bd5, #00d2ff);
  background-color: rgba($color: #000000, $alpha: 1.0);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  pointer-events: auto;
  box-shadow: inset 0 0 200px #0377eb;

  .title {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    height: 44px;
    line-height: 44px;
    color: #fff;

    .close {
      cursor: pointer;
    }
  }

  .content {
    padding: 0 10px 10px;
    width: 100%;
    height: 0;
    flex: 1;
  }
}
</style>

 src/pages/map/components/scomponents/tool/curtain.vue

New file
@@ -0,0 +1,108 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-29 15:48:36
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-27 19:17:04
 * @FilePath: \bigScreen\src\pages\layout\components\scomponents\tool\curtain.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
  <public-box style="z-index: 100;">
    <template #name>
      <div class="name"><i class="fa fa-map-pin"></i>&nbsp;卷帘对比 &nbsp;</div>
    </template>

    <template #close>
      <div class="close cursor-p" @click="$emit('closeChild')"><i class="fa fa-close"></i></div>
    </template>

    <template #content>
      <div class="cur-btn">
        <!-- <div class="m-4">
                    <p>左侧图层</p>
                    <el-select class="transparent-bg" v-model="value1" placeholder="天地图">
                        <el-option v-for="item in components" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="m-4">
                    <p>右侧图层</p>
                    <el-select popper-class="transparent-bg" v-model="value2" collapse-tags placeholder="天地图">
                        <el-option v-for="item in components" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div> -->
      </div>
    </template>
  </public-box>
</template>

<script setup>
const value1 = ref([])
const value2 = ref([])



onMounted(() => {
  window.$viewer.sceneSplit.enable = true
})

// 关闭
const close = () => {
  window.$viewer.sceneSplit.enable = false
}

const flyTo = () => {
  // window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3)
}

onUnmounted(() => {
  window.$viewer && (window.$viewer.sceneSplit.enable = false)
})

const components = [
  { label: '天地图', value: '1' },
  { label: '谷歌影像', value: '2' },
  { label: '谷歌矢量', value: '3' },
  { label: '高德影像', value: '4' },
]
</script>

<style lang="scss" scoped>
.cur-btn {
  margin: 10px 0;
  display: flex;

  // justify-content: center;
  // align-items: center;

  // &.el-select {
  //     width: 50px;
  // }
}

.m-4 {
  text-align: center;
  width: 200px;
}

.transparent-bg {
  background: transparent;

}

// 重新el——select样式
::v-deep .el-select__wrapper {
  background: transparent;

}

::v-deep .el-select-dropdown {
  // background: transparent;
  background-color: aqua;
}

::v-deep .el-select .el-select__placeholder {
  color: #fff;
}
</style>

 src/pages/map/components/scomponents/tool/exportScene.vue

New file
@@ -0,0 +1,10 @@
<template>
</template>

<script setup>
window.$viewer.exportScene()
const emit = defineEmits(['closeChild'])
emit('closeChild')
</script>

<style lang="scss" scoped></style>

 src/pages/map/components/scomponents/tool/location.vue

New file
@@ -0,0 +1,89 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-29 15:48:36
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 19:53:49
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\tool\location.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
  <public-box style="z-index: 100;">
    <template #name>
      <div class="name"><i class="fa fa-map-pin"></i>&nbsp;底图</div>
    </template>

    <template #close>
      <div class="close cursor-p" @click="$emit('closeChild')"><i class="fa fa-close"></i></div>
    </template>

    <template #content>
      <div class="cur-content">
        <div>
          <span>经度:</span>
          <el-input v-model="longitude" size="small" placeholder="请输入经度" />
        </div>
        <div>
          <span>纬度:</span>
          <el-input v-model="latitude" size="small" placeholder="请输入纬度" />
        </div>
        <div>
          <span>高度:</span>
          <el-input v-model="height" size="small" placeholder="请输入高度" />
        </div>
      </div>

      <div class="cur-btn">
        <el-button color="rgba(13,100,167,.8)" @click="flyTo" type="primary" size="small">坐标定位</el-button>
      </div>
    </template>
  </public-box>
</template>

<script setup>
const longitude = ref(0)
const latitude = ref(0)
const height = ref(0)

const flyTo = () => {
  window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3)
}
</script>

<style lang="scss" scoped>
.cur-content {
  &>div {
    margin-top: 10px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      width: 54px;
    }

    ::v-deep(.el-input) {
      border: none !important;

      .el-input__wrapper {
        background: rgba(63, 72, 84, .7) !important;
        border: none !important;
        box-shadow: none;

        input {
          color: #fff;
        }
      }
    }
  }
}

.cur-btn {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

 src/pages/map/components/scomponents/tool/measure.vue

New file
@@ -0,0 +1,220 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-29 15:48:36
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-29 19:53:49
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\tool\location.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
    <public-box style="z-index: 100;">
        <template #name>
            <div class="name"><i class="fa fa-map-pin"></i>&nbsp;测量工具</div>
        </template>

        <template #close>
            <div class="close cursor-p" @click="$emit('closeChild')"><i class="fa fa-close"></i></div>
        </template>

        <template #content>

            <div>
                <div class="container-box">
                    <div v-for="(item, index) in buttonList" :key="index" class="item" @click="item.click">
                        <img class="icon_img" src="../../../../../assets/images/add.png" alt="" srcset="">
                        <div class="text">{{ item.label }}</div>
                    </div>
                </div>

                <div class="button-clear">
                    <button @click="deactivate">清空测量数据</button>
                </div>
            </div>



        </template>
    </public-box>
</template>
  
<script setup>
const longitude = ref(0)
const latitude = ref(0)
const height = ref(0)
let measure = reactive({})
onMounted(() => {
    measure = new DC.Measure(window.$viewer)
})

onUnmounted(() => {
    deactivate()
})
// 空间距离
function calcDistance() {
    measure.distance()
}
// 贴地距离
function distanceSurface() {
    measure.distanceSurface()
}
// 水平面积
function calcArea(item) {
    measure.area()
}
// 贴地面积
function areaSurface() {
    measure.areaSurface()
}
// 角度
function calcAngle() {
    measure.angle()
}
// 模型角度
function calcModelAngle() {
    measure.angle({
        clampToModel: true
    })
}
//   高度
function calcHeight() {
    measure.height()
}
//   贴物高度
function calcModelHeight() {
    measure.height({
        clampToModel: true
    })
}
// 航向
function calcHeading() {
    measure.heading()
}
// 模型航向
function areaHeight() {
    measure.areaHeight()
}
// 三角测量

function calcTriangleHeight() {
    measure.triangleHeight()
}
// 模型三角测量
function calcModelTriangleHeight() {
    measure.triangleHeight({
        clampToModel: true
    })
}

// 清空
function deactivate() {
    measure.deactivate()
}

const buttonList = [
    {
        label: '空间距离',
        value: 'space',
        imges: '../../../../../assets/images/add.png',
        click: calcDistance
    },
    {
        label: '贴地距离',
        value: 'area',
        imges: '../../../../../assets/images/add.png',
        click: distanceSurface
    },
    // {
    //     label: '剖面',
    //     value: 'volume',
    //     imges: '../../../../../assets/images/add.png'
    // },
    {
        label: '水平面积',
        value: 'volume',
        imges: '../../../../../assets/images/add.png',
        click: calcArea
    },
    {
        label: '贴地面积', value: 'volume',
        imges: '../../../../../assets/images/add.png',
        click: areaSurface

    },
    {
        label: '角度',
        value: 'volume',
        imges: '../../../../../assets/images/add.png',
        click: calcAngle
    },
    {
        label: '高度差',
        value: 'volume',
        imges: '../../../../../assets/images/add.png',
        click: calcAngle
    },
    {
        label: '三角测量',
        value: 'volume',
        imges: '../../../../../assets/images/add.png',
        click: calcModelTriangleHeight
    },
    {
        label: '贴物高度',
        value: 'volume',
        imges: '../../../../../assets/images/add.png',
        click: calcModelHeight
    },
]

const flyTo = () => {
    // window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3)
}
</script>
  
<style lang="scss" >
.container-box {
    width: 230px;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
}

.icon_img {
    width: 40px;
    height: 40px;
}

.item {
    width: 60px;
    margin: 8px;
    text-align: center;
    padding: 3px;
}

.button-clear {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.button-clear button {
    padding: 6px;
    border: none;
}

.button-clear button:hover {
    background-color: blue;
    color: #fff;
}

.container-box .item:hover {
    box-shadow: inset 0px 0px 30px 20px rgba(31, 139, 247, 0.949);
    border-radius: 20%;
}

.text {
    // color: pink;
}
</style>

 src/pages/map/components/scomponents/toolList.vue

New file
@@ -0,0 +1,134 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-29 14:20:49
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-27 15:34:16
 * @FilePath: \bigScreen\src\pages\layout\components\scomponents\toolList.vue
 * @Description:
 *
 * Copyright (c) 2024 by shuishen, All Rights Reserved.
-->
<template>
  <ul v-show="moreToolShow" class="tool-list-box">
    <li @click="showComponent(item.component)" v-for="(item, index) in components" :key="index">
      <i :class="item.icon"></i> {{ item.title }}
    </li>
  </ul>

  <component :is="currentComponent" v-if="currentComponent" @closeChild="closeComponent" />
</template>

<script setup>
const { moreToolShow } = defineProps({
  moreToolShow: {
    type: Boolean, //参数类型
    default: false, //默认值
    required: true, //是否必须传递
  }
})
import location from './tool/location.vue'
import curtain from './tool/curtain.vue'
import measure from './tool/measure.vue'
import exportScene from './tool/exportScene.vue'
import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs'
const emit = defineEmits(['close'])

let currentComponent = shallowRef(null)
const components = [
  {
    icon: 'fa fa-calculator',
    title: '图上量算',
    component: measure,
  },
  // {
  //   icon: 'fa fa-bar-chart',
  //   title: '空间分析',
  // },
  {
    name: 'location',
    icon: 'fa fa-map-pin',
    title: '坐标定位',
    component: location
  },
  // {
  //   icon: 'fa fa-paper-plane',
  //   title: '地区导航',
  // },
  // {
  //   icon: 'fa fa-edit',
  //   title: '我的标记',
  // },
  // {
  //   icon: 'fa fa-tags',
  //   title: '视角书签',
  // },
  {
    name: 'exportScene',
    icon: 'fa fa-download',
    title: '场景导出',
    component: exportScene
  },
  // {
  //   icon: 'fa fa-object-group',
  //   title: '图上标绘',
  // },
  // {
  //   icon: 'fa fa-helicopter',
  //   title: '飞行漫游',
  // },
  // {
  //   icon: 'fa fa-level-up',
  //   title: '路线导航',
  // },
  // {
  //   icon: 'fa fa-columns',
  //   title: '卷帘对比',
  //   component: curtain
  // },
  // {
  //   icon: 'fa fa-window-restore',
  //   title: '分屏对比',
  // },
]

const showComponent = (component) => {
  currentComponent.value = component
  emit('close', 'tool')
}

const closeComponent = () => {
  currentComponent.value = null
}
</script>

<style lang="scss" scoped>
.tool-list-box {
  position: absolute;
  right: 540px;
  z-index: 101;
  top: 152px;
  background: rgba(63, 72, 84, .7);
  pointer-events: auto;

  li {
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    cursor: pointer;

    i {
      margin-right: 5px;
    }
  }

  li:hover {
    background: #4db3ff;
  }

  li:first-child {
    margin-top: 0;
  }
}
</style>

 src/pages/map/index.vue

New file
@@ -0,0 +1,260 @@
<template>
  <div class="wrapper">
    <map-container ref="MapContainer">
      <template #content>
        <div v-if="showContent" class="main-content" id="MainContent">
          <main-search></main-search>
          <main-tool></main-tool>

          <div class="w100 h100 relative">
            <div class="main-header">
              <div class="title">吉水化工园区“一园一策一图”VR平台</div>

              <div class="login-out" @click="signOut">
                <img :src="loginOutBg" class="img" />
                <span>退出</span>
              </div>
            </div>

            <div class="main-container">
              <!-- 地图区域 -->
              <router-view></router-view>
            </div>

            <main-menu></main-menu>
          </div>
        </div>
      </template>
    </map-container>
  </div>
</template>

<script setup>
import { getAssetsFile } from 'utils/utils'
const loginOutBg = getAssetsFile('login.png', '/images')
import mainMenu from './components/mainMenu.vue'

import { useRouter, useRoute } from 'vue-router'
let router = useRouter()
import mainSearch from './components/mainSearch.vue'
import mainTool from './components/mainTool.vue'

import { useLogin } from 'store/login'
const loginStore = useLogin()
import { useMap } from 'store/map'
import { useRouterStore } from 'store/router'

const store = useMap()
const showContent = ref(false)

const signOut = () => {
  loginStore.LogOut().then(res => {
    router.push({
      path: '/login'
    })
  })
}

// onMounted(() => {
//   store.setLoadSub(false)
// }),

// 监听createB的变化
watch(
  [
    () => store.loadMap,
  ],
  ([newLoadMap]) => {
    showContent.value = newLoadMap
  },
  { immediate: true } // 设置immediate为true以便在组件挂载时立即检查createB的值
)
</script>

<style lang="scss" scoped>
$bg-blue: rgba(24, 33, 92, 0.9);

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  #MainContent,
  #SingleMainContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
  }

  .main-content {
    height: 1080px;
    background: url(/images/header.png) no-repeat center / 100% 100%,
      url(/images/pro-bg.png) no-repeat center / 100% 100%;

    pointer-events: none;

    &.single-page {
      background: url(/images/header.png) no-repeat center / 100% 100%,
        url(/images/pro-bg.png) no-repeat center / 100% 100%,
        rgba(0, 0, 0, 1);
    }

    .main-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      pointer-events: auto;

      .title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 640px;
        height: 40px;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #eff8fc;
        line-height: 40px;
        text-align: center;
        letter-spacing: 8px;
        font-weight: bolder;
        background: linear-gradient(to bottom,
            #e2eaf0 0%,
            #aed1f1 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        // opacity: 0.89;
        // text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);

        // background: linear-gradient(0deg, rgba(119, 186, 255, 0.45) 0%, rgba(233, 248, 255, 0.45) 73.3154296875%, rgba(255, 255, 255, 0.45) 100%);
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
      }


      .login-out {
        position: absolute;
        top: 10px;
        right: 40px;
        height: 36px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        cursor: pointer;

        .img {
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }

        span {
          font-size: 13px;
        }
      }

      .login-out:hover {
        background-color: #3c5e8f;
        border-radius: 20px;

      }
    }

    .main-container {
      position: absolute;
      top: 40px;
      left: 40px;
      right: 40px;
      bottom: 40px;
    }
  }
}

.main-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  pointer-events: auto;

  .title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 640px;
    height: 40px;
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #eff8fc;
    line-height: 40px;
    text-align: center;
    letter-spacing: 8px;
    font-weight: bolder;
    background: linear-gradient(to bottom,
        #e2eaf0 0%,
        #aed1f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    // opacity: 0.89;
    // text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);

    // background: linear-gradient(0deg, rgba(119, 186, 255, 0.45) 0%, rgba(233, 248, 255, 0.45) 73.3154296875%, rgba(255, 255, 255, 0.45) 100%);
    // -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
  }


  .login-out {
    position: absolute;
    top: 10px;
    right: 40px;
    height: 36px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    cursor: pointer;

    .img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }

    span {
      font-size: 13px;
    }
  }

  .login-out:hover {
    background-color: #3c5e8f;
    border-radius: 20px;

  }
}

.main-container {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
}
</style>

 src/pages/single/components/mainMenu.vue

New file
@@ -0,0 +1,120 @@
<template>
  <div class="page-mode">
    <div @mouseenter="item.childrenFlag = true" :class="{ active: currentUrl.indexOf(item.path) != -1 }"
      @mouseleave="item.childrenFlag = false" @click="goToPath(item)" v-for="(item, index) in menuList" :key="index">
      {{ item.menuName }}
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { getTime } from '@/utils/getTime.js'
import { useRouterStore } from 'store/router'
const store = useRouterStore()
let router = useRouter()
let currentUrl = ref('statistics')

const menuList = ref(
  [
    {
      menuName: '园区概况',
      path: '/layout/map/survey'
    },
    {
      menuName: '风险源',
      path: '/layout/map/rs'
    },
    {
      menuName: '应急空间',
      path: '/layout/map/space'
    },
    {
      menuName: '应急物资',
      path: '/layout/single/supplies'
    },
    {
      menuName: '三级防控',
      path: '/layout/map/pac'
    },
    {
      menuName: '救援队伍',
      path: '/layout/single/rt'
    },
    {
      menuName: '突发事件模拟',
      path: '/layout/map/pd'
    },
    {
      menuName: '作战图',
      path: '/layout/single/ochart'
    },
  ]
)

const goToPath = (params) => {
  if (params.children && params.children.length > 0) return

  if (params.path) {
    if (router.currentRoute.value.path == params.path) return
    router.push({
      path: params.path
    })
  } else {
    params.childrenFlag = !params.childrenFlag
  }
}

watch(
  () => router.currentRoute.value,
  (newValue, oldValue) => {

    currentUrl.value = newValue.path

  },
  { immediate: true }
)

const userName = ref('管理员')
</script>

<style lang="scss" scoped>
.page-mode {
  position: absolute;
  top: auto;
  bottom: 55px;
  left: 50%;
  z-index: 99;
  transform: translateX(-50%);
  display: flex;
  pointer-events: auto;

  &>div {
    background-image: url(/images/mode-tab.png);
    background-size: cover;
    width: 136px;
    height: 50px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    color: #BFD3E5;
    line-height: 32px;
    padding-top: 12px;
    margin-right: -20px;
    font-style: italic;
    cursor: pointer;
    box-sizing: border-box;

    &:last-child {
      margin-right: 0px;
    }

    &.active {
      color: #F6FCFF;
      background-image: url(/images/mode-tab-ac.png);
    }
  }
}
</style>

 src/pages/single/index.vue

New file
@@ -0,0 +1,223 @@
<template>
  <div class="wrapper">
    <div class="w100 h100 relative main-content single-page" id="MainContent">
      <div class="main-header">
        <div class="title">吉水化工园区“一园一策一图”VR平台</div>

        <div class="login-out" @click="signOut">
          <img :src="loginOutBg" class="img" />
          <span>退出</span>
        </div>
      </div>

      <div class="main-container">
        <!-- 地图区域 -->
        <router-view></router-view>
      </div>

      <main-menu></main-menu>
    </div>
  </div>
</template>

<script setup>
import { getAssetsFile } from 'utils/utils'
const loginOutBg = getAssetsFile('login.png', '/images')
import mainMenu from './components/mainMenu.vue'

const signOut = () => {
  loginStore.LogOut().then(res => {
    router.push({
      path: '/login'
    })
  })
}
</script>

<style lang="scss" scoped>
$bg-blue: rgba(24, 33, 92, 0.9);

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  #MainContent,
  #SingleMainContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
  }

  .main-content {
    height: 1080px;
    background: url(/images/header.png) no-repeat center / 100% 100%,
      url(/images/pro-bg.png) no-repeat center / 100% 100%;

    pointer-events: none;

    &.single-page {
      background: url(/images/header.png) no-repeat center / 100% 100%,
        url(/images/pro-bg.png) no-repeat center / 100% 100%,
        rgba(0, 0, 0, 1);
    }

    .main-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      pointer-events: auto;

      .title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 640px;
        height: 40px;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #eff8fc;
        line-height: 40px;
        text-align: center;
        letter-spacing: 8px;
        font-weight: bolder;
        background: linear-gradient(to bottom,
            #e2eaf0 0%,
            #aed1f1 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        // opacity: 0.89;
        // text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);

        // background: linear-gradient(0deg, rgba(119, 186, 255, 0.45) 0%, rgba(233, 248, 255, 0.45) 73.3154296875%, rgba(255, 255, 255, 0.45) 100%);
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
      }


      .login-out {
        position: absolute;
        top: 10px;
        right: 40px;
        height: 36px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        cursor: pointer;

        .img {
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }

        span {
          font-size: 13px;
        }
      }

      .login-out:hover {
        background-color: #3c5e8f;
        border-radius: 20px;

      }
    }

    .main-container {
      position: absolute;
      top: 40px;
      left: 40px;
      right: 40px;
      bottom: 40px;
    }
  }
}

.main-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  pointer-events: auto;

  .title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 640px;
    height: 40px;
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #eff8fc;
    line-height: 40px;
    text-align: center;
    letter-spacing: 8px;
    font-weight: bolder;
    background: linear-gradient(to bottom,
        #e2eaf0 0%,
        #aed1f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    // opacity: 0.89;
    // text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);

    // background: linear-gradient(0deg, rgba(119, 186, 255, 0.45) 0%, rgba(233, 248, 255, 0.45) 73.3154296875%, rgba(255, 255, 255, 0.45) 100%);
    // -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
  }


  .login-out {
    position: absolute;
    top: 10px;
    right: 40px;
    height: 36px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    cursor: pointer;

    .img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }

    span {
      font-size: 13px;
    }
  }

  .login-out:hover {
    background-color: #3c5e8f;
    border-radius: 20px;

  }
}

.main-container {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
}
</style>