diff --git a/src/assets/images/Sponge_screen/SiSeTu.png b/src/assets/images/Sponge_screen/SiSeTu.png
new file mode 100644
index 0000000..54415fe
--- /dev/null
+++ b/src/assets/images/Sponge_screen/SiSeTu.png
Binary files differ

diff --git a/src/assets/images/Sponge_screen/SiSeTu.png b/src/assets/images/Sponge_screen/SiSeTu.png
new file mode 100644
index 0000000..54415fe
--- /dev/null
+++ b/src/assets/images/Sponge_screen/SiSeTu.png
Binary files differ
diff --git a/src/views/oneMap/components/ZTGL.vue b/src/views/oneMap/components/ZTGL.vue
index b1398f7..f483ffb 100644
--- a/src/views/oneMap/components/ZTGL.vue
+++ b/src/views/oneMap/components/ZTGL.vue
@@ -1,13 +1,26 @@
 <template>
   <div id="ZTGL">
-    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+    <div
+      :class="[
+        'LeftBox',
+        'animate__animated',
+        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
+      ]"
+    >
       <LeftBox />
     </div>
-    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+    <div
+      :class="[
+        'RightBox',
+        'animate__animated',
+        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
+      ]"
+    >
       <RightBox />
     </div>
-    <div class="PerspectiveControl" :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']">
-      <div
+    <!-- <div class="PerspectiveControl" :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"> -->
+
+    <!-- <div
         class="zzsj flex flex-justcontent-spacebetween"
         v-for="(item, index) in angleviewList"
         :class="activedname == item.name ? 'activedright' : ''"
@@ -18,29 +31,29 @@
           <img :src="item.img" alt="" v-else />
         </div>
         <div class="angleview">{{ item.name }}</div>
-      </div>
-    </div>
+      </div> -->
+    <!-- </div> -->
   </div>
 </template>
 
 <script setup name="ZTGL">
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
 const AllData = reactive({});
-import LeftBox from '@/views/oneMap/OverallOverview/LeftBox.vue';
-import RightBox from '@/views/oneMap/OverallOverview/RightBox.vue';
-import testProjection from '@/assets/testProjection.json';
-import testProjectionLabel from '@/assets/testProjectionLabel.json';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
-import xtb_img from '@/assets/newImgs/xtb_img.png';
+import LeftBox from "@/views/oneMap/OverallOverview/LeftBox.vue";
+import RightBox from "@/views/oneMap/OverallOverview/RightBox.vue";
+import testProjection from "@/assets/testProjection.json";
+import testProjectionLabel from "@/assets/testProjectionLabel.json";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
+import xtb_img from "@/assets/newImgs/xtb_img.png";
 
-import zhsja from '@/assets/images/zhps/zhsja.png'; //综合
-import zhsjl from '@/assets/images/zhps/zhsjl.png'; //综合
-import qll from '@/assets/images/zhps/qll.png'; //桥梁
-import qln from '@/assets/images/zhps/qln.png'; //桥梁
-import sdl from '@/assets/images/zhps/sdl.png'; //隧道
-import sda from '@/assets/images/zhps/sda.png'; //隧道
+import zhsja from "@/assets/images/zhps/zhsja.png"; //综合
+import zhsjl from "@/assets/images/zhps/zhsjl.png"; //综合
+import qll from "@/assets/images/zhps/qll.png"; //桥梁
+import qln from "@/assets/images/zhps/qln.png"; //桥梁
+import sdl from "@/assets/images/zhps/sdl.png"; //隧道
+import sda from "@/assets/images/zhps/sda.png"; //隧道
 
-import bus from '@/bus';
+import bus from "@/bus";
 const showPanel = ref(true); //面板展开收起
 // 面板内容展开收起控制
 const props = defineProps({
@@ -48,66 +61,66 @@
     type: Boolean,
   },
 });
