diff --git a/src/assets/images/zhps/qll.png b/src/assets/images/zhps/qll.png
new file mode 100644
index 0000000..1862a7c
--- /dev/null
+++ b/src/assets/images/zhps/qll.png
Binary files differ

diff --git a/src/assets/images/zhps/qll.png b/src/assets/images/zhps/qll.png
new file mode 100644
index 0000000..1862a7c
--- /dev/null
+++ b/src/assets/images/zhps/qll.png
Binary files differ
diff --git a/src/assets/images/zhps/qln.png b/src/assets/images/zhps/qln.png
new file mode 100644
index 0000000..b8bffb1
--- /dev/null
+++ b/src/assets/images/zhps/qln.png
Binary files differ

diff --git a/src/assets/images/zhps/qll.png b/src/assets/images/zhps/qll.png
new file mode 100644
index 0000000..1862a7c
--- /dev/null
+++ b/src/assets/images/zhps/qll.png
Binary files differ
diff --git a/src/assets/images/zhps/qln.png b/src/assets/images/zhps/qln.png
new file mode 100644
index 0000000..b8bffb1
--- /dev/null
+++ b/src/assets/images/zhps/qln.png
Binary files differ
diff --git a/src/assets/images/zhps/sda.png b/src/assets/images/zhps/sda.png
new file mode 100644
index 0000000..8e8230d
--- /dev/null
+++ b/src/assets/images/zhps/sda.png
Binary files differ

diff --git a/src/assets/images/zhps/qll.png b/src/assets/images/zhps/qll.png
new file mode 100644
index 0000000..1862a7c
--- /dev/null
+++ b/src/assets/images/zhps/qll.png
Binary files differ
diff --git a/src/assets/images/zhps/qln.png b/src/assets/images/zhps/qln.png
new file mode 100644
index 0000000..b8bffb1
--- /dev/null
+++ b/src/assets/images/zhps/qln.png
Binary files differ
diff --git a/src/assets/images/zhps/sda.png b/src/assets/images/zhps/sda.png
new file mode 100644
index 0000000..8e8230d
--- /dev/null
+++ b/src/assets/images/zhps/sda.png
Binary files differ
diff --git a/src/assets/images/zhps/sdl.png b/src/assets/images/zhps/sdl.png
new file mode 100644
index 0000000..cf84f69
--- /dev/null
+++ b/src/assets/images/zhps/sdl.png
Binary files differ

diff --git a/src/assets/images/zhps/qll.png b/src/assets/images/zhps/qll.png
new file mode 100644
index 0000000..1862a7c
--- /dev/null
+++ b/src/assets/images/zhps/qll.png
Binary files differ
diff --git a/src/assets/images/zhps/qln.png b/src/assets/images/zhps/qln.png
new file mode 100644
index 0000000..b8bffb1
--- /dev/null
+++ b/src/assets/images/zhps/qln.png
Binary files differ
diff --git a/src/assets/images/zhps/sda.png b/src/assets/images/zhps/sda.png
new file mode 100644
index 0000000..8e8230d
--- /dev/null
+++ b/src/assets/images/zhps/sda.png
Binary files differ
diff --git a/src/assets/images/zhps/sdl.png b/src/assets/images/zhps/sdl.png
new file mode 100644
index 0000000..cf84f69
--- /dev/null
+++ b/src/assets/images/zhps/sdl.png
Binary files differ
diff --git a/src/assets/images/zhps/zhsja.png b/src/assets/images/zhps/zhsja.png
new file mode 100644
index 0000000..f2aa1a7
--- /dev/null
+++ b/src/assets/images/zhps/zhsja.png
Binary files differ

diff --git a/src/assets/images/zhps/qll.png b/src/assets/images/zhps/qll.png
new file mode 100644
index 0000000..1862a7c
--- /dev/null
+++ b/src/assets/images/zhps/qll.png
Binary files differ
diff --git a/src/assets/images/zhps/qln.png b/src/assets/images/zhps/qln.png
new file mode 100644
index 0000000..b8bffb1
--- /dev/null
+++ b/src/assets/images/zhps/qln.png
Binary files differ
diff --git a/src/assets/images/zhps/sda.png b/src/assets/images/zhps/sda.png
new file mode 100644
index 0000000..8e8230d
--- /dev/null
+++ b/src/assets/images/zhps/sda.png
Binary files differ
diff --git a/src/assets/images/zhps/sdl.png b/src/assets/images/zhps/sdl.png
new file mode 100644
index 0000000..cf84f69
--- /dev/null
+++ b/src/assets/images/zhps/sdl.png
Binary files differ
diff --git a/src/assets/images/zhps/zhsja.png b/src/assets/images/zhps/zhsja.png
new file mode 100644
index 0000000..f2aa1a7
--- /dev/null
+++ b/src/assets/images/zhps/zhsja.png
Binary files differ
diff --git a/src/assets/images/zhps/zhsjl.png b/src/assets/images/zhps/zhsjl.png
new file mode 100644
index 0000000..47b2642
--- /dev/null
+++ b/src/assets/images/zhps/zhsjl.png
Binary files differ

