地图切换

package-lock.json

@@ -33,6 +33,7 @@
         "image-conversion": "^2.1.1",
         "js-cookie": "3.0.5",
         "jsencrypt": "3.3.2",
+        "konva": "^9.3.14",
         "nprogress": "0.2.0",
         "pinia": "^2.1.7",
         "screenfull": "6.0.2",
@@ -6703,6 +6704,25 @@
       "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
       "dev": true
     },
+    "node_modules/konva": {
+      "version": "9.3.14",
+      "resolved": "https://registry.npmmirror.com/konva/-/konva-9.3.14.tgz",
+      "integrity": "sha512-Gmm5lyikGYJyogKQA7Fy6dKkfNh350V6DwfZkid0RVrGYP2cfCsxuMxgF5etKeCv7NjXYpJxKqi1dYkIkX/dcA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/lavrton"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/konva"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/lavrton"
+        }
+      ]
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz",

package.json

@@ -42,6 +42,7 @@
     "image-conversion": "^2.1.1",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "konva": "^9.3.14",
     "nprogress": "0.2.0",
     "pinia": "^2.1.7",
     "screenfull": "6.0.2",

src/api/globalMap/index.ts

@@ -2,7 +2,15 @@ import request from '@/utils/request';
 import { MapQuery } from './type';
 
 // 加载粤政图服务