-const angleviewList = ref([
-  {
-    name: '综合视角',
-    img: zhsja,
-    Limg: zhsjl,
-    lonlat: [109.478, 36.606],
-    zoom: 14,
-    bearing: 0,
-    pitch: 55,
-  },
-  {
-    name: '桥梁视角',
-    img: qln,
-    Limg: qll,
-    lonlat: [109.4716, 36.6064],
-    zoom: 18,
-    bearing: 300,
-    pitch: 45,
-  },
-  {
-    name: '隧道视角',
-    img: sda,
-    Limg: sdl,
-    lonlat: [109.4636, 36.6134],
-    zoom: 18,
-    bearing: 30,
-    pitch: 45,
-  },
-]);
-const activedname = ref('综合视角');
-// 点击事件
-function categoryclick(val) {
-  console.log(val.name, '1');
-  activedname.value = val.name;
-  if (activedname.value == '综合视角') {
-    console.log('综合视角');
-    newfiberMapbox.map.easeTo({
-      center: val.lonlat,
-      zoom: val.zoom,
-      bearing: val.bearing,
-      pitch: val.pitch,
-    });
-  } else if (activedname.value == '桥梁视角') {
-    console.log('桥梁视角');
-    newfiberMapbox.map.easeTo({
-      center: val.lonlat,
-      zoom: val.zoom,
-      bearing: val.bearing,
-      pitch: val.pitch,
-    });
-  } else {
-    console.log('隧道视角');
-    newfiberMapbox.map.easeTo({
-      center: val.lonlat,
-      zoom: val.zoom,
-      bearing: val.bearing,
-      pitch: val.pitch,
-    });
-  }
-}
+// const angleviewList = ref([
+//   {
+//     name: '综合视角',
+//     img: zhsja,
+//     Limg: zhsjl,
+//     lonlat: [109.478, 36.606],
+//     zoom: 14,
+//     bearing: 0,
+//     pitch: 55,
+//   },
+//   {
+//     name: '桥梁视角',
+//     img: qln,
+//     Limg: qll,
+//     lonlat: [109.4716, 36.6064],
+//     zoom: 18,
+//     bearing: 300,
+//     pitch: 45,
+//   },
+//   {
+//     name: '隧道视角',
+//     img: sda,
+//     Limg: sdl,
+//     lonlat: [109.4636, 36.6134],
+//     zoom: 18,
+//     bearing: 30,
+//     pitch: 45,
+//   },
+// ]);
+// const activedname = ref('综合视角');
+// // 点击事件
+// function categoryclick(val) {
+//   console.log(val.name, '1');
+//   activedname.value = val.name;
+//   if (activedname.value == '综合视角') {
+//     console.log('综合视角');
+//     newfiberMapbox.map.easeTo({
+//       center: val.lonlat,
+//       zoom: val.zoom,
+//       bearing: val.bearing,
+//       pitch: val.pitch,
+//     });
+//   } else if (activedname.value == '桥梁视角') {
+//     console.log('桥梁视角');
+//     newfiberMapbox.map.easeTo({
+//       center: val.lonlat,
+//       zoom: val.zoom,
+//       bearing: val.bearing,
+//       pitch: val.pitch,
+//     });
+//   } else {
+//     console.log('隧道视角');
+//     newfiberMapbox.map.easeTo({
+//       center: val.lonlat,
+//       zoom: val.zoom,
+//       bearing: val.bearing,
+//       pitch: val.pitch,
+//     });
+//   }
+// }
 watch(
   () => props.showPanel,
   () => {
@@ -119,24 +132,24 @@
   // activedname.value = '综合视角';
   let initeGLTimer = setInterval(() => {
     if (!newfiberMapbox) return;
-    if (!newfiberMapbox.map.getLayer('buildingLayer')) return;
+    if (!newfiberMapbox.map.getLayer("buildingLayer")) return;
     newfiberMapbox.map.easeTo({
       center: [109.478, 36.606],
       zoom: 14,
     });
     const layer = new mapboxL7.LineLayer({
-      name: 'testProjection',
+      name: "testProjection",
     })
       .source(testProjection)
       .size(30)
-      .shape('wall')
+      .shape("wall")
       .style({
         opacity: 0.8,
-        sourceColor: '#fe7285',
-        targetColor: 'rbga(255,255,255, 0)',
+        sourceColor: "#fe7285",
+        targetColor: "rbga(255,255,255, 0)",
       });
     newfiberMapbox.addLayer(layer);
-    mapBoxVectorLayer.addGeojsonSymbol('testProjection', testProjectionLabel, xtb_img);
+    mapBoxVectorLayer.addGeojsonSymbol("testProjection", testProjectionLabel, xtb_img);
     // setTimeout(() => {
     //   newfiberMapbox.map.moveLayer("buildingLayer", "testProjection");
     // }, 1000);
@@ -150,12 +163,12 @@
   }, 100);
 });
 onBeforeUnmount(() => {
-  bus.emit('SetLayerShow', ['蓝色地图']);
-  mapBoxVectorLayer.removeByIds(['clickPoint']);
-  bus.emit('closeCesiumPopup');
-  if (newfiberMapbox.getLayerByName('testProjection')) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
-    mapBoxVectorLayer.removeByIds(['testProjection']);
+  bus.emit("SetLayerShow", ["蓝色地图"]);
+  mapBoxVectorLayer.removeByIds(["clickPoint"]);
+  bus.emit("closeCesiumPopup");
+  if (newfiberMapbox.getLayerByName("testProjection")) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("testProjection"));
+    mapBoxVectorLayer.removeByIds(["testProjection"]);
   }
 });
 </script>
