diff --git a/src/views/DialogTabs/component/streetscape.vue b/src/views/DialogTabs/component/streetscape.vue
index 2db4a7d..24477a2 100644
--- a/src/views/DialogTabs/component/streetscape.vue
+++ b/src/views/DialogTabs/component/streetscape.vue
@@ -1,13 +1,22 @@
 <template>
-  <div id="streetscape"></div>
+  <div id="streetscape">
+    <el-carousel height="150px" style="z-index: 999">
+      <el-carousel-item v-for="item in AllData.poiImages" :key="item">
+        <img :src="item.imagesUrl" />
+      </el-carousel-item>
+    </el-carousel>
+  </div>
 </template>
 
 <script setup name="streetscape">
 import { ref, reactive, toRefs, onMounted, nextTick } from 'vue';
 import bus from '@/bus';
+import request from '@/utils/request';
 const { proxy } = getCurrentInstance();
 const AllData = reactive({
   panorama: null,
+  poiCircle: null,
+  poiImages: [],
 });
 // 初始化街景地图
 const initePanoramaMap = () => {
@@ -23,6 +32,46 @@
     navigationControl: true, // 隐藏导航控件，默认true
   });
 };
+//根据中心点查找poi
+const searchPoiByLonlat = async () => {
+  let poiData = await request({
+    url: `/bdApi/baiduservice/placeSearch`,
+    method: 'GET',
+    params: {
+      location: `${AllData.poiCircle[1]},${AllData.poiCircle[0]}`,
+      radius: 200,
+      query: '公交站$商场$著名景点$学校',
+    },
+  });
+  if (poiData & poiData.data.length) {
+    console.log('poiData---', poiData);
+    element.image = getStreetImg([element.location.lng, element.location.lat]);
+    poiData.data.forEach(element => {
+      AllData.poiImages.push({
+        name: element.name,
+        lonlat: [element.location.lng, element.location.lat],
+        imagesUrl: element.image,
+      });
+    });
+  }
+};
+//获取全景静态图
+const getStreetImg = async lonlat => {
+  let data = await request({
+    url: `/bdApi/baiduservice/panorama`,
+    method: 'GET',
+    params: {
+      location: `${lonlat[0]},${lonlat[1]}`,
+      fov: 180,
+      height: 256,
+      width: 512,
+    },
+  });
+  if (data && data.data) {
+    data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
+    return data.data.base64;
+  }
+};
 onMounted(() => {
   initePanoramaMap();
   // AllData.panorama.addEventListener('position_changed', function (pos) {
@@ -33,9 +82,11 @@
     console.log('streetPosition---', e);
     let position_Street = turf.point(e);
     gcoord.transform(position_Street, gcoord.WGS84, gcoord.BD09);
+    AllData.poiCircle = position_Street.geometry.coordinates;
     AllData.panorama.setPosition(
       new BMapGL.Point(position_Street.geometry.coordinates[0], position_Street.geometry.coordinates[1])
     );
+    searchPoiByLonlat();
     gcoord.transform(position_Street, gcoord.BD09, gcoord.WGS84);
   });
 });

diff --git a/src/views/DialogTabs/component/streetscape.vue b/src/views/DialogTabs/component/streetscape.vue
index 2db4a7d..24477a2 100644
--- a/src/views/DialogTabs/component/streetscape.vue
+++ b/src/views/DialogTabs/component/streetscape.vue
@@ -1,13 +1,22 @@
 <template>
-  <div id="streetscape"></div>
+  <div id="streetscape">
+    <el-carousel height="150px" style="z-index: 999">
+      <el-carousel-item v-for="item in AllData.poiImages" :key="item">
+        <img :src="item.imagesUrl" />
+      </el-carousel-item>
+    </el-carousel>
+  </div>
 </template>
 
 <script setup name="streetscape">
 import { ref, reactive, toRefs, onMounted, nextTick } from 'vue';
 import bus from '@/bus';
+import request from '@/utils/request';
 const { proxy } = getCurrentInstance();
 const AllData = reactive({
   panorama: null,
+  poiCircle: null,
+  poiImages: [],
 });
 // 初始化街景地图
 const initePanoramaMap = () => {
@@ -23,6 +32,46 @@
     navigationControl: true, // 隐藏导航控件，默认true
   });
 };
+//根据中心点查找poi
+const searchPoiByLonlat = async () => {
+  let poiData = await request({
+    url: `/bdApi/baiduservice/placeSearch`,
+    method: 'GET',
+    params: {
+      location: `${AllData.poiCircle[1]},${AllData.poiCircle[0]}`,
+      radius: 200,
+      query: '公交站$商场$著名景点$学校',
+    },
+  });
+  if (poiData & poiData.data.length) {
+    console.log('poiData---', poiData);
+    element.image = getStreetImg([element.location.lng, element.location.lat]);
+    poiData.data.forEach(element => {
+      AllData.poiImages.push({
+        name: element.name,
+        lonlat: [element.location.lng, element.location.lat],
+        imagesUrl: element.image,
+      });
+    });
+  }
+};
+//获取全景静态图
+const getStreetImg = async lonlat => {
+  let data = await request({
+    url: `/bdApi/baiduservice/panorama`,
+    method: 'GET',
+    params: {
+      location: `${lonlat[0]},${lonlat[1]}`,
+      fov: 180,
+      height: 256,
+      width: 512,
+    },
+  });
+  if (data && data.data) {
+    data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
+    return data.data.base64;
+  }
+};
 onMounted(() => {
   initePanoramaMap();
   // AllData.panorama.addEventListener('position_changed', function (pos) {
@@ -33,9 +82,11 @@
     console.log('streetPosition---', e);
     let position_Street = turf.point(e);
     gcoord.transform(position_Street, gcoord.WGS84, gcoord.BD09);
+    AllData.poiCircle = position_Street.geometry.coordinates;
     AllData.panorama.setPosition(
       new BMapGL.Point(position_Street.geometry.coordinates[0], position_Street.geometry.coordinates[1])
     );
+    searchPoiByLonlat();
     gcoord.transform(position_Street, gcoord.BD09, gcoord.WGS84);
   });
 });
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 2bdf6b8..1154f6d 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -1,10 +1,6 @@
 <template>
   <Transition name="slideTC">
-    <div
-      class="LayerControl"
-      v-show="ShowTuCheng"
-      :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
-    >
+    <div class="LayerControl" v-show="ShowTuCheng" :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']">
       <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
         <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
         <!-- <Transition name="Group"> -->
@@ -34,30 +30,30 @@
 </template>
 
 <script setup name="LayerControl">
-import { ref, reactive, toRefs, onMounted } from "vue";
+import { ref, reactive, toRefs, onMounted } from 'vue';
 // 图层控制icon引入