-export const getMapProduct = (query: MapQuery) => {
+export const getMapProduct = (serviceCode: string, params) => {
+  return request({
+    url: '/api/oneShare/proxyHandler/gd/' + serviceCode,
+    method: 'get',
+    params: params
+  });
+};
+
+export const getMapProduct2 = (query: MapQuery) => {
   return request({
     url: '/gmap/proxyHandler',
     method: 'get',

src/components/Map/MapLogical.vue

@@ -1,7 +1,21 @@
 <template>
   <div class="mapContainer">
-    <div id="map"></div>
-    <el-button type="primary" @click="backParentMap" class="backBtn">按钮</el-button>
+    <div :style="{ width: mapState[mapState.active].width + 'px', height: mapState[mapState.active].height + 'px', position: 'relative' }">
+      <img :src="mapState[mapState.active].img" alt="" />
+      <div v-show="mapState.active === 'layersData'">
+        <div
+          v-for="(item, index) in mapState.markers"
+          :key="index"
+          class="marker"
+          :style="{ top: item.top + 'px', left: item.left + 'px' }"
+          @click="clickMarker(item.value)"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+
+    <el-button v-show="mapState.active !== 'layersData'" type="primary" class="backBtn" @click="backParentMap">返回上一级</el-button>
   </div>
 </template>
 
@@ -14,233 +28,69 @@ import gzImg from '@/assets/images/map/map-gaozhou.png';
 import hzImg from '@/assets/images/map/map-huazhou.png';
 import mnImg from '@/assets/images/map/map-maonan.png';
 import xyImg from '@/assets/images/map/map-xinyi.png';
-import labelBg3 from '@/assets/images/map/label-bg-1-3.png';
-import labelBg4 from '@/assets/images/map/label-bg-1-4.png';
-
-interface Props {
-  cityName?: '茂名市';
-  center: number[];
-  mapData: any[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  cityName: '茂名市',
-  center: [110.999229, 21.919751]
-});
+import { deepClone } from '@/utils';
 
 const emits = defineEmits(['onMarkerClick']);
 let map = null;
 let mapState = reactive({
+  active: 'layersData',
+  markers: [
+    { label: '茂南区', value: 'layersData_440902', top: 625, left: 305 },
+    { label: '电白区', value: 'layersData_440904', top: 625, left: 490 },
+    { label: '化州市', value: 'layersData_440982', top: 520, left: 120 },
+    { label: '高州市', value: 'layersData_440981', top: 420, left: 345 },
+    { label: '信宜市', value: 'layersData_440983', top: 170, left: 410 }
+  ],
   // 茂名地形地图
   layersData: {
     img: mmImg,
-    left: 110.297,
-    bottom: 21.157,
-    right: 111.723,
-    top: 22.651
+    width: 810,
+    height: 849
   },
   // 地形-图片图层 - 电白
   layersData_440904: {
-    img: dbImg,
-    left: 110.297,
-    bottom: 21.157,
-    right: 111.723,
-    top: 22.651
+    img: dbImg
   },
   // 地形-图片图层 - 高州
   layersData_440981: {
-    img: gzImg,
-    left: 110.297,
-    bottom: 21.157,
-    right: 111.723,
-    top: 22.651
+    img: gzImg
   },
   // 地形-图片图层 - 化州
   layersData_440982: {
-    img: hzImg,
-    left: 110.297,
-    bottom: 21.157,
-    right: 111.723,
-    top: 22.651
+    img: hzImg
   },
   // 地形-图片图层 - 茂南
   layersData_440902: {
-    img: mnImg,
-    left: 110.297,
-    bottom: 21.157,
-    right: 111.723,
-    top: 22.651
+    img: mnImg
   },
   // 地形-图片图层 - 信宜
   layersData_440983: {
-    img: xyImg,
-    left: 110.297,
-    bottom: 21.157,
-    right: 111.723,
-    top: 22.651
-  },
-  boundaries: [],
-  // 逻辑地图-点标记图标样式位置
-  markerImgs: {
-    // 3个字以内
-    '3': {
-      img: labelBg3,
-      width: 148,
-      height: 40,
-      left: -49,
-      top: -53
-    },
-    // 4个字
-    '4': {
-      img: labelBg4,
-      width: 166,
-      height: 40,
-      left: -49,
-      top: -53
-    }
+    img: xyImg
   }
 });
 
-// 设置 地形-图片图层
-const setLayers = (code?: string) => {
-  const layersData = code ? mapState['layersData_' + code] : mapState.layersData;
-  const imageLayer = new AMap.ImageLayer({
-    bounds: new AMap.Bounds([layersData.left, layersData.bottom], [layersData.right, layersData.top]),
-    url: layersData.img,
-    opacity: 1,
-    zIndex: 3
-  });
-  map.setLayers([imageLayer]);
-};
-
-// 利用行政区查询获取边界构建mask路径 也可以直接通过经纬度构建mask路径
-const districtSearch = (name, callback, enable = true) => {
-  if (!enable) {
-    callback();
-    return;
-  }
-  const district = new AMap.DistrictSearch({
-    subdistrict: 0,
-    extensions: 'all',
-    level: 'city'
-  });
-  district.search(name, (status, result) => {
-    const boundaries = result.districtList[0].boundaries;
-    callback(boundaries);
-  });
-};
-
-// 设置 地图下级区域Polygon多边形
-const setPolygons = () => {
-  if (props.mapData.children && props.mapData.children.length) {
-    props.mapData.children.forEach(item => {
-      // 按产品需求，如果这个点的所有数据都为0或者空则不打点这个数据
-      let allNull = true;
-      item.infoData.forEach((ele) => {
-        if (ele.value && ele.value !== '-') {
-          allNull = false;
-        }
-      });
-      if (!allNull) {
-        const { marker, nodeMarker } = addMarker(item); // 设置逻辑地图打点marker
-        // 标点点击事件
-        marker.on('click', () => {
-          console.log('click', item);
-          emits('onMarkerClick', null, item);
-          if (item.code) {
-            map.clearMap();
-            setLayers(item.code);
-          }
-        });
-        marker.on('mouseover', () => {
-          console.log('mouseover', item);
-        });
-        marker.on('mouseout', () => {
-          console.log('mouseout', item);
-        });
-      }
-    });
-    // this.map.on('mouseout', e => {
-    //   !this.$store.state.mapInterval && this.intervalMarkerTips();
-    // });
-  }
+// marker样式位置
+const createMarkerNode = (item) => {
+  // console.log(item.name);
+  // let obj;
+  // let nodeMarker = `<div class="marker-container">${item.label}</div>`;
 };
 
-// 添加标记
-const addMarker = (item) => {
-  const position = new AMap.LngLat(item.center[0], item.center[1]);
-  const { nodeMarker, offset } = getMarkerNode(item);
-  console.log('开始设置打点marker');
-  const marker = new AMap.Marker({
-    position: position,
-    content: nodeMarker,
-    offset: offset
-  });
-  map.add(marker);
-  return { marker, nodeMarker };
+// 子地图返回上级地图
+const backParentMap = () => {
+  mapState.active = 'layersData';
 };
 
-// marker样式位置
-const getMarkerNode = (item) => {
-  console.log(item.name);
-  let obj;
-  let nodeMarker = `<div class="marker-container">${item.name}</div>`;
-  if (item.type && item.type === '1') {
-    obj = mapState.markerImgs['4'];
-  } else {
-    obj = mapState.markerImgs['3'];
-  }
-  return {
-    nodeMarker: nodeMarker,
-    offset: new AMap.Pixel(obj.left, obj.top)
-  };
+const initMap = () => {
+  mapState.active = 'layersData';
 };
 
-// 子地图返回上级地图
-const backParentMap = () => {
-  map.clearMap();
-  setLayers();
-  setPolygons();
+const clickMarker = (key) => {
+  mapState.active = key;
 };
 
 onMounted(() => {
-  // window._AMapSecurityConfig = {
-  //   securityJsCode: 'c5a0d984a56ab366118f60cca08b9099'
-  // };
-  AMapLoader.load({
-    // key: 'ef9090f018b879c7b896b352c01816dd', // 申请好的Web端开发者Key，首次调用 load 时必填
-    key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
-    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    plugins: ['AMap.DistrictSearch']
-  })
-    .then((AMap) => {
-      districtSearch(
-        props.cityName,
-        (boundaries) => {
-          mapState.boundaries = boundaries;
-          map = new AMap.Map('map', {
-            // 是否为3D地图模式
-            viewMode: '3D',
-            pitch: 0,
-            // 初始化地图级别
-            zoom: 9.4,
-            // 初始化地图中心点位置
-            center: [props.center[0], props.center[1]],
-            // 是否可拖拽
-            dragEnable: false,
-            // 是否允许通过鼠标滚轮来缩放
-            scrollWheel: false
-          });
-          // 设置地图图层
-          setLayers();
-          setPolygons();
-        },
-        false
-      );
-    })
-    .catch((e) => {
-      console.log(e);
-    });
+  initMap();
 });
 
 onUnmounted(() => {
@@ -252,10 +102,20 @@ onUnmounted(() => {
 .mapContainer {
   width: 100%;
   height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   #map {
     width: 100%;
     height: 100%;
   }
+  .marker {
+    position: absolute;
+    color: #fff;
+    cursor: pointer;
+    font-size: 16px;
+  }
   .backBtn {
     position: absolute;
     bottom: 20px;

src/components/Map/index.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="map-container">
     <div id="yztMap" class="map-container"></div>
-    <el-button type="primary" class="btn" @click="switchMap('satellite')">切换卫星图</el-button>
-    <el-button type="primary" class="btn" style="left: 150px" @click="removeLayers()">清除图层</el-button>
+<!--    <el-button type="primary" class="btn" @click="switchMap('satellite')">切换卫星图</el-button>-->
+<!--    <el-button type="primary" class="btn" style="left: 150px" @click="removeLayers()">清除图层</el-button>-->
   </div>
 </template>
 <script setup lang="ts">
 import { getMapProduct } from '@/api/globalMap';
 import WMTSManager from "@/utils/wmtsManager";
+import AMapLoader from "@amap/amap-jsapi-loader";
 
 interface Props {
   center?: number[];
   zoom?: number;
   minZoom?: number;
   maxZoom?: number;
+  activeMap: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -57,29 +59,23 @@ const initMapEvent = () => {
     layer_cva.metadata = { group: 'basemap' };
     map.addLayer(layer_vtc);
     map.addLayer(layer_cva);
+    if (props.activeMap !== 'vectorgraph') {
+      removeLayers();
+      switchMap(props.activeMap);
+    }
   });
 };
-
-let queryParams = {
-  paasId: 'C90-44004428',
-  paasToken: 'f539f616b2834160bc47fda5f298512c',
-  REQUEST: 'GetCapabilities',
-  SERVICE: 'wmts'
-};
 // 切换地图
 const switchMap = (type) => {
   let queryParamsArr = [];
   if (type === 'satellite') {
     queryParamsArr = [
       {
-        serviceCode: 'YZT1715739306532',
-        url: 'https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke?token=aZYNa2OXovTjKNsZQoBVSQe8Yr9lYd2q',
-        ...queryParams
+        serviceCode: 'YZT1715739306532'
       },
       {
         serviceCode: 'YZT1695608158269',
-        url: 'https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke?token=FvbfvydZ6lmgxxK5rNcalKEfrn1YgAM6',
-        ...queryParams
+        REQUEST: 'GetCapabilities'
       }
     ];
   }
@@ -88,6 +84,42 @@ const switchMap = (type) => {
     wmtsManager.init();
   }
   wmtsManager.addWmtsLayers(queryParamsArr, (res) => {});
+  // AMapLoader.load({
+  //   // key: 'ef9090f018b879c7b896b352c01816dd', // 申请好的Web端开发者Key，首次调用 load 时必填
+  //   key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
+  //   version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+  // }).then(AMap => {
+  //   let map = new AMap.Map('yztMap', {
+  //     // 是否为3D地图模式
+  //     viewMode: '3D',
+  //     pitch: 0,
+  //     // 初始化地图级别
+  //     zoom: 9.4,
+  //     // 初始化地图中心点位置
+  //     // center: [props.center[0], props.center[1]],
+  //     center: [121.456493, 31.252764],
+  //     // // 是否可拖拽
+  //     // dragEnable: false,
+  //     // // 是否允许通过鼠标滚轮来缩放
+  //     // scrollWheel: false
+  //   });
+  //   // map.setFeatures([]);
+  //   var wms = new AMap.TileLayer.WMTS({
+  //     url: 'http://t0.tianditu.gov.cn/img_c/wmts',
+  //     // url: 'http://10.181.7.236:9988/api/oneShare/proxyHandler/mm/' + queryParamsArr[0].serverCode,
+  //     // blend: true,
+  //     // tileSize: 256,
+  //     params: {
+  //       Layer: "img",
+  //       Version: "1.0.0",
+  //       Format: "tiles",
+  //       TileMatrixSet: "w",
+  //       STYLE: "default",
+  //       tk: 'd31190edaa4190af833234ab7b1a6f27'
+  //     }
+  //   });
+  //   wms.setMap(map);
+  // });
 };
 
 // 清除图层
@@ -106,6 +138,7 @@ onMounted(() => {
 .map-container {
   width: 100%;
   height: 100%;
+  position: relative;
   .btn {
     position: absolute;
     bottom: 20px;

src/utils/wmtsManager.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { getMapProduct } from "@/api/globalMap";
+import { getMapProduct, getMapProduct2 } from "@/api/globalMap";
 class WMTSManager {
   constructor(map) {
     this.map = map;
@@ -45,7 +45,90 @@ class WMTSManager {
     }
     const val = wmtsInfo[that.index];
     if (val) {
-      getMapProduct(val).then((value) => {
+      let obj = {};
+      if (val.REQUEST) {
+        obj = {
+          REQUEST: val.REQUEST
+        };
+      }
+      getMapProduct(val.serviceCode, obj).then((value) => {
+        const format = new GeoGlobe.Format.WMTSCapabilities();
+        //为了解决BoundingBox节点或者WGS84BoundingBox中存在“NaN NaN”的情况，导致format.read解析时报错，出现这个问题时，将坐标改为广东省范围
+        if (value.indexOf('<ows:LowerCorner>NaN NaN</ows:LowerCorner>') >= 0 || value.indexOf('<ows:UpperCorner>NaN NaN</ows:UpperCorner>') >= 0) {
+          value = value.replaceAll('<ows:LowerCorner>NaN NaN</ows:LowerCorner>', '<ows:LowerCorner>109.61 20</ows:LowerCorner>');
+          value = value.replaceAll('<ows:UpperCorner>NaN NaN</ows:UpperCorner>', '<ows:UpperCorner>117.39 25.51</ows:UpperCorner>');
+        } else if (value.indexOf('<ows:LowerCorner> </ows:LowerCorner>') >= 0 || value.indexOf('<ows:UpperCorner> </ows:UpperCorner>') >= 0) {
+          value = value.replaceAll('<ows:LowerCorner> </ows:LowerCorner>', '<ows:LowerCorner>109.61 20</ows:LowerCorner>');
+          value = value.replaceAll('<ows:UpperCorner> </ows:UpperCorner>', '<ows:UpperCorner>117.39 25.51</ows:UpperCorner>');
+        }
+        const json = format.read(value);
+        const layerOptions = that.WMTSMatchAnalyzer(json, val.layerExtent, val.wmtsLoadParam);
+        const serviceUrl = window.location.origin + import.meta.env.VITE_APP_BASE_API + '/api/oneShare/proxyHandler/mm/' + val.serviceCode;
+        const layerInf = that.createLayer(serviceUrl, layerOptions[0], isSpecialLayer);
+        that.map.addSource(layerInf.source.id, layerInf.source);
+        that.wmtslayergroup.addLayerToGroup(that.map, that.wmtsgroupid, layerInf.layer);
+        let maxt = '';
+        let extent = '';
+        if (layerInf.layer.metadata[0]) {
+          extent = layerInf.layer.metadata[0].maxExtent.split(',');
+          maxt = GeoGlobe.LngLatBounds.fromString(layer.metadata[0].maxExtent);
+        } else if (layerInf.layer.metadata.maxExtent) {
+          extent = layerInf.layer.metadata.maxExtent.split(',');
+          maxt = GeoGlobe.LngLatBounds.fromString(layerInf.layer.metadata.maxExtent);
+        } else if (layerInf.layer.metadata.tileFullExtent) {
+          extent = layerInf.layer.metadata.tileFullExtent.split(',');
+          maxt = GeoGlobe.LngLatBounds.fromString(layerInf.layer.metadata.tileFullExtent);
+        }
+        if (val.layerExtent) {
+          that.map.fitBounds([
+            [val.layerExtent.left, val.layerExtent.bottom],
+            [val.layerExtent.right, val.layerExtent.top]
+          ]);
+        } else {
+          if (that.map.getZoom() < layerInf.layer.minzoom || that.map.getZoom() > layerInf.layer.maxzoom) {
+            that.map.setZoom(layerInf.layer.minzoom);
+          }
+          // 根据地图返回的范围设置地图中心
+          // if (maxt) {
+          //   //如果当前坐标单位为经纬度，判断范围中的坐标是否在有效范围内
+          //   if (that.map.units === 'degrees') {
+          //     if (
+          //       that.validLonCoord(maxt.getEast()) &&
+          //       that.validLonCoord(maxt.getWest()) &&
+          //       that.validLatCoord(maxt.getSouth()) &&
+          //       that.validLatCoord(maxt.getNorth())
+          //     ) {
+          //       var centerPoint = maxt.getCenterLonLat();
+          //       that.map.setCenter(centerPoint);
+          //     }
+          //   } else {
+          //     var centerPoint = maxt.getCenterLonLat();
+          //     that.map.setCenter(centerPoint);
+          //   }
+          //   var centerPoint = maxt.getCenterLonLat();
+          //   that.map.setCenter(centerPoint);
+          // }
+        }
+        that.mapLayerIds.push(layerInf.layer.id);
+        that.currentMapLayerIds.push(layerInf.layer.id);
+        that.index++;
+        that.addWmtsLayers(wmtsInfo, callback);
+      });
+    } else {
+      that.index = 0;
+      callback(true, that.currentMapLayerIds);
+      that.currentMapLayerIds = [];
+    }
+  }
+  addWmtsLayers2(wmtsInfo, callback, isSpecialLayer) {
+    const that = this;
+    if (!wmtsInfo[0]) {
+      ElMessage({ message: '请传入正确的参数!', type: 'error' });
+      return false;
+    }
+    const val = wmtsInfo[that.index];
+    if (val) {
+      getMapProduct2(val).then((value) => {
         const format = new GeoGlobe.Format.WMTSCapabilities();
         //为了解决BoundingBox节点或者WGS84BoundingBox中存在“NaN NaN”的情况，导致format.read解析时报错，出现这个问题时，将坐标改为广东省范围
         if (value.indexOf('<ows:LowerCorner>NaN NaN</ows:LowerCorner>') >= 0 || value.indexOf('<ows:UpperCorner>NaN NaN</ows:UpperCorner>') >= 0) {
@@ -229,7 +312,8 @@ class WMTSManager {
       url: [url],
       minzoom: parseInt(minzoom),
       maxzoom: parseInt(maxzoom) + 1,
-      tileSize: 256
+      // tileSize: 256
+      tileSize: 1024
     });
     wmtsSource['minzoom'] = parseInt(minzoom);
     wmtsSource['maxzoom'] = parseInt(maxzoom) + 1;

src/views/emergencyCommandMap/LeftSection.vue

@@ -31,7 +31,7 @@
 
 <style lang="scss" scoped>
 .left-section {
-  width: 1685px;
+  width: 2400px;
   height: calc(2560px - 345px);
   display: flex;
   flex-direction: column;

src/views/emergencyCommandMap/RightSection.vue

@@ -88,7 +88,7 @@ const handleClose = () => {
 
 <style lang="scss" scoped>
 .right-section {
-  width: 1685px;
+  width: 2400px;
   height: calc(2560px - 345px);
   display: flex;
   flex-direction: column;

src/views/globalMap/SwitchMapTool.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <div :class="open ? 'switch-box active' : 'switch-box'">
+      <div class="expand-btn" @click="handleExpand">{{ open ? '收起' : '展开' }}</div>
+      <div class="switch-item" @click="selectItem('logical')">
+        <div v-if="open || (!open && activeMap === 'logical')" class="item-bg">
+          <div :class="activeMap === 'logical' ? 'item-text bg-active' : 'item-text'">逻辑地图</div>
+        </div>
+      </div>
+      <div v-if="open || (!open && activeMap === 'vectorgraph')" class="switch-item" @click="selectItem('vectorgraph')">
+        <div class="item-bg">
+          <div :class="activeMap === 'vectorgraph' ? 'item-text bg-active' : 'item-text'">矢量地图</div>
+        </div>
+      </div>
+      <div v-if="open || (!open && activeMap === 'satellite')" class="switch-item" @click="selectItem('satellite')">
+        <div class="item-bg">
+          <div :class="activeMap === 'satellite' ? 'item-text bg-active' : 'item-text'">卫星地图</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// interface Props {
+//   activeMap: boolean;
+// }
+//
+// const props = withDefaults(defineProps<Props>(), {});
+
+const activeMap = ref('logical');
+const emits = defineEmits(['swtichMap']);
+let open = ref(false);
+const selectItem = (key) => {
+  // if (activeMap.value === key) return;
+  activeMap.value = key;
+  emits('swtichMap', key);
+};
+const handleExpand = () => {
+  open.value = !open.value;
+};
+</script>
+
+<style lang="scss" scoped>
+.switch-box {
+  background-color: #162975;
+  //transition: width 0.8s ease-in-out, transform 0.8s ease-in-out;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-right: 10px;
+  display: flex;
+  width: 230px;
+  .expand-btn {
+    width: 30px;
+    height: 108px;
+    background-color: #153b87;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .switch-item {
+    display: inline-block;
+    margin-left: 10px;
+    width: 180px;
+    height: 108px;
+    padding: 10px 0;
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+  .item-bg {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    cursor: pointer;
+    background-color: #5babde;
+  }
+  .item-text {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 120px;
+    height: 28px;
+    line-height: 28px;
+    padding-right: 10px;
+    background-image: url('@/assets/images/map/bg-default.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: right;
+    font-size: 18px;
+  }
+
+  .bg-active {
+    background-image: url('@/assets/images/map/bg-active.png');
+  }
+}
+.active {
+  width: 100%;
+  transform: translateX(0);
+}
+</style>

src/views/globalMap/ToolBox.vue

@@ -0,0 +1,13 @@
+<template>
+  <SwitchMapTool @swtichMap="swtichMap2" />
+</template>
+
+<script lang="ts" setup>
+import SwitchMapTool from '@/views/globalMap/SwitchMapTool.vue';
+const emits = defineEmits(['swtichMap']);
+const swtichMap2 = (key) => {
+  emits('swtichMap', key);
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/globalMap/index.vue

@@ -1,15 +1,37 @@
 <template>
-  <MapLogical v-if="showLogicalData" :mapData="logicalData" />
-  <Map v-else></Map>
+  <div class="global-map">
+    <MapLogical v-if="activeMap === 'logical'" :mapData="logicalData" />
+    <Map v-else :activeMap="activeMap"></Map>
+    <ToolBox @swtichMap="swtichMap" class="tool-box" />
+  </div>
 </template>
 
 <script lang="ts" setup>
 import Map from '@/components/Map/index.vue';
 import MapLogical from '@/components/Map/MapLogical.vue';
 import { logicalData } from './data/mapData';
+import ToolBox from './ToolBox.vue';
 
 const mapData = reactive(logicalData);
-let showLogicalData = ref(false);
+let activeMap = ref('satellite');
+
+const swtichMap = (key) => {
+  activeMap.value = key;
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.global-map {
+  background-color: #030526;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .tool-box {
+    position: absolute;
+    right: 50px;
+    bottom: 50px;
+    z-index: 10;
+    color: #fff;
+  }
+}
+</style>

src/views/routineCommandMap/LeftSection.vue

@@ -158,7 +158,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .left-section {
-  width: 1685px;
+  width: 2400px;
   height: calc(2560px - 345px);
   display: flex;
   flex-direction: column;

src/views/routineCommandMap/RightSection.vue

@@ -176,7 +176,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .right-section {
-  width: 1685px;
+  width: 2400px;
   height: calc(2560px - 345px);
   display: flex;
   flex-direction: column;

vite.config.ts

@@ -25,7 +25,8 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
       open: true,
       proxy: {
         [env.VITE_APP_BASE_API]: {
-          target: 'http://localhost:8080',
+          // target: 'http://localhost:8080',
+          target: 'http://10.181.7.236:9988',
           changeOrigin: true,
           ws: true,
           rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')