@@ -169,7 +182,11 @@
     left: 10px;
     top: 70px;
     // background: url('@/assets/images/LeftContent.png') no-repeat;
-    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
+    background: linear-gradient(
+      0deg,
+      rgba(0, 43, 67, 0.8) 0%,
+      rgba(0, 76, 118, 0.8) 100%
+    );
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-shadow: inset 0 0 5px 5px #47eef38a;
@@ -181,7 +198,11 @@
     right: 10px;
     top: 70px;
     // background: url('@/assets/images/rightContent.png') no-repeat;
-    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
+    background: linear-gradient(
+      0deg,
+      rgba(0, 43, 67, 0.8) 0%,
+      rgba(0, 76, 118, 0.8) 100%
+    );
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-shadow: inset 0 0 5px 5px #47eef38a;
@@ -196,7 +217,11 @@
     .zzsj {
       width: 105px;
       height: 36px;
-      background: linear-gradient(0deg, rgba(126, 158, 166, 0.2) 0%, rgba(126, 158, 166, 0.8) 100%);
+      background: linear-gradient(
+        0deg,
+        rgba(126, 158, 166, 0.2) 0%,
+        rgba(126, 158, 166, 0.8) 100%
+      );
       border-radius: 2px;
       text-align: center;
       align-items: center;

diff --git a/src/assets/images/Sponge_screen/SiSeTu.png b/src/assets/images/Sponge_screen/SiSeTu.png
new file mode 100644
index 0000000..54415fe
--- /dev/null
+++ b/src/assets/images/Sponge_screen/SiSeTu.png
Binary files differ
diff --git a/src/views/oneMap/components/ZTGL.vue b/src/views/oneMap/components/ZTGL.vue
index b1398f7..f483ffb 100644
--- a/src/views/oneMap/components/ZTGL.vue
+++ b/src/views/oneMap/components/ZTGL.vue
@@ -1,13 +1,26 @@
 <template>
   <div id="ZTGL">
-    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+    <div
+      :class="[
+        'LeftBox',
+        'animate__animated',
+        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
+      ]"
+    >
       <LeftBox />
     </div>
-    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+    <div
+      :class="[
+        'RightBox',
+        'animate__animated',
+        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
+      ]"
+    >
       <RightBox />
     </div>
-    <div class="PerspectiveControl" :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']">
-      <div
+    <!-- <div class="PerspectiveControl" :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"> -->
+
+    <!-- <div
         class="zzsj flex flex-justcontent-spacebetween"
         v-for="(item, index) in angleviewList"
         :class="activedname == item.name ? 'activedright' : ''"
@@ -18,29 +31,29 @@
           <img :src="item.img" alt="" v-else />
         </div>
         <div class="angleview">{{ item.name }}</div>
-      </div>
-    </div>
+      </div> -->
+    <!-- </div> -->
   </div>
 </template>
 
 <script setup name="ZTGL">
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
 const AllData = reactive({});