-import { requireTuChengImg } from "@/utils/util";
-import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
-import yanAnRoad from "@/assets/yanAnRoad.json";
-import yanAnWater from "@/assets/yanAnWater.json";
-import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
-import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
-import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
-import yanAnYiLao from "@/assets/yanAnYiLao.json";
-import yanAnFengXian from "@/assets/yanAnFengXian.json";
-import yanAnPipeSupervise from "@/assets/yanAnPipeSupervise.json";
-import yanAnPKSupervise from "@/assets/yanAnPKSupervise.json";
-import yanAnNature from "@/assets/yanAnNature.json";
-import yanAnVideo from "@/assets/yanAnVideo.json";
-import yanAnMountain from "@/assets/yanAnMountain.json";
-import yanAnSmallWater from "@/assets/yanAnSmallWater.json";
-import yanAnRainArea from "@/assets/yanAnRainArea.json";
-import heDiJiaGu from "@/assets/heDiJiaGu.json";
-import heDiShuJun from "@/assets/heDiShuJun.json";
-import anXianGaiZao from "@/assets/anXianGaiZao.json";
-import bus from "@/bus";
-import axios from "axios";
-import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
+import { requireTuChengImg } from '@/utils/util';
+import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
+import yanAnRoad from '@/assets/yanAnRoad.json';
+import yanAnWater from '@/assets/yanAnWater.json';
+import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
+import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
+import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
+import yanAnYiLao from '@/assets/yanAnYiLao.json';
+import yanAnFengXian from '@/assets/yanAnFengXian.json';
+import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
+import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
+import yanAnNature from '@/assets/yanAnNature.json';
+import yanAnVideo from '@/assets/yanAnVideo.json';
+import yanAnMountain from '@/assets/yanAnMountain.json';
+import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
+import yanAnRainArea from '@/assets/yanAnRainArea.json';
+import heDiJiaGu from '@/assets/heDiJiaGu.json';
+import heDiShuJun from '@/assets/heDiShuJun.json';
+import anXianGaiZao from '@/assets/anXianGaiZao.json';
+import bus from '@/bus';
+import axios from 'axios';
+import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
 const AllData = reactive({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -70,216 +66,262 @@
    */
   LayerData: [
     {
-      title: "基本信息",
+      title: '基本信息',
       Show: true,
       children: [
         {
-          layerName: "蓝色地图",
-          layerKey: "blackMap",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
         },
         {
-          layerName: "白色地图",
-          layerKey: "whiteMap",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
         },
         {
-          layerName: "影像地图",
-          layerKey: "imageMap",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
         },
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          layerName: "三维建筑",
-          layerKey: "buildingLayer",
-          layerIcon: "",
+          layerName: '综合视角',
+          layerKey: 'zongHeView',
+          layerIcon: '',
+          layerVisible: true,
+          lonlat: [109.478, 36.606],
+          zoom: 14,
+          bearing: 0,
+          pitch: 55,
+        },
+        {
+          layerName: '燃气视角',
+          layerKey: 'ranQiView',
+          layerIcon: '',
+          layerVisible: false,
+          lonlat: [109.478, 36.606],
+          zoom: 11.5,
+          bearing: 40,
+          pitch: 55,
+        },
+        {
+          layerName: '桥梁视角',
+          layerKey: 'qiaoLiangView',
+          layerIcon: '',
+          layerVisible: false,
+          lonlat: [109.4716, 36.6064],
+          zoom: 18,
+          bearing: 300,
+          pitch: 45,
+        },
+        {
+          layerName: '隧道视角',
+          layerKey: 'suiDaoView',
+          layerIcon: '',
+          layerVisible: false,
+          lonlat: [109.4636, 36.6134],
+          zoom: 18,
+          bearing: 30,
+          pitch: 45,
+        },
+        {
+          layerName: '三维建筑',
+          layerKey: 'buildingLayer',
+          layerIcon: '',
           layerVisible: true,
         },
         {
-          layerName: "路网",
-          layerKey: "road",
-          layerIcon: "",
+          layerName: '仿真地图',
+          layerKey: 'fangZhenMap',
+          layerIcon: '',
+          layerVisible: false,
+        },
+        {
+          layerName: '路网',
+          layerKey: 'road',
+          layerIcon: '',
           layerVisible: true,
           dynamicLineData: yanAnRoad,
         },
         {
-          layerName: "河流水系",
-          layerKey: "waterLake",
-          layerIcon: "",
+          layerName: '河流水系',
+          layerKey: 'waterLake',
+          layerIcon: '',
           layerVisible: true,
           dynamicLineData: yanAnWater,
         },
         {
-          layerName: "防洪河道",
-          layerKey: "fangHongWater",
-          layerIcon: "",
+          layerName: '防洪河道',
+          layerKey: 'fangHongWater',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: yanAnSmallWater,
         },
         {
-          layerName: "河堤疏浚",
-          layerKey: "heDiShuJun",
-          layerIcon: "",
+          layerName: '河堤疏浚',
+          layerKey: 'heDiShuJun',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: heDiShuJun,
         },
         {
-          layerName: "河堤加固",
-          layerKey: "heDiJiaGu",
-          layerIcon: "",
+          layerName: '河堤加固',
+          layerKey: 'heDiJiaGu',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: heDiJiaGu,
         },
         {
-          layerName: "岸线改造",
-          layerKey: "anXianGaiZao",
-          layerIcon: "",
+          layerName: '岸线改造',
+          layerKey: 'anXianGaiZao',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: "河堤治理",
-          layerKey: "heDiZhiLi",
-          layerIcon: "",
+          layerName: '河堤治理',
+          layerKey: 'heDiZhiLi',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: "空间格局",
-          layerKey: "yanAnNature",
-          layerIcon: "",
+          layerName: '空间格局',
+          layerKey: 'yanAnNature',
+          layerIcon: '',
           layerVisible: false,
           areaData: yanAnNature,
         },
         {
-          layerName: "山体修复",
-          layerKey: "yanAnMountain",
-          layerIcon: "",
+          layerName: '山体修复',
+          layerKey: 'yanAnMountain',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: yanAnMountain,
         },
       ],
     },
     {
-      title: "燃气系统",
+      title: '燃气系统',
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "干管",
-          layerKey: "rq_SZLH",
+          layerName: '干管',
+          layerKey: 'rq_SZLH',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "干管流向",
-          layerKey: "sx_ya_smx_rq_line_sz",
+          layerName: '干管流向',
+          layerKey: 'sx_ya_smx_rq_line_sz',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "主管",
-          layerKey: "rq_TYLH",
+          layerName: '主管',
+          layerKey: 'rq_TYLH',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "主管流向",
-          layerKey: "sx_ya_smx_rq_line_zg",
+          layerName: '主管流向',
+          layerKey: 'sx_ya_smx_rq_line_zg',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "支管",
-          layerKey: "rq_LGLH",
+          layerName: '支管',
+          layerKey: 'rq_LGLH',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "支管流向",
-          layerKey: "sx_ya_smx_rq_line_zhig",
+          layerName: '支管流向',
+          layerKey: 'sx_ya_smx_rq_line_zhig',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "其他管网",
-          layerKey: "rq_other",
+          layerName: '其他管网',
+          layerKey: 'rq_other',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "调压器",
-          layerKey: "tiaoYaQi",
+          layerName: '调压器',
+          layerKey: 'tiaoYaQi',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "节点",
-          layerKey: "rq_jieDian",
+          layerName: '节点',
+          layerKey: 'rq_jieDian',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "极性保护",
-          layerKey: "jiXingBaoHu",
+          layerName: '极性保护',
+          layerKey: 'jiXingBaoHu',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "流量计",
-          layerKey: "rq_liuLiangJi",
+          layerName: '流量计',
+          layerKey: 'rq_liuLiangJi',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "未知设备",
-          layerKey: "rq_unknow",
+          layerName: '未知设备',
+          layerKey: 'rq_unknow',
           layerIcon: null,
           layerVisible: false,
         },
       ],
     },
     {
-      title: "雨水系统",
+      title: '雨水系统',
       Show: true,
       children: [
         {
-          layerName: "雨水分区",
-          layerKey: "rainArea",
+          layerName: '雨水分区',
+          layerKey: 'rainArea',
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnRainArea,
         },
         {
-          layerName: "排水分区",
-          layerKey: "paishuiArea",
+          layerName: '排水分区',
+          layerKey: 'paishuiArea',
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnPaiShuiArea,
         },
         {
-          layerName: "雨水管网",
-          layerKey: "ysLine1",
+          layerName: '雨水管网',
+          layerKey: 'ysLine1',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "雨水管网流向",
-          layerKey: "pipeline_info_flow_ys",
+          layerName: '雨水管网流向',
+          layerKey: 'pipeline_info_flow_ys',
           layerIcon: null,
           layerVisible: false,
         },
@@ -290,8 +332,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -299,24 +341,24 @@
       ],
     },
     {
-      title: "污水系统",
+      title: '污水系统',
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网流向",
-          layerKey: "pipeline_info_flow_ws1",
+          layerName: '污水管网流向',
+          layerKey: 'pipeline_info_flow_ws1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -333,8 +375,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -342,40 +384,40 @@
       ],
     },
     {
-      title: "感知设备",
+      title: '感知设备',
       Show: true,
       children: [
         {
-          layerName: "内涝易涝点",
-          layerKey: "yiLaoPoint",
+          layerName: '内涝易涝点',
+          layerKey: 'yiLaoPoint',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYiLao,
         },
         {
-          layerName: "内涝风险点",
-          layerKey: "fengXianPoint",
+          layerName: '内涝风险点',
+          layerKey: 'fengXianPoint',
           layerIcon: null,
           layerVisible: false,
           data: yanAnFengXian,
         },
         {
-          layerName: "排水管网监测",
-          layerKey: "pipeSupervise",
+          layerName: '排水管网监测',
+          layerKey: 'pipeSupervise',
           layerIcon: null,
           layerVisible: false,
           data: yanAnPipeSupervise,
         },
         {
-          layerName: "排水排口监测",
-          layerKey: "PKsupervise",
+          layerName: '排水排口监测',
+          layerKey: 'PKsupervise',
           layerIcon: null,
           layerVisible: false,
           data: yanAnPKSupervise,
         },
         {
-          layerName: "视频监测",
-          layerKey: "video",
+          layerName: '视频监测',
+          layerKey: 'video',
           layerIcon: null,
           layerVisible: false,
           data: yanAnVideo,
@@ -390,10 +432,10 @@
     .concat(AllData.LayerData[2].children)
     .concat(AllData.LayerData[3].children)
     .concat(AllData.LayerData[4].children);
-  initeLegend.forEach((element) => {
+  initeLegend.forEach(element => {
     element.layername = element.layerKey;
   });
-  bus.emit("setLegendData", initeLegend);
+  bus.emit('setLegendData', initeLegend);
 });
 const props = defineProps({
   ShowTuCheng: false,
@@ -403,98 +445,116 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = async (item2) => {
+const layerClick = async item2 => {
   item2.layerVisible = !item2.layerVisible;
   item2.isCheck = item2.layerVisible;
-  console.info(
-    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
-  );
-  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
-  if (item2.layerKey == "whiteMap") {
-    AllData.LayerData[0]["children"][0].layerVisible = false;
-    AllData.LayerData[0]["children"][2].layerVisible = false;
-    let { data } = await axios.get(
-      "/static/libs/mapbox/style/customs/whiteMapStyle.json"
-    );
+  console.info(`点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
+  bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
+  //切换视角
+  if (item2.layerName.includes('视角')) {
+    AllData.LayerData[0]['children'][4].layerVisible = false;
+    AllData.LayerData[0]['children'][5].layerVisible = false;
+    AllData.LayerData[0]['children'][6].layerVisible = false;
+    AllData.LayerData[0]['children'][7].layerVisible = false;
+    item2.layerVisible = !item2.layerVisible;
+    item2.isCheck = item2.layerVisible;
+    newfiberMapbox.map.easeTo({
+      center: item2.lonlat,
+      zoom: item2.zoom,
+      bearing: item2.bearing,
+      pitch: item2.pitch,
+    });
+    if (item2.layerName == '燃气视角') {
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_sz', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_zg', isCheck: true });
+    } else {
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_sz', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_zg', isCheck: false });
+    }
+  }
+  //切换地图
+  if (item2.layerKey == 'whiteMap') {
+    AllData.LayerData[0]['children'][0].layerVisible = false;
+    AllData.LayerData[0]['children'][2].layerVisible = false;
+    let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach((layer) => {
+    oldMapStyle.layers.forEach(layer => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map((i) => i.id);
-    oldIds.forEach((id) => {
+    let newIds = data.layers.map(i => i.id);
+    oldIds.forEach(id => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach((key) =>
-        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
-      );
-      Object.keys(layer.paint || {}).forEach((key) =>
-        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
-      );
+      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
+      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
     });
-    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
+    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
   }
-  if (item2.layerKey == "blackMap") {
-    AllData.LayerData[0]["children"][1].layerVisible = false;
-    AllData.LayerData[0]["children"][2].layerVisible = false;
-    let { data } = await axios.get("/static/libs/mapbox/style/customs/night-style.json");
+  if (item2.layerKey == 'blackMap') {
+    AllData.LayerData[0]['children'][1].layerVisible = false;
+    AllData.LayerData[0]['children'][2].layerVisible = false;
+    let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach((layer) => {
+    oldMapStyle.layers.forEach(layer => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map((i) => i.id);
-    oldIds.forEach((id) => {
+    let newIds = data.layers.map(i => i.id);
+    oldIds.forEach(id => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach((key) =>
-        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
-      );
-      Object.keys(layer.paint || {}).forEach((key) =>
-        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
-      );
+      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
+      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
     });
-    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
+    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
   }
-  if (item2.layerKey == "imageMap") {
-    AllData.LayerData[0]["children"][0].layerVisible = false;
-    AllData.LayerData[0]["children"][1].layerVisible = false;
-    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "visible");
-    newfiberMapbox.map.moveLayer("newfiber-XYZLayer", "buildingLayer");
+  if (item2.layerKey == 'imageMap') {
+    AllData.LayerData[0]['children'][0].layerVisible = false;
+    AllData.LayerData[0]['children'][1].layerVisible = false;
+    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
+    newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer');
   }
+  //分区类图层
   if (item2.areaData) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
     }
   }
-  if (item2.layerKey == "buildingLayer") {
+  //三维建筑
+  if (item2.layerKey == 'buildingLayer') {
     if (item2.isCheck) {
-      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "visible");
+      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
     } else {
-      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "none");
+      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
     }
   }
+  //河堤岸线
   if (item2.lineWithLabel) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
-      if (item2.layerKey == "fangHongWater") {
+      if (item2.layerKey == 'fangHongWater') {
         let layer = new mapboxL7.LineLayer({
-          name: "fangHongWater",
+          name: 'fangHongWater',
         })
           .source(item2.lineWithLabel)
           .size(3)
-          .shape("line")
-          .texture("arrow")
-          .color("rgba(243, 26, 237,1)")
+          .shape('line')
+          .texture('arrow')
+          .color('rgba(243, 26, 237,1)')
           .animate({
             interval: 2, // 间隔
             duration: 3, // 持续时间，延时
@@ -505,29 +565,30 @@
             lineTexture: true, // 开启线的贴图功能
             iconStep: 200, // 设置贴图纹理的间距
             borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-            borderColor: "#fff", // 默认为 #ccc
+            borderColor: '#fff', // 默认为 #ccc
           });
         newfiberMapbox.addLayer(layer);
       }
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
-      if (newfiberMapbox.getLayerByName("fangHongWater")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("fangHongWater"));
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
+      if (newfiberMapbox.getLayerByName('fangHongWater')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
       }
     }
   }
-  if (item2.layerKey == "road") {
+  //路网
+  if (item2.layerKey == 'road') {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
+      if (newfiberMapbox.getLayerByName('dynamicRoad')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
       }
       let layer = new mapboxL7.LineLayer({
-        name: "dynamicRoad",
+        name: 'dynamicRoad',
       })
         .source(item2.dynamicLineData)
         .size(1.3)
-        .shape("line")
-        .color("rgb(184, 184, 184)")
+        .shape('line')
+        .color('rgb(184, 184, 184)')
         .animate({
           interval: 1, // 间隔
           duration: 1.5, // 持续时间，延时
@@ -538,22 +599,23 @@
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
     }
   }
-  if (item2.layerKey == "waterLake") {
+  //水系
+  if (item2.layerKey == 'waterLake') {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName("waterLake")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
+      if (newfiberMapbox.getLayerByName('waterLake')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
       }
       let layer = new mapboxL7.LineLayer({
-        name: "waterLake",
+        name: 'waterLake',
       })
         .source(item2.dynamicLineData)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("aqua")
+        .shape('line')
+        .texture('arrow')
+        .color('aqua')
         .animate({
           interval: 2, // 间隔
           duration: 3, // 持续时间，延时
@@ -564,29 +626,38 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 200, // 设置贴图纹理的间距
           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
     }
   }
-  if (item2.layerKey == "centerCity") {
+  //仿真地图
+  if (item2.layerKey == 'fangZhenMap') {
     if (item2.isCheck) {
-      mapBoxVectorLayer.addGeojsonLine("centerCity", item2.dynamicLineData, 4, 1, 0.5);
+      mapBoxVectorLayer.load3DTiles();
     } else {
-      mapBoxVectorLayer.removeByIds(["centerCity"]);
+      mapBoxVectorLayer.remove3Dtiles();
+    }
+  }
+  //中心城区
+  if (item2.layerKey == 'centerCity') {
+    if (item2.isCheck) {
+      mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
+    } else {
+      mapBoxVectorLayer.removeByIds(['centerCity']);
     }
   }
 };
 onMounted(() => {
   // 清除所有的图层选中
-  bus.on("clearAllLayer", () => {
-    AllData.LayerData.forEach((data) => {
-      data.children.map((item) => {
+  bus.on('clearAllLayer', () => {
+    AllData.LayerData.forEach(data => {
+      data.children.map(item => {
         // item.layerVisible = true;
         // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
-        item.layerVisible ? layerClick(item) : "";
+        item.layerVisible ? layerClick(item) : '';
       });
     });
   });
@@ -594,17 +665,17 @@
   /**控制图层的显示
    *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
    */
-  bus.on("SetLayerShow", (LayerArraya) => {
-    AllData.LayerData.forEach((data) => {
-      data.children.map((item) => {
-        LayerArraya.includes(item.layerName) ? layerClick(item) : "";
+  bus.on('SetLayerShow', LayerArraya => {
+    AllData.LayerData.forEach(data => {
+      data.children.map(item => {
+        LayerArraya.includes(item.layerName) ? layerClick(item) : '';
       });
     });
   });
 });
 onBeforeUnmount(() => {
-  bus.off("clearAllLayer");
-  bus.off("SetLayerShow");
+  bus.off('clearAllLayer');
+  bus.off('SetLayerShow');
 });
 </script>
 
@@ -615,7 +686,7 @@
   position: absolute;
   top: 150px;
   right: 476px;
-  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
+  background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
   background-size: contain;
   box-sizing: border-box;
   padding: 25px 0px;
@@ -631,7 +702,7 @@
       width: 190px;
       height: 25px;
       line-height: 25px;
-      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
+      background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
         linear-gradient(to right, #1c899600, #1c8996, #1c899600);
       background-repeat: no-repeat;
       background-position: center;

diff --git a/src/views/DialogTabs/component/streetscape.vue b/src/views/DialogTabs/component/streetscape.vue
index 2db4a7d..24477a2 100644
--- a/src/views/DialogTabs/component/streetscape.vue
+++ b/src/views/DialogTabs/component/streetscape.vue
@@ -1,13 +1,22 @@
 <template>
-  <div id="streetscape"></div>
+  <div id="streetscape">
+    <el-carousel height="150px" style="z-index: 999">
+      <el-carousel-item v-for="item in AllData.poiImages" :key="item">
+        <img :src="item.imagesUrl" />
+      </el-carousel-item>
+    </el-carousel>
+  </div>
 </template>
 
 <script setup name="streetscape">
 import { ref, reactive, toRefs, onMounted, nextTick } from 'vue';
 import bus from '@/bus';
+import request from '@/utils/request';
 const { proxy } = getCurrentInstance();
 const AllData = reactive({
   panorama: null,
+  poiCircle: null,
+  poiImages: [],
 });
 // 初始化街景地图
 const initePanoramaMap = () => {
@@ -23,6 +32,46 @@
     navigationControl: true, // 隐藏导航控件，默认true
   });
 };
+//根据中心点查找poi
+const searchPoiByLonlat = async () => {
+  let poiData = await request({
+    url: `/bdApi/baiduservice/placeSearch`,
+    method: 'GET',
+    params: {
+      location: `${AllData.poiCircle[1]},${AllData.poiCircle[0]}`,
+      radius: 200,
+      query: '公交站$商场$著名景点$学校',
+    },
+  });
+  if (poiData & poiData.data.length) {
+    console.log('poiData---', poiData);
+    element.image = getStreetImg([element.location.lng, element.location.lat]);
+    poiData.data.forEach(element => {
+      AllData.poiImages.push({
+        name: element.name,
+        lonlat: [element.location.lng, element.location.lat],
+        imagesUrl: element.image,
+      });
+    });
+  }
+};
+//获取全景静态图
+const getStreetImg = async lonlat => {
+  let data = await request({
+    url: `/bdApi/baiduservice/panorama`,
+    method: 'GET',
+    params: {
+      location: `${lonlat[0]},${lonlat[1]}`,
+      fov: 180,
+      height: 256,
+      width: 512,
+    },
+  });
+  if (data && data.data) {
+    data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
+    return data.data.base64;
+  }
+};
 onMounted(() => {
   initePanoramaMap();
   // AllData.panorama.addEventListener('position_changed', function (pos) {
@@ -33,9 +82,11 @@
     console.log('streetPosition---', e);
     let position_Street = turf.point(e);
     gcoord.transform(position_Street, gcoord.WGS84, gcoord.BD09);
+    AllData.poiCircle = position_Street.geometry.coordinates;
     AllData.panorama.setPosition(
       new BMapGL.Point(position_Street.geometry.coordinates[0], position_Street.geometry.coordinates[1])
     );
+    searchPoiByLonlat();
     gcoord.transform(position_Street, gcoord.BD09, gcoord.WGS84);
   });
 });
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 2bdf6b8..1154f6d 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -1,10 +1,6 @@
 <template>
   <Transition name="slideTC">
-    <div
-      class="LayerControl"
-      v-show="ShowTuCheng"
-      :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
-    >
+    <div class="LayerControl" v-show="ShowTuCheng" :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']">
       <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
         <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
         <!-- <Transition name="Group"> -->
@@ -34,30 +30,30 @@
 </template>
 
 <script setup name="LayerControl">
-import { ref, reactive, toRefs, onMounted } from "vue";
+import { ref, reactive, toRefs, onMounted } from 'vue';
 // 图层控制icon引入
-import { requireTuChengImg } from "@/utils/util";
-import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
-import yanAnRoad from "@/assets/yanAnRoad.json";
-import yanAnWater from "@/assets/yanAnWater.json";
-import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
-import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
-import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
-import yanAnYiLao from "@/assets/yanAnYiLao.json";
-import yanAnFengXian from "@/assets/yanAnFengXian.json";
-import yanAnPipeSupervise from "@/assets/yanAnPipeSupervise.json";
-import yanAnPKSupervise from "@/assets/yanAnPKSupervise.json";
-import yanAnNature from "@/assets/yanAnNature.json";
-import yanAnVideo from "@/assets/yanAnVideo.json";
-import yanAnMountain from "@/assets/yanAnMountain.json";
-import yanAnSmallWater from "@/assets/yanAnSmallWater.json";
-import yanAnRainArea from "@/assets/yanAnRainArea.json";
-import heDiJiaGu from "@/assets/heDiJiaGu.json";
-import heDiShuJun from "@/assets/heDiShuJun.json";
-import anXianGaiZao from "@/assets/anXianGaiZao.json";
-import bus from "@/bus";
-import axios from "axios";
-import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
+import { requireTuChengImg } from '@/utils/util';
+import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
+import yanAnRoad from '@/assets/yanAnRoad.json';
+import yanAnWater from '@/assets/yanAnWater.json';
+import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
+import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
+import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
+import yanAnYiLao from '@/assets/yanAnYiLao.json';
+import yanAnFengXian from '@/assets/yanAnFengXian.json';
+import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
+import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
+import yanAnNature from '@/assets/yanAnNature.json';
+import yanAnVideo from '@/assets/yanAnVideo.json';
+import yanAnMountain from '@/assets/yanAnMountain.json';
+import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
+import yanAnRainArea from '@/assets/yanAnRainArea.json';
+import heDiJiaGu from '@/assets/heDiJiaGu.json';
+import heDiShuJun from '@/assets/heDiShuJun.json';
+import anXianGaiZao from '@/assets/anXianGaiZao.json';
+import bus from '@/bus';
+import axios from 'axios';
+import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
 const AllData = reactive({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -70,216 +66,262 @@
    */
   LayerData: [
     {
-      title: "基本信息",
+      title: '基本信息',
       Show: true,
       children: [
         {
-          layerName: "蓝色地图",
-          layerKey: "blackMap",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
         },
         {
-          layerName: "白色地图",
-          layerKey: "whiteMap",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
         },
         {
-          layerName: "影像地图",
-          layerKey: "imageMap",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
         },
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          layerName: "三维建筑",
-          layerKey: "buildingLayer",
-          layerIcon: "",
+          layerName: '综合视角',
+          layerKey: 'zongHeView',
+          layerIcon: '',
+          layerVisible: true,
+          lonlat: [109.478, 36.606],
+          zoom: 14,
+          bearing: 0,
+          pitch: 55,
+        },
+        {
+          layerName: '燃气视角',
+          layerKey: 'ranQiView',
+          layerIcon: '',
+          layerVisible: false,
+          lonlat: [109.478, 36.606],
+          zoom: 11.5,
+          bearing: 40,
+          pitch: 55,
+        },
+        {
+          layerName: '桥梁视角',
+          layerKey: 'qiaoLiangView',
+          layerIcon: '',
+          layerVisible: false,
+          lonlat: [109.4716, 36.6064],
+          zoom: 18,
+          bearing: 300,
+          pitch: 45,
+        },
+        {
+          layerName: '隧道视角',
+          layerKey: 'suiDaoView',
+          layerIcon: '',
+          layerVisible: false,
+          lonlat: [109.4636, 36.6134],
+          zoom: 18,
+          bearing: 30,
+          pitch: 45,
+        },
+        {
+          layerName: '三维建筑',
+          layerKey: 'buildingLayer',
+          layerIcon: '',
           layerVisible: true,
         },
         {
-          layerName: "路网",
-          layerKey: "road",
-          layerIcon: "",
+          layerName: '仿真地图',
+          layerKey: 'fangZhenMap',
+          layerIcon: '',
+          layerVisible: false,
+        },
+        {
+          layerName: '路网',
+          layerKey: 'road',
+          layerIcon: '',
           layerVisible: true,
           dynamicLineData: yanAnRoad,
         },
         {
-          layerName: "河流水系",
-          layerKey: "waterLake",
-          layerIcon: "",
+          layerName: '河流水系',
+          layerKey: 'waterLake',
+          layerIcon: '',
           layerVisible: true,
           dynamicLineData: yanAnWater,
         },
         {
-          layerName: "防洪河道",
-          layerKey: "fangHongWater",
-          layerIcon: "",
+          layerName: '防洪河道',
+          layerKey: 'fangHongWater',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: yanAnSmallWater,
         },
         {
-          layerName: "河堤疏浚",
-          layerKey: "heDiShuJun",
-          layerIcon: "",
+          layerName: '河堤疏浚',
+          layerKey: 'heDiShuJun',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: heDiShuJun,
         },
         {
-          layerName: "河堤加固",
-          layerKey: "heDiJiaGu",
-          layerIcon: "",
+          layerName: '河堤加固',
+          layerKey: 'heDiJiaGu',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: heDiJiaGu,
         },
         {
-          layerName: "岸线改造",
-          layerKey: "anXianGaiZao",
-          layerIcon: "",
+          layerName: '岸线改造',
+          layerKey: 'anXianGaiZao',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: "河堤治理",
-          layerKey: "heDiZhiLi",
-          layerIcon: "",
+          layerName: '河堤治理',
+          layerKey: 'heDiZhiLi',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: "空间格局",
-          layerKey: "yanAnNature",
-          layerIcon: "",
+          layerName: '空间格局',
+          layerKey: 'yanAnNature',
+          layerIcon: '',
           layerVisible: false,
           areaData: yanAnNature,
         },
         {
-          layerName: "山体修复",
-          layerKey: "yanAnMountain",
-          layerIcon: "",
+          layerName: '山体修复',
+          layerKey: 'yanAnMountain',
+          layerIcon: '',
           layerVisible: false,
           lineWithLabel: yanAnMountain,
         },
       ],
     },
     {
-      title: "燃气系统",
+      title: '燃气系统',
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "干管",
-          layerKey: "rq_SZLH",
+          layerName: '干管',
+          layerKey: 'rq_SZLH',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "干管流向",
-          layerKey: "sx_ya_smx_rq_line_sz",
+          layerName: '干管流向',
+          layerKey: 'sx_ya_smx_rq_line_sz',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "主管",
-          layerKey: "rq_TYLH",
+          layerName: '主管',
+          layerKey: 'rq_TYLH',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "主管流向",
-          layerKey: "sx_ya_smx_rq_line_zg",
+          layerName: '主管流向',
+          layerKey: 'sx_ya_smx_rq_line_zg',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "支管",
-          layerKey: "rq_LGLH",
+          layerName: '支管',
+          layerKey: 'rq_LGLH',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "支管流向",
-          layerKey: "sx_ya_smx_rq_line_zhig",
+          layerName: '支管流向',
+          layerKey: 'sx_ya_smx_rq_line_zhig',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "其他管网",
-          layerKey: "rq_other",
+          layerName: '其他管网',
+          layerKey: 'rq_other',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "调压器",
-          layerKey: "tiaoYaQi",
+          layerName: '调压器',
+          layerKey: 'tiaoYaQi',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "节点",
-          layerKey: "rq_jieDian",
+          layerName: '节点',
+          layerKey: 'rq_jieDian',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "极性保护",
-          layerKey: "jiXingBaoHu",
+          layerName: '极性保护',
+          layerKey: 'jiXingBaoHu',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "流量计",
-          layerKey: "rq_liuLiangJi",
+          layerName: '流量计',
+          layerKey: 'rq_liuLiangJi',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "未知设备",
-          layerKey: "rq_unknow",
+          layerName: '未知设备',
+          layerKey: 'rq_unknow',
           layerIcon: null,
           layerVisible: false,
         },
       ],
     },
     {
-      title: "雨水系统",
+      title: '雨水系统',
       Show: true,
       children: [
         {
-          layerName: "雨水分区",
-          layerKey: "rainArea",
+          layerName: '雨水分区',
+          layerKey: 'rainArea',
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnRainArea,
         },
         {
-          layerName: "排水分区",
-          layerKey: "paishuiArea",
+          layerName: '排水分区',
+          layerKey: 'paishuiArea',
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnPaiShuiArea,
         },
         {
-          layerName: "雨水管网",
-          layerKey: "ysLine1",
+          layerName: '雨水管网',
+          layerKey: 'ysLine1',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "雨水管网流向",
-          layerKey: "pipeline_info_flow_ys",
+          layerName: '雨水管网流向',
+          layerKey: 'pipeline_info_flow_ys',
           layerIcon: null,
           layerVisible: false,
         },
@@ -290,8 +332,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -299,24 +341,24 @@
       ],
     },
     {
-      title: "污水系统",
+      title: '污水系统',
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网流向",
-          layerKey: "pipeline_info_flow_ws1",
+          layerName: '污水管网流向',
+          layerKey: 'pipeline_info_flow_ws1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -333,8 +375,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -342,40 +384,40 @@
       ],
     },
     {
-      title: "感知设备",
+      title: '感知设备',
       Show: true,
       children: [
         {
-          layerName: "内涝易涝点",
-          layerKey: "yiLaoPoint",
+          layerName: '内涝易涝点',
+          layerKey: 'yiLaoPoint',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYiLao,
         },
         {
-          layerName: "内涝风险点",
-          layerKey: "fengXianPoint",
+          layerName: '内涝风险点',
+          layerKey: 'fengXianPoint',
           layerIcon: null,
           layerVisible: false,
           data: yanAnFengXian,
         },
         {
-          layerName: "排水管网监测",
-          layerKey: "pipeSupervise",
+          layerName: '排水管网监测',
+          layerKey: 'pipeSupervise',
           layerIcon: null,
           layerVisible: false,
           data: yanAnPipeSupervise,
         },
         {
-          layerName: "排水排口监测",
-          layerKey: "PKsupervise",
+          layerName: '排水排口监测',
+          layerKey: 'PKsupervise',
           layerIcon: null,
           layerVisible: false,
           data: yanAnPKSupervise,
         },
         {
-          layerName: "视频监测",
-          layerKey: "video",
+          layerName: '视频监测',
+          layerKey: 'video',
           layerIcon: null,
           layerVisible: false,
           data: yanAnVideo,
@@ -390,10 +432,10 @@
     .concat(AllData.LayerData[2].children)
     .concat(AllData.LayerData[3].children)
     .concat(AllData.LayerData[4].children);
-  initeLegend.forEach((element) => {
+  initeLegend.forEach(element => {
     element.layername = element.layerKey;
   });
-  bus.emit("setLegendData", initeLegend);
+  bus.emit('setLegendData', initeLegend);
 });
 const props = defineProps({
   ShowTuCheng: false,
@@ -403,98 +445,116 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = async (item2) => {
+const layerClick = async item2 => {
   item2.layerVisible = !item2.layerVisible;
   item2.isCheck = item2.layerVisible;
-  console.info(
-    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
-  );
-  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
-  if (item2.layerKey == "whiteMap") {
-    AllData.LayerData[0]["children"][0].layerVisible = false;
-    AllData.LayerData[0]["children"][2].layerVisible = false;
-    let { data } = await axios.get(
-      "/static/libs/mapbox/style/customs/whiteMapStyle.json"
-    );
+  console.info(`点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
+  bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
+  //切换视角
+  if (item2.layerName.includes('视角')) {
+    AllData.LayerData[0]['children'][4].layerVisible = false;
+    AllData.LayerData[0]['children'][5].layerVisible = false;
+    AllData.LayerData[0]['children'][6].layerVisible = false;
+    AllData.LayerData[0]['children'][7].layerVisible = false;
+    item2.layerVisible = !item2.layerVisible;
+    item2.isCheck = item2.layerVisible;
+    newfiberMapbox.map.easeTo({
+      center: item2.lonlat,
+      zoom: item2.zoom,
+      bearing: item2.bearing,
+      pitch: item2.pitch,
+    });
+    if (item2.layerName == '燃气视角') {
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_sz', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_zg', isCheck: true });
+    } else {
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_sz', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_zg', isCheck: false });
+    }
+  }
+  //切换地图
+  if (item2.layerKey == 'whiteMap') {
+    AllData.LayerData[0]['children'][0].layerVisible = false;
+    AllData.LayerData[0]['children'][2].layerVisible = false;
+    let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach((layer) => {
+    oldMapStyle.layers.forEach(layer => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map((i) => i.id);
-    oldIds.forEach((id) => {
+    let newIds = data.layers.map(i => i.id);
+    oldIds.forEach(id => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach((key) =>
-        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
-      );
-      Object.keys(layer.paint || {}).forEach((key) =>
-        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
-      );
+      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
+      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
     });
-    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
+    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
   }
-  if (item2.layerKey == "blackMap") {
-    AllData.LayerData[0]["children"][1].layerVisible = false;
-    AllData.LayerData[0]["children"][2].layerVisible = false;
-    let { data } = await axios.get("/static/libs/mapbox/style/customs/night-style.json");
+  if (item2.layerKey == 'blackMap') {
+    AllData.LayerData[0]['children'][1].layerVisible = false;
+    AllData.LayerData[0]['children'][2].layerVisible = false;
+    let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach((layer) => {
+    oldMapStyle.layers.forEach(layer => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map((i) => i.id);
-    oldIds.forEach((id) => {
+    let newIds = data.layers.map(i => i.id);
+    oldIds.forEach(id => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach((key) =>
-        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
-      );
-      Object.keys(layer.paint || {}).forEach((key) =>
-        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
-      );
+      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
+      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
     });
-    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
+    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
   }
-  if (item2.layerKey == "imageMap") {
-    AllData.LayerData[0]["children"][0].layerVisible = false;
-    AllData.LayerData[0]["children"][1].layerVisible = false;
-    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "visible");
-    newfiberMapbox.map.moveLayer("newfiber-XYZLayer", "buildingLayer");
+  if (item2.layerKey == 'imageMap') {
+    AllData.LayerData[0]['children'][0].layerVisible = false;
+    AllData.LayerData[0]['children'][1].layerVisible = false;
+    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
+    newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer');
   }
+  //分区类图层
   if (item2.areaData) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
     }
   }
-  if (item2.layerKey == "buildingLayer") {
+  //三维建筑
+  if (item2.layerKey == 'buildingLayer') {
     if (item2.isCheck) {
-      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "visible");
+      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
     } else {
-      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "none");
+      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
     }
   }
+  //河堤岸线
   if (item2.lineWithLabel) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
-      if (item2.layerKey == "fangHongWater") {
+      if (item2.layerKey == 'fangHongWater') {
         let layer = new mapboxL7.LineLayer({
-          name: "fangHongWater",
+          name: 'fangHongWater',
         })
           .source(item2.lineWithLabel)
           .size(3)
-          .shape("line")
-          .texture("arrow")
-          .color("rgba(243, 26, 237,1)")
+          .shape('line')
+          .texture('arrow')
+          .color('rgba(243, 26, 237,1)')
           .animate({
             interval: 2, // 间隔
             duration: 3, // 持续时间，延时
@@ -505,29 +565,30 @@
             lineTexture: true, // 开启线的贴图功能
             iconStep: 200, // 设置贴图纹理的间距
             borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-            borderColor: "#fff", // 默认为 #ccc
+            borderColor: '#fff', // 默认为 #ccc
           });
         newfiberMapbox.addLayer(layer);
       }
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
-      if (newfiberMapbox.getLayerByName("fangHongWater")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("fangHongWater"));
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
+      if (newfiberMapbox.getLayerByName('fangHongWater')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
       }
     }
   }
-  if (item2.layerKey == "road") {
+  //路网
+  if (item2.layerKey == 'road') {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
+      if (newfiberMapbox.getLayerByName('dynamicRoad')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
       }
       let layer = new mapboxL7.LineLayer({
-        name: "dynamicRoad",
+        name: 'dynamicRoad',
       })
         .source(item2.dynamicLineData)
         .size(1.3)
-        .shape("line")
-        .color("rgb(184, 184, 184)")
+        .shape('line')
+        .color('rgb(184, 184, 184)')
         .animate({
           interval: 1, // 间隔
           duration: 1.5, // 持续时间，延时
@@ -538,22 +599,23 @@
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
     }
   }
-  if (item2.layerKey == "waterLake") {
+  //水系
+  if (item2.layerKey == 'waterLake') {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName("waterLake")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
+      if (newfiberMapbox.getLayerByName('waterLake')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
       }
       let layer = new mapboxL7.LineLayer({
-        name: "waterLake",
+        name: 'waterLake',
       })
         .source(item2.dynamicLineData)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("aqua")
+        .shape('line')
+        .texture('arrow')
+        .color('aqua')
         .animate({
           interval: 2, // 间隔
           duration: 3, // 持续时间，延时
@@ -564,29 +626,38 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 200, // 设置贴图纹理的间距
           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
     }
   }
-  if (item2.layerKey == "centerCity") {
+  //仿真地图
+  if (item2.layerKey == 'fangZhenMap') {
     if (item2.isCheck) {
-      mapBoxVectorLayer.addGeojsonLine("centerCity", item2.dynamicLineData, 4, 1, 0.5);
+      mapBoxVectorLayer.load3DTiles();
     } else {
-      mapBoxVectorLayer.removeByIds(["centerCity"]);
+      mapBoxVectorLayer.remove3Dtiles();
+    }
+  }
+  //中心城区
+  if (item2.layerKey == 'centerCity') {
+    if (item2.isCheck) {
+      mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
+    } else {
+      mapBoxVectorLayer.removeByIds(['centerCity']);
     }
   }
 };
 onMounted(() => {
   // 清除所有的图层选中
-  bus.on("clearAllLayer", () => {
-    AllData.LayerData.forEach((data) => {
-      data.children.map((item) => {
+  bus.on('clearAllLayer', () => {
+    AllData.LayerData.forEach(data => {
+      data.children.map(item => {
         // item.layerVisible = true;
         // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
-        item.layerVisible ? layerClick(item) : "";
+        item.layerVisible ? layerClick(item) : '';
       });
     });
   });
@@ -594,17 +665,17 @@
   /**控制图层的显示
    *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
    */
-  bus.on("SetLayerShow", (LayerArraya) => {
-    AllData.LayerData.forEach((data) => {
-      data.children.map((item) => {
-        LayerArraya.includes(item.layerName) ? layerClick(item) : "";
+  bus.on('SetLayerShow', LayerArraya => {
+    AllData.LayerData.forEach(data => {
+      data.children.map(item => {
+        LayerArraya.includes(item.layerName) ? layerClick(item) : '';
       });
     });
   });
 });
 onBeforeUnmount(() => {
-  bus.off("clearAllLayer");
-  bus.off("SetLayerShow");
+  bus.off('clearAllLayer');
+  bus.off('SetLayerShow');
 });
 </script>
 
@@ -615,7 +686,7 @@
   position: absolute;
   top: 150px;
   right: 476px;
-  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
+  background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
   background-size: contain;
   box-sizing: border-box;
   padding: 25px 0px;
@@ -631,7 +702,7 @@
       width: 190px;
       height: 25px;
       line-height: 25px;
-      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
+      background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
         linear-gradient(to right, #1c899600, #1c8996, #1c899600);
       background-repeat: no-repeat;
       background-position: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index bd1862b..96e3f27 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -5,20 +5,14 @@
       <!-- 顶部 -->
       <div
         id="oneMapHeader"
-        :class="[
-          'oneMapHeader',
-          'animate__animated',
-          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-        ]"
+        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
       >
         <!-- 标题 -->
         <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
         <div id="titleFont">延安市城市生命线安全运行监测系统</div>
         <!-- 标题左侧展示组件 -->
         <div class="Location">
-          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
-            ><LocationFilled
-          /></el-icon>
+          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
           延安
         </div>
         <div class="Timer">
@@ -37,15 +31,9 @@
         </router-link>
       </div>
       <!-- 地图组件 -->
-      <OneMap
-        @map-click="mapClick"
-        v-if="AllData.MapShowBol"
-        :loadCallback="mapLoad"
-      ></OneMap>
+      <OneMap @map-click="mapClick" v-if="AllData.MapShowBol" :loadCallback="mapLoad"></OneMap>
       <!-- 桥梁BIM -->
-      <WangJiaPingBIM
-        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
-      ></WangJiaPingBIM>
+      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
       <!-- 隧道BIM -->
       <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
       <!-- 降雨效果 -->
@@ -84,48 +72,19 @@
         :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
         v-if="AllData.MapShowBol"
       />
-      <LayerControl
-        v-if="AllData.MapShowBol"
-        :ShowTuCheng="ShowTuCheng"
-        :showPanel="showPanel"
-      ></LayerControl>
+      <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng" :showPanel="showPanel"></LayerControl>
       <!-- 1:总体概览 -->
-      <ComZTGL
-        v-if="AllData.ComShowID == 1"
-        :isActive="AllData.ComShowID == 1 ? true : false"
-        :showPanel="showPanel"
-      ></ComZTGL>
+      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
       <!-- 2:智慧燃气 -->
-      <ComZHRQ
-        v-if="AllData.ComShowID == 2"
-        :isActive="AllData.ComShowID == 2 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHRQ>
+      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
       <!-- 3:智慧排水 -->
-      <ComZHPS
-        v-if="AllData.ComShowID == 3"
-        :isActive="AllData.ComShowID == 3 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHPS>
+      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
       <!-- 4:智慧桥梁 -->
-      <ComZHQL
-        v-if="AllData.ComShowID == 4"
-        :isActive="AllData.ComShowID == 4 ? true : false"
-        :showPanel="showPanel"
-      >
-      </ComZHQL>
+      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
       <!-- 5:智慧隧道 -->
-      <ComZHSD
-        v-if="AllData.ComShowID == 5"
-        :isActive="AllData.ComShowID == 5 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHSD>
+      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
       <!-- 6:智慧海绵 -->
-      <ComZHHM
-        v-if="AllData.ComShowID == 6"
-        :isActive="AllData.ComShowID == 6 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHHM>
+      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
       <!-- 智慧海绵-监测分析 -->
       <ZHHMJCFX
         v-if="AllData.ComShowID == 61"
@@ -139,11 +98,7 @@
         :showPanel="showPanel"
       ></ZHHMJSPG>
       <!-- 7:防洪排涝 -->
-      <ComFHPL
-        v-if="AllData.ComShowID == 7"
-        :isActive="AllData.ComShowID == 7 ? true : false"
-        :showPanel="showPanel"
-      ></ComFHPL>
+      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
     </div>
     <!-- 底部菜单 -->
     <div id="BottomMenuBox">
@@ -153,11 +108,7 @@
       <!-- 菜单List -->
       <div
         class="MenuList"
-        :class="[
-          'MenuList' + index,
-          'animate__animated',
-          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
-        ]"
+        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
         v-for="(item, index) in AllData.MenuListData"
         @click="MenuClick(item, index)"
         v-if="BottomshowPanel"
@@ -171,10 +122,7 @@
 
           <!-- 二级菜单 -->
           <!-- <Transition name="slide-fade2"> -->
-          <div
-            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
-            class="ErJiMenuBox"
-          >
+          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
             <span
               class="ErJiMenuList"
               :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
@@ -193,11 +141,7 @@
     <Voice></Voice>
   </div>
   <!-- 融云弹窗 -->
-  <ModelRongYun
-    :RYdialogShow="AllData.RYDialog"
-    :ZhuDongBoHao="AllData.ZhuDongBoHao"
-    @OneDialogHide="dialogHide"
-  ></ModelRongYun>
+  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
   <!-- 前端组件公共弹窗 -->
   <el-dialog
     modal-class="publicDialogVisible"
@@ -219,64 +163,64 @@
 </template>
 
 <script setup name="oneMapIndex">
-import bus from "@/bus";
-import request from "@/utils/request";
-import { fullscreenToggel } from "@/utils/util";
-import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from '@/bus';
+import request from '@/utils/request';
+import { fullscreenToggel } from '@/utils/util';
+import { ref, reactive, toRefs, onMounted } from 'vue';
 
-import useUserStore from "@/store/modules/user";
+import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
 // 菜单的图片资源
-import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
-import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
-import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
-import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
-import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
-import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
-import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
-import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
-import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
-import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
-import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
-import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
-import JSPG from "@/assets/images/Sponge_screen/menu/JSPG.png";
-import AC_JSPG from "@/assets/images/Sponge_screen/menu/AC_JSPG.png";
-import JCFX from "@/assets/images/Sponge_screen/menu/JCFX.png";
-import AC_JCFX from "@/assets/images/Sponge_screen/menu/AC_JCFX.png";
+import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
+import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
+import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
+import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
+import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
+import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
+import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
+import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
+import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
+import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
+import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
+import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
+import JSPG from '@/assets/images/Sponge_screen/menu/JSPG.png';
+import AC_JSPG from '@/assets/images/Sponge_screen/menu/AC_JSPG.png';
+import JCFX from '@/assets/images/Sponge_screen/menu/JCFX.png';
+import AC_JCFX from '@/assets/images/Sponge_screen/menu/AC_JCFX.png';
 // 引用地图
-import OneMap from "./map/newfiberMapBox.vue";
+import OneMap from './map/newfiberMapBox.vue';
 
 // 引用王家坪大桥BIm
-import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
+import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
 // 引用隧道BIm
-import Tunnel from "./BIM/Tunnel.vue";
+import Tunnel from './BIM/Tunnel.vue';
 // 引用语音识别
-import Voice from "./../voice/recordPage/index.vue";
+import Voice from './../voice/recordPage/index.vue';
 // 引入融云通讯录
-import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
+import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
 // 子系统引入
-import ComZTGL from "./components/ZTGL.vue"; //总体概览
-import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
-import ComZHPS from "./components/ZHPS.vue"; //智慧排水
-import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
-import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
-import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
-import ComFHPL from "./components/FHPL.vue"; //防洪排涝
-import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
-import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
-import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
-import dynamicInformation from "@/views/oneMap/components/dynamicInformation.vue"; //地图标注点弹窗
+import ComZTGL from './components/ZTGL.vue'; //总体概览
+import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
+import ComZHPS from './components/ZHPS.vue'; //智慧排水
+import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
+import ComZHSD from './components/ZHSD.vue'; //智慧隧道
+import ComZHHM from './components/ZHHM.vue'; //智慧海绵
+import ComFHPL from './components/FHPL.vue'; //防洪排涝
+import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
+import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
+import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
+import dynamicInformation from '@/views/oneMap/components/dynamicInformation.vue'; //地图标注点弹窗
 // 降雨效果
-import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
+import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
 // 图层控制面板
-import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
+import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
 // 前端共同弹窗
-import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
+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/xtb_img.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/xtb_img.png';
+import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
 // 时间以及天气
 const timer = ref(null);
 const dates = ref(null);
@@ -284,8 +228,8 @@
 const times = ref(null);
 const weather = ref({
   temperature: null,
-  imgNum: "",
-  text: "",
+  imgNum: '',
+  text: '',
 });
 const showPanel = ref(false);
 const showPanel2 = ref(false);
@@ -373,61 +317,61 @@
 // 公共弹窗
 const dialogConfig = reactive({
   visible: false,
-  getSiteId: "",
-  SiteNo: "",
+  getSiteId: '',
+  SiteNo: '',
   data: {},
-  comIDs: ["spjk"],
+  comIDs: ['spjk'],
   customData: [],
-  RefName: "",
-  title: "详情",
+  RefName: '',
+  title: '详情',
 });
 onBeforeMount(() => {
-  console.log("ZhuanTiType", userStore.ZhuanTiType);
+  console.log('ZhuanTiType', userStore.ZhuanTiType);
   if (userStore.ZhuanTiType == 1) {
     // 城市生命线
     AllData.MenuListData = [
       {
-        name: "总体概览",
+        name: '总体概览',
         iocn: ZTGL,
         AC_icon: AC_ZTGL,
         id: 1,
-        Layers: ["路网", "河流水系"],
+        Layers: ['路网', '河流水系'],
       },
       {
-        name: "燃气安全",
+        name: '燃气安全',
         iocn: ZHRQ,
         AC_icon: AC_ZHRQ,
         id: 2,
-        Layers: ["干管", "主管", "干管流向", "主管流向"],
+        Layers: ['干管', '主管', '干管流向', '主管流向'],
       },
       {
-        name: "排水安全",
+        name: '排水安全',
         iocn: ZHPS,
         AC_icon: AC_ZHPS,
         id: 3,
-        Layers: ["雨水管网", "污水管网"],
+        Layers: ['雨水管网', '污水管网'],
         children: [
           {
-            name: "排水安全",
+            name: '排水安全',
             id: 3,
             Layers: [],
           },
           {
-            name: "防汛排涝",
+            name: '防汛排涝',
             id: 7,
             Layers: [],
           },
         ],
       },
       {
-        name: "桥梁安全",
+        name: '桥梁安全',
         iocn: ZHQL,
         AC_icon: AC_ZHQL,
         id: 4,
         Layers: [],
       },
       {
-        name: "隧道安全",
+        name: '隧道安全',
         iocn: ZHSD,
         AC_icon: AC_ZHSD,
         id: 5,
@@ -438,19 +382,19 @@
     // 海绵
     AllData.MenuListData = [
       {
-        name: "城市概览",
+        name: '城市概览',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 6,
       },
       {
-        name: "监测分析",
+        name: '监测分析',
         iocn: JCFX,
         AC_icon: AC_JCFX,
         id: 61,
       },
       {
-        name: "建设评估",
+        name: '建设评估',
         iocn: JSPG,
         AC_icon: AC_JSPG,
         id: 62,
@@ -464,10 +408,10 @@
 onMounted(() => {
   fullscreenToggel();
   AllData.BottmBackGroundShow = true;
-  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
-  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
+  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
+  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
   // 降雨特征点击
-  bus.on("checkRainL", (params) => {
+  bus.on('checkRainL', params => {
     if (params == 1) {
       showRainFlow.value = false;
     } else {
@@ -475,7 +419,7 @@
     }
   });
   // 底部隐藏
-  bus.on("checkBottom", (params) => {
+  bus.on('checkBottom', params => {
     if (params == 1) {
       BottomshowPanel.value = false;
     } else {
@@ -483,15 +427,15 @@
     }
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog", (params) => {
+  bus.on('publicDialog', params => {
     dialogConfig.getSiteId = params.getSiteId;
-    dialogConfig.title = params.title ?? "详情";
+    dialogConfig.title = params.title ?? '详情';
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog_Close", (params) => {
+  bus.on('publicDialog_Close', params => {
     // 打开弹窗
     dialogConfig.visible = false;
   });
@@ -501,14 +445,14 @@
   currentTime();
   //initRainImage();
   // 打开融云通讯录主动拨号
-  bus.on("OpenRY", (params) => {
+  bus.on('OpenRY', params => {
     AllData.ZhuDongBoHao = true;
     AllData.RYDialog = true;
-    bus.emit("showRy");
+    bus.emit('showRy');
   });
 
   // 切换专题图
-  bus.on("ChangeZhuanTiTu", (params) => {
+  bus.on('ChangeZhuanTiTu', params => {
     if (params.num == 1) {
       // 一级
       MenuClick(params.MenuData1);
@@ -518,18 +462,18 @@
     }
   });
   // 切换面板显示隐藏
-  bus.on("changeShowPanel", (params) => {
+  bus.on('changeShowPanel', params => {
     showPanel.value = params;
   });
 });
 onBeforeUnmount(() => {
-  bus.off("BottomHidden");
-  bus.off("publicDialog");
-  bus.off("publicDialog_Close");
-  bus.off("OpenRY");
-  bus.off("ChangeZhuanTiTu");
-  bus.off("checkRainL");
-  bus.off("changeShowPanel");
+  bus.off('BottomHidden');
+  bus.off('publicDialog');
+  bus.off('publicDialog_Close');
+  bus.off('OpenRY');
+  bus.off('ChangeZhuanTiTu');
+  bus.off('checkRainL');
+  bus.off('changeShowPanel');
 });
 // 菜单点击
 const MenuClick = (item, index) => {
@@ -548,9 +492,9 @@
   } else {
     AllData.MapShowBol = true;
     // 点击菜单时隐藏所有图层
-    bus.emit("clearAllLayer");
+    bus.emit('clearAllLayer');
     // 打开默认的菜单
-    bus.emit("SetLayerShow", item.Layers);
+    bus.emit('SetLayerShow', item.Layers);
   }
 };
 // 二级菜单点击
@@ -569,10 +513,10 @@
 const toRYBox = () => {
   AllData.RYDialog = true;
   AllData.ZhuDongBoHao = false;
-  bus.emit("showRy");
+  bus.emit('showRy');
 };
 // 关闭融云通讯录弹窗
-const dialogHide = (val) => {
+const dialogHide = val => {
   if (!val) {
     AllData.RYDialog = false;
     AllData.ZhuDongBoHao = false;
@@ -580,20 +524,20 @@
 };
 //地图点击事件
 const mapClick = async (point, properties, feature) => {
-  console.log("point", point);
-  console.log("properties", properties);
-  console.log("feature---", feature);
+  console.log('point', point);
+  console.log('properties', properties);
+  console.log('feature---', feature);
   if (!feature) {
     let currentZoom = newfiberMapbox.map.getZoom();
-    console.log("currentZoom--", currentZoom);
+    console.log('currentZoom--', currentZoom);
     if (currentZoom >= 18) {
       let clickPoint = turf.point(point);
-      let positionAddress = "";
+      let positionAddress = '';
       gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
-      console.log("clickPoint---", clickPoint, clickPoint.geometry.coordinates);
+      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
       let data = await request({
-        url: `/bdApi//baiduservice/panorama`,
-        method: "GET",
+        url: `/bdApi/baiduservice/panorama`,
+        method: 'GET',
         params: {
           location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
           fov: 180,
@@ -602,36 +546,31 @@
         },
       });
       if (data && data.data) {
-        data.data.base64 = "data:image/jpeg;base64," + data.data.base64;
+        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
       }
-      console.log("data----", data);
+      console.log('data----', data);
       gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
       gcoord.transform(clickPoint, gcoord.WGS84, gcoord.GCJ02);
       let regeodata = await request({
         url: `/amap/v3/geocode/regeo`,
-        method: "GET",
+        method: 'GET',
         params: {
           location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
-          key: "76eac14980622704ba95c1bf080f3b4c",
+          key: '76eac14980622704ba95c1bf080f3b4c',
           radius: 100,
-          extensions: "all",
-          output: "json",
+          extensions: 'all',
+          output: 'json',
         },
       });
-      if (regeodata.info === "OK") {
-        console.log("坐标返地名data----", data);
+      if (regeodata.info === 'OK') {
+        console.log('坐标返地名data----', data);
         positionAddress = regeodata.regeocode.formatted_address;
       }
       gcoord.transform(clickPoint, gcoord.GCJ02, gcoord.WGS84);
-      mapBoxVectorLayer.removeByIds(["clickPoint"]);
-      mapBoxVectorLayer.addGeojsonSymbol(
-        "clickPoint",
-        turf.featureCollection([clickPoint]),
-        xtb_img,
-        2
-      );
+      mapBoxVectorLayer.removeByIds(['clickPoint']);
+      mapBoxVectorLayer.addGeojsonSymbol('clickPoint', turf.featureCollection([clickPoint]), xtb_img, 2);
       data.roadName = positionAddress;
-      bus.emit("popupcontent", {
+      bus.emit('popupcontent', {
         popupShow: true,
         point: point,
         popupInfo: data,
@@ -639,21 +578,19 @@
     }
   }
   if (properties) {
-    if (feature == "rq_pipeline_info") {
-      if (!!newfiberMapbox.getLayerByName("rqLine")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+    if (feature == 'rq_pipeline_info') {
+      if (!!newfiberMapbox.getLayerByName('rqLine')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
       }
-      let rqLine = turf.featureCollection([
-        turf.feature(Terraformer.WKT.parse(properties.geometry)),
-      ]);
+      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
       let layer = new mapboxL7.LineLayer({
-        name: "rqLine",
+        name: 'rqLine',
       })
         .source(rqLine)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("rgb(241, 159, 27)")
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(241, 159, 27)')
         .animate({
           interval: 2, // 间隔
           duration: 2, // 持续时间，延时
@@ -664,11 +601,11 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 50, // 设置贴图纹理的间距
           borderWidth: 0, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     }
-    bus.emit("popupcontent", {
+    bus.emit('popupcontent', {
       popupShow: true,
       point: point,
       popupInfo: properties,
@@ -683,20 +620,12 @@
   let month = date.getMonth() + 1; // 月
   let day = date.getDate(); // 日
   let hour = date.getHours(); // 时
-  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
   let minute = date.getMinutes(); // 分
-  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
   let second = date.getSeconds(); // 秒
-  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
-  let weekAry = new Array(
-    "星期日",
-    "星期一",
-    "星期二",
-    "星期三",
-    "星期四",
-    "星期五",
-    "星期六"
-  );
+  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
+  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
   weeks.value = weekAry[date.getDay()];
   dates.value = `${year}-${month}-${day}`;
   times.value = `${hour}:${minute}:${second}`;
@@ -719,16 +648,16 @@
   // }
 };
 // 二级菜单展示
-const handleMouseEnter = (item) => {
+const handleMouseEnter = item => {
   AllData.ErJiMenuShowID = item.id;
 };
 // 二级菜单展示
-const handleMouseLeave = (item) => {
+const handleMouseLeave = item => {
   AllData.ErJiMenuShowID = null;
 };
 
 const mapLoad = () => {
-  mapBoxVectorLayer.load3DTiles();
+  //mapBoxVectorLayer.load3DTiles();
 };
 </script>
 
@@ -750,7 +679,7 @@
     #oneMapHeader {
       width: 100%;
       height: 100px;
-      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
       background-size: cover;
       z-index: 100;
       position: absolute;
@@ -834,17 +763,17 @@
         cursor: pointer;
       }
       .goHome {
-        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
         background-size: contain;
         right: 150px;
       }
       .goUser_com {
-        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
         background-size: contain;
         right: 100px;
       }
       .goClose_com {
-        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
         background-size: contain;
         right: 50px;
       }
@@ -899,7 +828,7 @@
       bottom: 0;
       width: 952px;
       height: 53px;
-      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
       background-size: cover;
     }
     // 图标菜单样式 从左到右按照顺序进行设定
@@ -953,11 +882,7 @@
             display: inline-block;
             margin: 5px 0;
             width: 147px;
-            background: linear-gradient(
-              0deg,
-              rgba(1, 86, 126, 1) 0%,
-              rgba(43, 123, 159, 0.8) 100%
-            );
+            background: linear-gradient(0deg, rgba(1, 86, 126, 1) 0%, rgba(43, 123, 159, 0.8) 100%);
             border-radius: 20px;
             &:hover {
               color: #ffd97f;
@@ -968,11 +893,7 @@
             font-weight: bold;
             font-size: 14px;
             color: #ffd97f;
-            background: linear-gradient(
-              0deg,
-              rgba(1, 86, 126, 1) 0%,
-              rgba(43, 123, 159, 1) 100%
-            );
+            background: linear-gradient(0deg, rgba(1, 86, 126, 1) 0%, rgba(43, 123, 159, 1) 100%);
           }
 
           .ErJiMenuJT {
@@ -1035,7 +956,7 @@
     height: 800px;
     border: 1px solid #15d2fd;
     .el-dialog__header {
-      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
       background-size: cover;
       padding: 0;
       height: 60px;