diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
index 6e06251..dd80883 100644
--- a/src/views/sponeScreen/cityGK/PhysicalGeography.vue
+++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
@@ -256,11 +256,15 @@
 };
 
 onMounted(() => {
-  setTimeout(() => {
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter);
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1);
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2);
-  }, 3000);
+  let mapboxTimer = setInterval(() => {
+    if (!newfiberMapbox) return;
+    newfiberMapbox.map.on('style.load', () => {
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter);
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1);
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2);
+    });
+    clearInterval(mapboxTimer);
+  });
   setTimeout(() => {
     newfiberMapbox.map.easeTo({
       center: [114.315, 34.852],

diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
index 6e06251..dd80883 100644
--- a/src/views/sponeScreen/cityGK/PhysicalGeography.vue
+++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
@@ -256,11 +256,15 @@
 };
 
 onMounted(() => {
-  setTimeout(() => {
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter);
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1);
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2);
-  }, 3000);
+  let mapboxTimer = setInterval(() => {
+    if (!newfiberMapbox) return;
+    newfiberMapbox.map.on('style.load', () => {
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter);
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1);
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2);
+    });
+    clearInterval(mapboxTimer);
+  });
   setTimeout(() => {
     newfiberMapbox.map.easeTo({
       center: [114.315, 34.852],
diff --git a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
index 2ea860b..3181a00 100644
--- a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
+++ b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
@@ -1,4 +1,42 @@
 export default class newfiberMapBoxVectorLayer {
+  //添加circle
+  static addGeojsonCircle(layerId, geojson, minzoom) {
+    if (!newfiberMapbox.map.getLayer(layerId)) {
+      newfiberMapbox.map.addSource(layerId, {
+        type: 'geojson',
+        data: geojson,
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId,
+        type: 'circle',
+        source: layerId,
+        paint: {
+          'circle-color': ['get', 'fillcolor'],
+          'circle-radius': 10,
+        },
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId + '_label',
+        type: 'symbol',
+        minzoom: minzoom ? minzoom : 0,
+        source: layerId,
+        paint: {
+          'text-color': 'rgba(255, 255, 255, 1)',
+          'text-halo-color': 'rgba(14, 139, 90, 1)',
+          'text-halo-width': 2,
+        },
+        layout: {
+          'text-field': '{name}',
+          'text-font': ['KlokanTech Noto Sans Regular'],
+          'text-size': 16,
+          'text-line-height': 3,
+          'text-anchor': 'bottom',
+          'text-max-width': 50,
+        },
+      });
+    }
+  }
+
   //添加geojson Symbol
   static addGeojsonSymbol(layerId, geojson, icon) {
     if (!newfiberMapbox.map.getLayer(layerId)) {
@@ -60,6 +98,48 @@
       });
     }
   }
+  //添加有标注的geojson线
+  static addGeojsonLineWithLabel(layerId, geojson, lineWidth, minzoom) {
+    let labelGeojson = this.getGeojsonCenterPoint(geojson);
+    if (!newfiberMapbox.map.getLayer(layerId)) {
+      newfiberMapbox.map.addSource(layerId, {
+        type: 'geojson',
+        data: geojson,
+      });
+      newfiberMapbox.map.addSource(layerId + '_label', {
+        type: 'geojson',
+        data: labelGeojson,
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId,
+        type: 'line',
+        source: layerId,
+        paint: {
+          'line-color': ['get', 'fillcolor'],
+          'line-width': lineWidth ? lineWidth : 3,
+        },
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId + '_label',
+        type: 'symbol',
+        minzoom: minzoom ? minzoom : 0,
+        source: layerId + '_label',
+        paint: {
+          'text-color': 'rgba(255, 255, 255, 1)',
+          'text-halo-color': 'rgba(14, 139, 90, 1)',
+          'text-halo-width': 2,
+        },
+        layout: {
+          'text-field': '{name}',
+          'text-font': ['KlokanTech Noto Sans Regular'],
+          'text-size': 16,
+          'text-line-height': 3,
+          'text-anchor': 'bottom',
+          'text-max-width': 50,
+        },
+      });
+    }
+  }
   //添加geojson面
   static addGeojsonPolygon(layerId, geojson) {
     if (!newfiberMapbox.map.getLayer(layerId)) {
@@ -78,8 +158,9 @@
       });
     }
   }
+
   //添加有标注的geojson面
-  static addGeojsonPolygonWithLabel(layerId, geojson) {
+  static addGeojsonPolygonWithLabel(layerId, geojson, minzoom) {
     let labelGeojson = this.getGeojsonCenterPoint(geojson);
     if (!newfiberMapbox.map.getLayer(layerId)) {
       newfiberMapbox.map.addSource(layerId, {
@@ -102,6 +183,7 @@
         id: layerId + '_label',
         type: 'symbol',
         source: layerId + '_label',
+        minzoom: minzoom ? minzoom : 0,
         paint: {
           'text-color': 'rgba(255, 255, 255, 1)',
           'text-halo-color': 'rgba(14, 139, 90, 1)',

diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
index 6e06251..dd80883 100644
--- a/src/views/sponeScreen/cityGK/PhysicalGeography.vue
+++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
@@ -256,11 +256,15 @@
 };
 
 onMounted(() => {
-  setTimeout(() => {
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter);
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1);
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2);
-  }, 3000);
+  let mapboxTimer = setInterval(() => {
+    if (!newfiberMapbox) return;
+    newfiberMapbox.map.on('style.load', () => {
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter);
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1);
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2);
+    });
+    clearInterval(mapboxTimer);
+  });
   setTimeout(() => {
     newfiberMapbox.map.easeTo({
       center: [114.315, 34.852],
diff --git a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
index 2ea860b..3181a00 100644
--- a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
+++ b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
@@ -1,4 +1,42 @@
 export default class newfiberMapBoxVectorLayer {
+  //添加circle
+  static addGeojsonCircle(layerId, geojson, minzoom) {
+    if (!newfiberMapbox.map.getLayer(layerId)) {
+      newfiberMapbox.map.addSource(layerId, {
+        type: 'geojson',
+        data: geojson,
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId,
+        type: 'circle',
+        source: layerId,
+        paint: {
+          'circle-color': ['get', 'fillcolor'],
+          'circle-radius': 10,
+        },
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId + '_label',
+        type: 'symbol',
+        minzoom: minzoom ? minzoom : 0,
+        source: layerId,
+        paint: {
+          'text-color': 'rgba(255, 255, 255, 1)',
+          'text-halo-color': 'rgba(14, 139, 90, 1)',
+          'text-halo-width': 2,
+        },
+        layout: {
+          'text-field': '{name}',
+          'text-font': ['KlokanTech Noto Sans Regular'],
+          'text-size': 16,
+          'text-line-height': 3,
+          'text-anchor': 'bottom',
+          'text-max-width': 50,
+        },
+      });
+    }
+  }
+
   //添加geojson Symbol
   static addGeojsonSymbol(layerId, geojson, icon) {
     if (!newfiberMapbox.map.getLayer(layerId)) {
@@ -60,6 +98,48 @@
       });
     }
   }
+  //添加有标注的geojson线
+  static addGeojsonLineWithLabel(layerId, geojson, lineWidth, minzoom) {
+    let labelGeojson = this.getGeojsonCenterPoint(geojson);
+    if (!newfiberMapbox.map.getLayer(layerId)) {
+      newfiberMapbox.map.addSource(layerId, {
+        type: 'geojson',
+        data: geojson,
+      });
+      newfiberMapbox.map.addSource(layerId + '_label', {
+        type: 'geojson',
+        data: labelGeojson,
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId,
+        type: 'line',
+        source: layerId,
+        paint: {
+          'line-color': ['get', 'fillcolor'],
+          'line-width': lineWidth ? lineWidth : 3,
+        },
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId + '_label',
+        type: 'symbol',
+        minzoom: minzoom ? minzoom : 0,
+        source: layerId + '_label',
+        paint: {
+          'text-color': 'rgba(255, 255, 255, 1)',
+          'text-halo-color': 'rgba(14, 139, 90, 1)',
+          'text-halo-width': 2,
+        },
+        layout: {
+          'text-field': '{name}',
+          'text-font': ['KlokanTech Noto Sans Regular'],
+          'text-size': 16,
+          'text-line-height': 3,
+          'text-anchor': 'bottom',
+          'text-max-width': 50,
+        },
+      });
+    }
+  }
   //添加geojson面
   static addGeojsonPolygon(layerId, geojson) {
     if (!newfiberMapbox.map.getLayer(layerId)) {
@@ -78,8 +158,9 @@
       });
     }
   }
+
   //添加有标注的geojson面
-  static addGeojsonPolygonWithLabel(layerId, geojson) {
+  static addGeojsonPolygonWithLabel(layerId, geojson, minzoom) {
     let labelGeojson = this.getGeojsonCenterPoint(geojson);
     if (!newfiberMapbox.map.getLayer(layerId)) {
       newfiberMapbox.map.addSource(layerId, {
@@ -102,6 +183,7 @@
         id: layerId + '_label',
         type: 'symbol',
         source: layerId + '_label',
+        minzoom: minzoom ? minzoom : 0,
         paint: {
           'text-color': 'rgba(255, 255, 255, 1)',
           'text-halo-color': 'rgba(14, 139, 90, 1)',
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue b/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue
new file mode 100644
index 0000000..4d0443b
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="publicContainerA">
+    <div class="partTitleHM">项目展示列表</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <el-form-item>
+          <el-select
+            v-model="searvhDate"
+            clearable
+            filterable
+            placeholder="请输入项目名称"
+            :remote-method="blurMethod"
+            @change="stationListChange"
+          >
+            <el-option v-for="item in listDataXm" :key="item.projectNo" :label="item.projectAbbreviation" :value="item.projectNo" />
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="ConstrucNr">
+        <div class="listXm" v-for="item in listDataXm" :title="item.projectName" @click="ProjectClick(item)">
+          <img class="Icon_zp" :src="getIcon(item.projectTypeName)" alt="" />
+          <div :class="{ activeConstruListA: listActive.projectNo == item.projectNo }" class="XmName ellipsis">
+            {{ item.projectAbbreviation }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getImageUrl } from '@/utils/ruoyi';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import { projectInfoNew, selectProjectImageList } from '@/api/sponeScreen/gcpjApi.js';
+import { queryProjectStation } from '@/api/sponeScreen/syntherticData.js';
+import bus from '@/bus';
+import dlgc from '@/assets/images/zonglan/2.png';
+import gyld from '@/assets/images/zonglan/3.png';
+import hmsx from '@/assets/images/zonglan/8.png';
+import gwpc from '@/assets/images/zonglan/5.png';
+import gwpz from '@/assets/images/zonglan/4.png';
+import ptss from '@/assets/images/zonglan/1.png';
+import jzsq from '@/assets/images/zonglan/6.png';
+import qt from '@/assets/images/zonglan/7.png';
+import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
+import newfiberVectorLayer from '@/views/sponeScreen/gisMF/newfiberVectorLayer.js';
+import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
+import { nextTick, onMounted } from 'vue';
+const emitM = defineEmits();
+const listDataXm = ref([]);
+const listActive = ref({});
+const searvhDate = ref('');
+const obj = {
+  海绵建筑与社区: jzsq,
+  海绵型道路广场: dlgc,
+  海绵型公园绿地: gyld,
+  海绵型水系: hmsx,
+  管网排查与修复: gwpc,
+  管网及泵站: gwpz,
+  GIS平台建设与监测设施: ptss,
+  其他: qt,
+};
+
+const getIcon = name => {
+  return obj[name];
+};
+let layerList = ['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'];
+async function projectInfoNewM(p) {
+  console.log('ppppp---', p);
+  let { data, code } = await projectInfoNew(p);
+  if (code == 200) {
+    //newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
+    listDataXm.value = data;
+    console.log(typeof p);
+    // if (!p || !p.projectTypeId) {
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], true); //全部
+    // } else if (p.projectTypeId == '1701128641279070210') {
+    //   newfiberMap.setLayersVisible(['HMJZYSQ'], true);
+    //   newfiberMap.setLayersVisible(['HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //社区
+    // } else if (p.projectTypeId == '1701128777853997058') {
+    //   newfiberMap.setLayersVisible(['HMXDLGC'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //道路
+    // } else if (p.projectTypeId == '1701128863459741697') {
+    //   newfiberMap.setLayersVisible(['HMXGYLD'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //绿地
+    // } else if (p.projectTypeId == '1701128943340261378') {
+    //   newfiberMap.setLayersVisible(['HMXSX'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //水系
+    // } else if (p.projectTypeId == '1701129031496142849') {
+    //   newfiberMap.setLayersVisible(['GWPCYXF'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWJBZ', 'GIS'], false); //管网排查
+    // } else if (p.projectTypeId == '1701129103495565313') {
+    //   newfiberMap.setLayersVisible(['GWJBZ'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GIS'], false); //管网泵站
+    // } else if (p.projectTypeId == '1701129308194377729') {
+    //   newfiberMap.setLayersVisible(['GIS'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ'], false); //GIS
+    // }
+  }
+}
+//海绵工程gis渲染
+const addProjectLayers = async () => {
+  let typeList = ['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other'];
+  let colorList = [
+    'rgba(187, 129, 255,1)',
+    'rgba(253, 184, 100,1)',
+    'rgba(215, 231, 44,1)',
+    'rgba(104, 176, 255,1)',
+    'rgba(234, 116, 76,1)',
+    'rgba(42, 231, 230,1)',
+    'rgba(229, 64, 50,1)',
+    'rgba(220, 220, 157,1)',
+  ];
+  let { data, code } = await projectInfoNew();
+  let pointList = [],
+    lineList = [],
+    polygonList = [];
+  if (code == 200) {
+    data.forEach((element, index) => {
+      element.fillcolor = colorList[typeList.indexOf(element.projectTypeCode)];
+      if (element.projectrange) {
+        let geometryToFrature = {
+          type: 'Feature',
+          geometry: Terraformer.WKT.parse(element.projectrange),
+          properties: {
+            fillcolor: element.fillcolor,
+            projectNo: element.projectNo,
+            name: element.projectAbbreviation,
+            projectName: element.projectName,
+            projectNo: element.projectNo,
+          },
+        };
+        if (element.projectrange.includes('POINT')) {
+          pointList.push(geometryToFrature);
+        } else if (element.projectrange.includes('LINESTRING')) {
+          lineList.push(geometryToFrature);
+        } else if (element.projectrange.includes('POLYGON')) {
+          polygonList.push(geometryToFrature);
+        }
+      }
+    });
+    let pointGeojson = {
+      type: 'FeatureCollection',
+      features: pointList,
+    };
+    let lineGeojson = {
+      type: 'FeatureCollection',
+      features: lineList,
+    };
+    let polygonGeojson = {
+      type: 'FeatureCollection',
+      features: polygonList,
+    };
+    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('polygonGeojson', polygonGeojson, 15);
+    newfiberMapBoxVectorLayer.addGeojsonLineWithLabel('lineGeojson', lineGeojson, 5, 15);
+    newfiberMapBoxVectorLayer.addGeojsonCircle('pointGeojson', pointGeojson, 15);
+  }
+};
+const AllData = reactive({
+  queryParams: {},
+});
+const ProjectClick = async row => {
+  listActive.value = row;
+  listDataXm.value.map(i => {
+    if (row.id == i.id) {
+      i.checked = !i.checked;
+    } else {
+      i.checked = false;
+    }
+  });
+
+  //newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
+  let arr = listDataXm.value.filter(i => i.checked);
+  emitM('qipaoDateMeth', arr[0], arr[0]?.checked);
+  let lonlat = row.projectLocation.split(',').map(Number);
+  newfiberMapbox.map.easeTo({
+    center: lonlat,
+    zoom: 15.5,
+    pitch: 55,
+  });
+};
+
+const { queryParams } = toRefs(AllData);
+function stationListChange(v) {
+  projectInfoNewM({ projectNo: v });
+}
+
+projectInfoNewM();
+bus.on('getProjectList', (i, v) => {
+  if (i.length > 0) projectInfoNewM({ buildStatus: i[0]?.buildStatus });
+  else projectInfoNewM({ projectTypeId: i.typeId });
+});
+onMounted(() => {
+  bus.emit('setIniteLayer', []);
+  addProjectLayers();
+  // newfiberMap.setCenter({
+  //   lng: 114.322,
+  //   lat: 34.602,
+  //   heading: 2.281299097855777,
+  //   zoom: 10358.12942752382,
+  //   pitch: -25.2508969308367,
+  //   roll: 0.005453465256790101,
+  // });
+});
+onBeforeUnmount(() => {
+  if (!newfiberMapbox) return;
+  newfiberMapBoxVectorLayer.removeByIds([
+    'polygonGeojson',
+    'lineGeojson',
+    'pointGeojson',
+    'polygonGeojson_label',
+    'lineGeojson_label',
+    'pointGeojson_label',
+  ]);
+});
+</script>
+
+<style lang="scss" scoped>
+.publicContainerA {
+  margin-top: 10px;
+}
+.ConstrucClass {
+  width: 100%;
+  height: calc(100vh - 520px);
+  background: #004565;
+  opacity: 0.8;
+  margin-top: -5px;
+  .HeadContent {
+    width: 100%;
+    margin-top: 2px;
+  }
+  .ConstrucNr {
+    width: 100%;
+    height: 88%;
+    overflow: auto;
+    margin-top: -20px;
+    .listXm {
+      position: relative;
+      width: 95%;
+      height: 50px;
+      background: url('@/assets/newImgs/HMScreen/ujnasf.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      margin: 5px auto;
+      .Icon_zp {
+        width: 32px;
+        height: 32px;
+        position: relative;
+        top: 9px;
+        left: 20px;
+        // background: red;
+      }
+      .XmName {
+        position: relative;
+        left: 70px;
+        top: 15px;
+        width: 315px;
+        height: 50px;
+        // background: red;
+        overflow: hidden;
+        white-space: nowrap; /* 防止文字换行 */
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+:deep(.el-input__inner) {
+  background: #11559b !important;
+  // box-shadow: 0 0 0 0.00521rem #066592 inset !important;
+  color: #fff !important;
+  width: 390px !important;
+}
+:deep(.el-input__wrapper, .el-textarea__inner) {
+  background: #11559b !important;
+  // box-shadow: 0 0 0 0.00521rem  inset !important;
+  color: #fff !important;
+}
+:deep(.el-form-item__content) {
+  margin: 10px;
+}
+.activeConstruListA {
+  color: #cbc05a;
+}
+:deep(.scroll > div > :nth-child(2)) {
+  display: none !important;
+}
+</style>

diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
index 6e06251..dd80883 100644
--- a/src/views/sponeScreen/cityGK/PhysicalGeography.vue
+++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
@@ -256,11 +256,15 @@
 };
 
 onMounted(() => {
-  setTimeout(() => {
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter);
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1);
-    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2);
-  }, 3000);
+  let mapboxTimer = setInterval(() => {
+    if (!newfiberMapbox) return;
+    newfiberMapbox.map.on('style.load', () => {
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter);
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1);
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2);
+    });
+    clearInterval(mapboxTimer);
+  });
   setTimeout(() => {
     newfiberMapbox.map.easeTo({
       center: [114.315, 34.852],
diff --git a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
index 2ea860b..3181a00 100644
--- a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
+++ b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
@@ -1,4 +1,42 @@
 export default class newfiberMapBoxVectorLayer {
+  //添加circle
+  static addGeojsonCircle(layerId, geojson, minzoom) {
+    if (!newfiberMapbox.map.getLayer(layerId)) {
+      newfiberMapbox.map.addSource(layerId, {
+        type: 'geojson',
+        data: geojson,
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId,
+        type: 'circle',
+        source: layerId,
+        paint: {
+          'circle-color': ['get', 'fillcolor'],
+          'circle-radius': 10,
+        },
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId + '_label',
+        type: 'symbol',
+        minzoom: minzoom ? minzoom : 0,
+        source: layerId,
+        paint: {
+          'text-color': 'rgba(255, 255, 255, 1)',
+          'text-halo-color': 'rgba(14, 139, 90, 1)',
+          'text-halo-width': 2,
+        },
+        layout: {
+          'text-field': '{name}',
+          'text-font': ['KlokanTech Noto Sans Regular'],
+          'text-size': 16,
+          'text-line-height': 3,
+          'text-anchor': 'bottom',
+          'text-max-width': 50,
+        },
+      });
+    }
+  }
+
   //添加geojson Symbol
   static addGeojsonSymbol(layerId, geojson, icon) {
     if (!newfiberMapbox.map.getLayer(layerId)) {
@@ -60,6 +98,48 @@
       });
     }
   }
+  //添加有标注的geojson线
+  static addGeojsonLineWithLabel(layerId, geojson, lineWidth, minzoom) {
+    let labelGeojson = this.getGeojsonCenterPoint(geojson);
+    if (!newfiberMapbox.map.getLayer(layerId)) {
+      newfiberMapbox.map.addSource(layerId, {
+        type: 'geojson',
+        data: geojson,
+      });
+      newfiberMapbox.map.addSource(layerId + '_label', {
+        type: 'geojson',
+        data: labelGeojson,
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId,
+        type: 'line',
+        source: layerId,
+        paint: {
+          'line-color': ['get', 'fillcolor'],
+          'line-width': lineWidth ? lineWidth : 3,
+        },
+      });
+      newfiberMapbox.map.addLayer({
+        id: layerId + '_label',
+        type: 'symbol',
+        minzoom: minzoom ? minzoom : 0,
+        source: layerId + '_label',
+        paint: {
+          'text-color': 'rgba(255, 255, 255, 1)',
+          'text-halo-color': 'rgba(14, 139, 90, 1)',
+          'text-halo-width': 2,
+        },
+        layout: {
+          'text-field': '{name}',
+          'text-font': ['KlokanTech Noto Sans Regular'],
+          'text-size': 16,
+          'text-line-height': 3,
+          'text-anchor': 'bottom',
+          'text-max-width': 50,
+        },
+      });
+    }
+  }
   //添加geojson面
   static addGeojsonPolygon(layerId, geojson) {
     if (!newfiberMapbox.map.getLayer(layerId)) {
@@ -78,8 +158,9 @@
       });
     }
   }
+
   //添加有标注的geojson面
-  static addGeojsonPolygonWithLabel(layerId, geojson) {
+  static addGeojsonPolygonWithLabel(layerId, geojson, minzoom) {
     let labelGeojson = this.getGeojsonCenterPoint(geojson);
     if (!newfiberMapbox.map.getLayer(layerId)) {
       newfiberMapbox.map.addSource(layerId, {
@@ -102,6 +183,7 @@
         id: layerId + '_label',
         type: 'symbol',
         source: layerId + '_label',
+        minzoom: minzoom ? minzoom : 0,
         paint: {
           'text-color': 'rgba(255, 255, 255, 1)',
           'text-halo-color': 'rgba(14, 139, 90, 1)',
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue b/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue
new file mode 100644
index 0000000..4d0443b
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="publicContainerA">
+    <div class="partTitleHM">项目展示列表</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <el-form-item>
+          <el-select
+            v-model="searvhDate"
+            clearable
+            filterable
+            placeholder="请输入项目名称"
+            :remote-method="blurMethod"
+            @change="stationListChange"
+          >
+            <el-option v-for="item in listDataXm" :key="item.projectNo" :label="item.projectAbbreviation" :value="item.projectNo" />
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="ConstrucNr">
+        <div class="listXm" v-for="item in listDataXm" :title="item.projectName" @click="ProjectClick(item)">
+          <img class="Icon_zp" :src="getIcon(item.projectTypeName)" alt="" />
+          <div :class="{ activeConstruListA: listActive.projectNo == item.projectNo }" class="XmName ellipsis">
+            {{ item.projectAbbreviation }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getImageUrl } from '@/utils/ruoyi';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import { projectInfoNew, selectProjectImageList } from '@/api/sponeScreen/gcpjApi.js';
+import { queryProjectStation } from '@/api/sponeScreen/syntherticData.js';
+import bus from '@/bus';
+import dlgc from '@/assets/images/zonglan/2.png';
+import gyld from '@/assets/images/zonglan/3.png';
+import hmsx from '@/assets/images/zonglan/8.png';
+import gwpc from '@/assets/images/zonglan/5.png';
+import gwpz from '@/assets/images/zonglan/4.png';
+import ptss from '@/assets/images/zonglan/1.png';
+import jzsq from '@/assets/images/zonglan/6.png';
+import qt from '@/assets/images/zonglan/7.png';
+import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
+import newfiberVectorLayer from '@/views/sponeScreen/gisMF/newfiberVectorLayer.js';
+import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
+import { nextTick, onMounted } from 'vue';
+const emitM = defineEmits();
+const listDataXm = ref([]);
+const listActive = ref({});
+const searvhDate = ref('');
+const obj = {
+  海绵建筑与社区: jzsq,
+  海绵型道路广场: dlgc,
+  海绵型公园绿地: gyld,
+  海绵型水系: hmsx,
+  管网排查与修复: gwpc,
+  管网及泵站: gwpz,
+  GIS平台建设与监测设施: ptss,
+  其他: qt,
+};
+
+const getIcon = name => {
+  return obj[name];
+};
+let layerList = ['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'];
+async function projectInfoNewM(p) {
+  console.log('ppppp---', p);
+  let { data, code } = await projectInfoNew(p);
+  if (code == 200) {
+    //newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
+    listDataXm.value = data;
+    console.log(typeof p);
+    // if (!p || !p.projectTypeId) {
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], true); //全部
+    // } else if (p.projectTypeId == '1701128641279070210') {
+    //   newfiberMap.setLayersVisible(['HMJZYSQ'], true);
+    //   newfiberMap.setLayersVisible(['HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //社区
+    // } else if (p.projectTypeId == '1701128777853997058') {
+    //   newfiberMap.setLayersVisible(['HMXDLGC'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //道路
+    // } else if (p.projectTypeId == '1701128863459741697') {
+    //   newfiberMap.setLayersVisible(['HMXGYLD'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //绿地
+    // } else if (p.projectTypeId == '1701128943340261378') {
+    //   newfiberMap.setLayersVisible(['HMXSX'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //水系
+    // } else if (p.projectTypeId == '1701129031496142849') {
+    //   newfiberMap.setLayersVisible(['GWPCYXF'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWJBZ', 'GIS'], false); //管网排查
+    // } else if (p.projectTypeId == '1701129103495565313') {
+    //   newfiberMap.setLayersVisible(['GWJBZ'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GIS'], false); //管网泵站
+    // } else if (p.projectTypeId == '1701129308194377729') {
+    //   newfiberMap.setLayersVisible(['GIS'], true);
+    //   newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ'], false); //GIS
+    // }
+  }
+}
+//海绵工程gis渲染
+const addProjectLayers = async () => {
+  let typeList = ['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other'];
+  let colorList = [
+    'rgba(187, 129, 255,1)',
+    'rgba(253, 184, 100,1)',
+    'rgba(215, 231, 44,1)',
+    'rgba(104, 176, 255,1)',
+    'rgba(234, 116, 76,1)',
+    'rgba(42, 231, 230,1)',
+    'rgba(229, 64, 50,1)',
+    'rgba(220, 220, 157,1)',
+  ];
+  let { data, code } = await projectInfoNew();
+  let pointList = [],
+    lineList = [],
+    polygonList = [];
+  if (code == 200) {
+    data.forEach((element, index) => {
+      element.fillcolor = colorList[typeList.indexOf(element.projectTypeCode)];
+      if (element.projectrange) {
+        let geometryToFrature = {
+          type: 'Feature',
+          geometry: Terraformer.WKT.parse(element.projectrange),
+          properties: {
+            fillcolor: element.fillcolor,
+            projectNo: element.projectNo,
+            name: element.projectAbbreviation,
+            projectName: element.projectName,
+            projectNo: element.projectNo,
+          },
+        };
+        if (element.projectrange.includes('POINT')) {
+          pointList.push(geometryToFrature);
+        } else if (element.projectrange.includes('LINESTRING')) {
+          lineList.push(geometryToFrature);
+        } else if (element.projectrange.includes('POLYGON')) {
+          polygonList.push(geometryToFrature);
+        }
+      }
+    });
+    let pointGeojson = {
+      type: 'FeatureCollection',
+      features: pointList,
+    };
+    let lineGeojson = {
+      type: 'FeatureCollection',
+      features: lineList,
+    };
+    let polygonGeojson = {
+      type: 'FeatureCollection',
+      features: polygonList,
+    };
+    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('polygonGeojson', polygonGeojson, 15);
+    newfiberMapBoxVectorLayer.addGeojsonLineWithLabel('lineGeojson', lineGeojson, 5, 15);
+    newfiberMapBoxVectorLayer.addGeojsonCircle('pointGeojson', pointGeojson, 15);
+  }
+};
+const AllData = reactive({
+  queryParams: {},
+});
+const ProjectClick = async row => {
+  listActive.value = row;
+  listDataXm.value.map(i => {
+    if (row.id == i.id) {
+      i.checked = !i.checked;
+    } else {
+      i.checked = false;
+    }
+  });
+
+  //newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
+  let arr = listDataXm.value.filter(i => i.checked);
+  emitM('qipaoDateMeth', arr[0], arr[0]?.checked);
+  let lonlat = row.projectLocation.split(',').map(Number);
+  newfiberMapbox.map.easeTo({
+    center: lonlat,
+    zoom: 15.5,
+    pitch: 55,
+  });
+};
+
+const { queryParams } = toRefs(AllData);
+function stationListChange(v) {
+  projectInfoNewM({ projectNo: v });
+}
+
+projectInfoNewM();
+bus.on('getProjectList', (i, v) => {
+  if (i.length > 0) projectInfoNewM({ buildStatus: i[0]?.buildStatus });
+  else projectInfoNewM({ projectTypeId: i.typeId });
+});
+onMounted(() => {
+  bus.emit('setIniteLayer', []);
+  addProjectLayers();
+  // newfiberMap.setCenter({
+  //   lng: 114.322,
+  //   lat: 34.602,
+  //   heading: 2.281299097855777,
+  //   zoom: 10358.12942752382,
+  //   pitch: -25.2508969308367,
+  //   roll: 0.005453465256790101,
+  // });
+});
+onBeforeUnmount(() => {
+  if (!newfiberMapbox) return;
+  newfiberMapBoxVectorLayer.removeByIds([
+    'polygonGeojson',
+    'lineGeojson',
+    'pointGeojson',
+    'polygonGeojson_label',
+    'lineGeojson_label',
+    'pointGeojson_label',
+  ]);
+});
+</script>
+
+<style lang="scss" scoped>
+.publicContainerA {
+  margin-top: 10px;
+}
+.ConstrucClass {
+  width: 100%;
+  height: calc(100vh - 520px);
+  background: #004565;
+  opacity: 0.8;
+  margin-top: -5px;
+  .HeadContent {
+    width: 100%;
+    margin-top: 2px;
+  }
+  .ConstrucNr {
+    width: 100%;
+    height: 88%;
+    overflow: auto;
+    margin-top: -20px;
+    .listXm {
+      position: relative;
+      width: 95%;
+      height: 50px;
+      background: url('@/assets/newImgs/HMScreen/ujnasf.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      margin: 5px auto;
+      .Icon_zp {
+        width: 32px;
+        height: 32px;
+        position: relative;
+        top: 9px;
+        left: 20px;
+        // background: red;
+      }
+      .XmName {
+        position: relative;
+        left: 70px;
+        top: 15px;
+        width: 315px;
+        height: 50px;
+        // background: red;
+        overflow: hidden;
+        white-space: nowrap; /* 防止文字换行 */
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+:deep(.el-input__inner) {
+  background: #11559b !important;
+  // box-shadow: 0 0 0 0.00521rem #066592 inset !important;
+  color: #fff !important;
+  width: 390px !important;
+}
+:deep(.el-input__wrapper, .el-textarea__inner) {
+  background: #11559b !important;
+  // box-shadow: 0 0 0 0.00521rem  inset !important;
+  color: #fff !important;
+}
+:deep(.el-form-item__content) {
+  margin: 10px;
+}
+.activeConstruListA {
+  color: #cbc05a;
+}
+:deep(.scroll > div > :nth-child(2)) {
+  display: none !important;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/index.vue b/src/views/sponeScreen/projectHM/index.vue
index bbb9286..6f73580 100644
--- a/src/views/sponeScreen/projectHM/index.vue
+++ b/src/views/sponeScreen/projectHM/index.vue
@@ -23,7 +23,7 @@
 import CaldarRain from '@/views/sponeScreen/waterFlood/rainCaldar.vue'; //降雨日历
 import ConstructionStatus from '@/views/sponeScreen/projectHM/ConstructionStatus.vue'; //建设状态
 import ProjectYype from '@/views/sponeScreen/projectHM/ProjectYype.vue'; //建设状态
-import ProjectDisplay from '@/views/sponeScreen/projectHM/ProjectDisplay.vue'; //项目展示
+import ProjectDisplay from '@/views/sponeScreen/projectHM/ProjectDisplay_1.vue'; //项目展示
 import ProjectEvaluation from '@/views/sponeScreen/projectHM/ProjectEvaluation.vue'; //项目评估
 import qipao from '@/views/sponeScreen/projectHM/gongchenkanbani_comp/qipao.vue';
 const { proxy } = getCurrentInstance();