-import LeftBox from '@/views/oneMap/OverallOverview/LeftBox.vue';
-import RightBox from '@/views/oneMap/OverallOverview/RightBox.vue';
-import testProjection from '@/assets/testProjection.json';
-import testProjectionLabel from '@/assets/testProjectionLabel.json';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
-import xtb_img from '@/assets/newImgs/xtb_img.png';
+import LeftBox from "@/views/oneMap/OverallOverview/LeftBox.vue";
+import RightBox from "@/views/oneMap/OverallOverview/RightBox.vue";
+import testProjection from "@/assets/testProjection.json";
+import testProjectionLabel from "@/assets/testProjectionLabel.json";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
+import xtb_img from "@/assets/newImgs/xtb_img.png";
 
-import zhsja from '@/assets/images/zhps/zhsja.png'; //综合
-import zhsjl from '@/assets/images/zhps/zhsjl.png'; //综合
-import qll from '@/assets/images/zhps/qll.png'; //桥梁
-import qln from '@/assets/images/zhps/qln.png'; //桥梁
-import sdl from '@/assets/images/zhps/sdl.png'; //隧道
-import sda from '@/assets/images/zhps/sda.png'; //隧道
+import zhsja from "@/assets/images/zhps/zhsja.png"; //综合
+import zhsjl from "@/assets/images/zhps/zhsjl.png"; //综合
+import qll from "@/assets/images/zhps/qll.png"; //桥梁
+import qln from "@/assets/images/zhps/qln.png"; //桥梁
+import sdl from "@/assets/images/zhps/sdl.png"; //隧道
+import sda from "@/assets/images/zhps/sda.png"; //隧道
 
-import bus from '@/bus';
+import bus from "@/bus";
 const showPanel = ref(true); //面板展开收起
 // 面板内容展开收起控制
 const props = defineProps({
@@ -48,66 +61,66 @@
     type: Boolean,
   },
 });