diff --git a/src/assets/images/zhps/qll.png b/src/assets/images/zhps/qll.png
new file mode 100644
index 0000000..1862a7c
--- /dev/null
+++ b/src/assets/images/zhps/qll.png
Binary files differ
diff --git a/src/assets/images/zhps/qln.png b/src/assets/images/zhps/qln.png
new file mode 100644
index 0000000..b8bffb1
--- /dev/null
+++ b/src/assets/images/zhps/qln.png
Binary files differ
diff --git a/src/assets/images/zhps/sda.png b/src/assets/images/zhps/sda.png
new file mode 100644
index 0000000..8e8230d
--- /dev/null
+++ b/src/assets/images/zhps/sda.png
Binary files differ
diff --git a/src/assets/images/zhps/sdl.png b/src/assets/images/zhps/sdl.png
new file mode 100644
index 0000000..cf84f69
--- /dev/null
+++ b/src/assets/images/zhps/sdl.png
Binary files differ
diff --git a/src/assets/images/zhps/zhsja.png b/src/assets/images/zhps/zhsja.png
new file mode 100644
index 0000000..f2aa1a7
--- /dev/null
+++ b/src/assets/images/zhps/zhsja.png
Binary files differ
diff --git a/src/assets/images/zhps/zhsjl.png b/src/assets/images/zhps/zhsjl.png
new file mode 100644
index 0000000..47b2642
--- /dev/null
+++ b/src/assets/images/zhps/zhsjl.png
Binary files differ
diff --git a/src/views/oneMap/components/ZTGL.vue b/src/views/oneMap/components/ZTGL.vue
index fb6b624..b91ebd1 100644
--- a/src/views/oneMap/components/ZTGL.vue
+++ b/src/views/oneMap/components/ZTGL.vue
@@ -1,36 +1,46 @@
 <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">
+      <div
+        class="zzsj flex flex-justcontent-spacebetween"
+        v-for="(item, index) in angleviewList"
+        :class="activedname == item.name ? 'activedright' : ''"
+        @click="categoryclick(item, index)"
+      >
+        <div class="ImgB">
+          <img :src="item.Limg" alt="" v-if="activedname == item.name" />
+          <img :src="item.img" alt="" v-else />
+        </div>
+        <div class="angleview">{{ item.name }}</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 bus from "@/bus";
+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 bus from '@/bus';
 const showPanel = ref(true); //面板展开收起
 // 面板内容展开收起控制
 const props = defineProps({
@@ -38,6 +48,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,
+    });
+  }
+}
 watch(
   () => props.showPanel,
   () => {
@@ -46,26 +116,27 @@
   { immediate: true }
 );
 onMounted(() => {
+  // 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);
@@ -79,10 +150,10 @@
   }, 100);
 });
 onBeforeUnmount(() => {
-  bus.emit("SetLayerShow", ["蓝色地图"]);
-  if (newfiberMapbox.getLayerByName("testProjection")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("testProjection"));
-    mapBoxVectorLayer.removeByIds(["testProjection"]);
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (newfiberMapbox.getLayerByName('testProjection')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
+    mapBoxVectorLayer.removeByIds(['testProjection']);
   }
 });
 </script>
@@ -96,11 +167,7 @@
     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;
@@ -112,14 +179,54 @@
     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;
   }
+  .PerspectiveControl {
+    height: 120px;
+    width: 105px;
+    // background: red;
+    position: absolute;
+    bottom: 100px;
+    left: 480px;
+    .zzsj {
+      width: 105px;
+      height: 36px;
+      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;
+      margin-top: 5px;
+      cursor: pointer;
+
+      .ImgB {
+        width: 20px;
+        height: 20px;
+        // background: url('@/assets/images/zhps/zhsja.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        margin-left: 8px;
+      }
+
+      .angleview {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 15px;
+        color: #c7d7db;
+        margin-right: 10px;
+      }
+    }
+    .activedright {
+      background: linear-gradient(0deg, rgba(16, 173, 211, 0.4) 0%, #10add3 100%);
+      border-radius: 2px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 14px;
+      color: #16f7ff;
+    }
+  }
 }
 </style>