-const angleviewList = ref([
-  {
-    name: '综合视角',
-    img: zhsja,
-    Limg: zhsjl,
-    lonlat: [109.478, 36.606],
-    zoom: 14,
-    bearing: 0,
-    pitch: 55,
-  },
-  {
-    name: '桥梁视角',
-    img: qln,
-    Limg: qll,
-    lonlat: [109.4716, 36.6064],
-    zoom: 18,
-    bearing: 300,
-    pitch: 45,
-  },
-  {
-    name: '隧道视角',
-    img: sda,
-    Limg: sdl,
-    lonlat: [109.4636, 36.6134],
-    zoom: 18,
-    bearing: 30,
-    pitch: 45,
-  },
-]);
-const activedname = ref('综合视角');
-// 点击事件
-function categoryclick(val) {
-  console.log(val.name, '1');
-  activedname.value = val.name;
-  if (activedname.value == '综合视角') {
-    console.log('综合视角');
-    newfiberMapbox.map.easeTo({
-      center: val.lonlat,
-      zoom: val.zoom,
-      bearing: val.bearing,
-      pitch: val.pitch,
-    });
-  } else if (activedname.value == '桥梁视角') {
-    console.log('桥梁视角');
-    newfiberMapbox.map.easeTo({
-      center: val.lonlat,
-      zoom: val.zoom,
-      bearing: val.bearing,
-      pitch: val.pitch,
-    });
-  } else {
-    console.log('隧道视角');
-    newfiberMapbox.map.easeTo({
-      center: val.lonlat,
-      zoom: val.zoom,
-      bearing: val.bearing,
-      pitch: val.pitch,
-    });
-  }
-}
+// const angleviewList = ref([
+//   {
+//     name: '综合视角',
+//     img: zhsja,
+//     Limg: zhsjl,
+//     lonlat: [109.478, 36.606],
+//     zoom: 14,
+//     bearing: 0,
+//     pitch: 55,
+//   },
+//   {
+//     name: '桥梁视角',
+//     img: qln,
+//     Limg: qll,
+//     lonlat: [109.4716, 36.6064],
+//     zoom: 18,
+//     bearing: 300,
+//     pitch: 45,
+//   },
+//   {
+//     name: '隧道视角',
+//     img: sda,
+//     Limg: sdl,
+//     lonlat: [109.4636, 36.6134],
+//     zoom: 18,
+//     bearing: 30,
+//     pitch: 45,
+//   },
+// ]);
+// const activedname = ref('综合视角');
+// // 点击事件
+// function categoryclick(val) {
+//   console.log(val.name, '1');
+//   activedname.value = val.name;
+//   if (activedname.value == '综合视角') {
+//     console.log('综合视角');
+//     newfiberMapbox.map.easeTo({
+//       center: val.lonlat,
+//       zoom: val.zoom,
+//       bearing: val.bearing,
+//       pitch: val.pitch,
+//     });
+//   } else if (activedname.value == '桥梁视角') {
+//     console.log('桥梁视角');
+//     newfiberMapbox.map.easeTo({
+//       center: val.lonlat,
+//       zoom: val.zoom,
+//       bearing: val.bearing,
+//       pitch: val.pitch,
+//     });
+//   } else {
+//     console.log('隧道视角');
+//     newfiberMapbox.map.easeTo({
+//       center: val.lonlat,
+//       zoom: val.zoom,
+//       bearing: val.bearing,
+//       pitch: val.pitch,
+//     });
+//   }
+// }
 watch(
   () => props.showPanel,
   () => {
@@ -119,24 +132,24 @@
   // activedname.value = '综合视角';
   let initeGLTimer = setInterval(() => {
     if (!newfiberMapbox) return;
-    if (!newfiberMapbox.map.getLayer('buildingLayer')) return;
+    if (!newfiberMapbox.map.getLayer("buildingLayer")) return;
     newfiberMapbox.map.easeTo({
       center: [109.478, 36.606],
       zoom: 14,
     });
     const layer = new mapboxL7.LineLayer({
-      name: 'testProjection',
+      name: "testProjection",
     })
       .source(testProjection)
       .size(30)
-      .shape('wall')
+      .shape("wall")
       .style({
         opacity: 0.8,
-        sourceColor: '#fe7285',
-        targetColor: 'rbga(255,255,255, 0)',
+        sourceColor: "#fe7285",
+        targetColor: "rbga(255,255,255, 0)",
       });
     newfiberMapbox.addLayer(layer);
-    mapBoxVectorLayer.addGeojsonSymbol('testProjection', testProjectionLabel, xtb_img);
+    mapBoxVectorLayer.addGeojsonSymbol("testProjection", testProjectionLabel, xtb_img);
     // setTimeout(() => {
     //   newfiberMapbox.map.moveLayer("buildingLayer", "testProjection");
     // }, 1000);
@@ -150,12 +163,12 @@
   }, 100);
 });
 onBeforeUnmount(() => {
-  bus.emit('SetLayerShow', ['蓝色地图']);
-  mapBoxVectorLayer.removeByIds(['clickPoint']);
-  bus.emit('closeCesiumPopup');
-  if (newfiberMapbox.getLayerByName('testProjection')) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
-    mapBoxVectorLayer.removeByIds(['testProjection']);
+  bus.emit("SetLayerShow", ["蓝色地图"]);
+  mapBoxVectorLayer.removeByIds(["clickPoint"]);
+  bus.emit("closeCesiumPopup");
+  if (newfiberMapbox.getLayerByName("testProjection")) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("testProjection"));
+    mapBoxVectorLayer.removeByIds(["testProjection"]);
   }
 });
 </script>
@@ -169,7 +182,11 @@
     left: 10px;
     top: 70px;
     // background: url('@/assets/images/LeftContent.png') no-repeat;
-    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
+    background: linear-gradient(
+      0deg,
+      rgba(0, 43, 67, 0.8) 0%,
+      rgba(0, 76, 118, 0.8) 100%
+    );
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-shadow: inset 0 0 5px 5px #47eef38a;
@@ -181,7 +198,11 @@
     right: 10px;
     top: 70px;
     // background: url('@/assets/images/rightContent.png') no-repeat;
-    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
+    background: linear-gradient(
+      0deg,
+      rgba(0, 43, 67, 0.8) 0%,
+      rgba(0, 76, 118, 0.8) 100%
+    );
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-shadow: inset 0 0 5px 5px #47eef38a;
@@ -196,7 +217,11 @@
     .zzsj {
       width: 105px;
       height: 36px;
-      background: linear-gradient(0deg, rgba(126, 158, 166, 0.2) 0%, rgba(126, 158, 166, 0.8) 100%);
+      background: linear-gradient(
+        0deg,
+        rgba(126, 158, 166, 0.2) 0%,
+        rgba(126, 158, 166, 0.8) 100%
+      );
       border-radius: 2px;
       text-align: center;
       align-items: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 83e9789..6e34f7b 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -89,6 +89,13 @@
         :ShowTuCheng="ShowTuCheng"
         :showPanel="showPanel"
       ></LayerControl>
+      <!-- 四色图图例 -->
+      <img
+        id="SiSeTu"
+        src="@/assets/images/Sponge_screen/SiSeTu.png"
+        :class="[showPanel ? 'SiSeTuTrue' : 'SiSeTuFalse']"
+        v-if="AllData.SiSeTuBol"
+      />
       <!-- 1:总体概览 -->
       <ComZTGL
         v-if="AllData.ComShowID == 1"
@@ -274,12 +281,12 @@
 // 前端共同弹窗
 import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
 // 左右滑动
-import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
-import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
-import xtb_img from '@/assets/newImgs/selectedLocation.png';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
+import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
+import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
+import xtb_img from "@/assets/newImgs/selectedLocation.png";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
 // 公共弹窗保存的数据
-import dialogTabsStore from '@/store/modules/dialogTabs';
+import dialogTabsStore from "@/store/modules/dialogTabs";
 
 const useDialogTabs = dialogTabsStore();
 
@@ -297,6 +304,7 @@
 const showPanel2 = ref(false);
 const ShowTuCheng = ref(false); //图层面板显隐
 const AllData = reactive({
+  SiSeTuBol: false, //四色图图例
   MapShowBol: true, //是否展示中心地图
   MenuListData: [
     // {
@@ -493,7 +501,7 @@
     dialogConfig.getSiteId = params.getSiteId;
     dialogConfig.SiteNo = params.SiteNo;
     dialogConfig.RefName = params.RefName;
-    dialogConfig.title = params.title ?? '详情';
+    dialogConfig.title = params.title ?? "详情";
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
@@ -529,6 +537,10 @@
   bus.on("changeShowPanel", (params) => {
     showPanel.value = params;
   });
+  // 四色图图例显示隐藏
+  bus.on("SiSeTuBol", (params) => {
+    SiSeTuBol.value = params;
+  });
 });
 onBeforeUnmount(() => {
   bus.off("BottomHidden");
@@ -538,12 +550,14 @@
   bus.off("ChangeZhuanTiTu");
   bus.off("checkRainL");
   bus.off("changeShowPanel");
+  bus.off("SiSeTuBol");
 });
 // 菜单点击
 const MenuClick = (item, index) => {
   ShowTuCheng.value = false;
   showRainFlow.value = false;
   showPanel.value = false;
+  SiSeTuBol.value = false;
   // 改变菜单选中索引
   AllData.AC_MenuIndex = item.id;
   // 二级也选中一级菜单默认展示的那个
@@ -565,6 +579,7 @@
 const ErJiMenuClick = (item, item2) => {
   ShowTuCheng.value = false;
   showRainFlow.value = false;
+  SiSeTuBol.value = false;
   console.log(22);
   // 改变菜单选中索引
   AllData.AC_MenuIndex = item.id;
@@ -743,11 +758,11 @@
 };
 
 // 公共弹窗关闭后事件
-const handleClosed =()=>{
-  console.log('clear all');
-  
-  useDialogTabs.clear()
-}
+const handleClosed = () => {
+  console.log("clear all");
+
+  useDialogTabs.clear();
+};
 </script>
 
 <style lang="scss" scoped>
@@ -884,6 +899,22 @@
       transform: translateX(0px);
       transition: all 1s ease;
     }
+
+    #SiSeTu {
+      width: 37px;
+      height: 126px;
+      position: absolute;
+      right: 490px;
+      bottom: 100px;
+    }
+    .SiSeTuTrue {
+      transform: translateX(490px);
+      transition: all 1s ease;
+    }
+    .SiSeTuFalse {
+      transform: translateX(10px);
+      transition: all 1s ease;
+    }
     #ShowComVs {
       position: absolute;
       left: 0px;