diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
index e89b33e..9699782 100644
--- a/src/views/sponeScreen/projectHM/ProjectDisplay.vue
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -29,10 +29,7 @@
 </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 { projectInfoNew } from '@/api/sponeScreen/gcpjApi.js';
 import bus from '@/bus';
 import dlgc from '@/assets/images/zonglan/2.png';
 import gyld from '@/assets/images/zonglan/3.png';
@@ -42,13 +39,16 @@
 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 { nextTick, onMounted } from 'vue';
+import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
+import projectArea from '@/assets/geojson/kaifeng/projectArea.json';
+import projectArea1 from '@/assets/geojson/kaifeng/projectArea1.json';
+import projectArea2 from '@/assets/geojson/kaifeng/projectArea2.json';
+
 const emitM = defineEmits();
 const listDataXm = ref([]);
 const listActive = ref({});
 const searvhDate = ref('');
+const projectTimer = ref(null);
 const obj = {
   海绵建筑与社区: jzsq,
   海绵型道路广场: dlgc,
@@ -68,101 +68,93 @@
   console.log('ppppp---', p);
   let { data, code } = await projectInfoNew(p);
   if (code == 200) {
-    newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
+    //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
-    }
+    // 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) {
-    let projectList = [
-      {
-        layerLabel: '海绵建筑与社区',
-        layerName: 'HMJZYSQ',
-        data: [],
-      },
-      {
-        layerLabel: '海绵型道路广场',
-        layerName: 'HMXDLGC',
-        data: [],
-      },
-      {
-        layerLabel: '海绵型公园绿地',
-        layerName: 'HMXGYLD',
-        data: [],
-      },
-      {
-        layerLabel: '海绵型水系',
-        layerName: 'HMXSX',
-        data: [],
-      },
-      {
-        layerLabel: '管网排查与修复',
-        layerName: 'GWPCYXF',
-        data: [],
-      },
-      {
-        layerLabel: '管网及泵站',
-        layerName: 'GWJBZ',
-        data: [],
-      },
-      {
-        layerLabel: 'GIS平台建设与监测设施',
-        layerName: 'GIS',
-        data: [],
-      },
-    ];
-    //海绵工程数据分类
-    projectList.forEach(projectItem => {
-      data.forEach(item => {
-        if (item.projectTypeCode == projectItem.layerName) projectItem.data.push(item);
-      });
+    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,
+            projectLocation: element.projectLocation,
+            id: element.id,
+          },
+        };
+        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);
+        }
+      }
     });
-    //海绵工程上图
-    projectList.forEach(projectItem => {
-      let mapDataFeatures = [];
-      let mapDataGeojson = {};
-      projectItem.data.forEach((item, index) => {
-        if (!!!item.projectLocation) return;
-        let projectWKT = `POINT(${item.projectLocation.split(',').join(' ')})`;
-
-        let feature = { type: 'Feature', geometry: Terraformer.WKT.parse(projectWKT), properties: item };
-        mapDataFeatures.push(feature);
-      });
-
-      mapDataGeojson = {
-        type: 'FeatureCollection',
-        features: mapDataFeatures,
-      };
-      if (!mapDataGeojson.features.length) return;
-      newfiberVectorLayer.addGeojsonPoint(newfiberMap, mapDataGeojson, getIcon(projectItem.layerLabel), projectItem.layerName);
-    });
+    let pointGeojson = {
+      type: 'FeatureCollection',
+      features: pointList,
+    };
+    let lineGeojson = {
+      type: 'FeatureCollection',
+      features: lineList,
+    };
+    let polygonGeojson = {
+      type: 'FeatureCollection',
+      features: polygonList,
+    };
+    // 项目名称图层
+    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('polygonGeojson', polygonGeojson, 12);
+    newfiberMapBoxVectorLayer.addGeojsonLineWithLabel('lineGeojson', lineGeojson, 5, 12);
+    newfiberMapBoxVectorLayer.addGeojsonCircle('pointGeojson', pointGeojson, 12);
   }
 };
 const AllData = reactive({
@@ -178,73 +170,15 @@
     }
   });
 
-  newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
+  //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);
-  newfiberMap.setCenter({
-    lng: lonlat[0],
-    lat: lonlat[1] - 0.05,
-    zoom: 3000,
-    heading: 2.281299097855777,
-    pitch: -25.2508969308367,
-    roll: 0.005453465256790101,
+  newfiberMapbox.map.easeTo({
+    center: lonlat,
+    zoom: 15.5,
+    pitch: 55,
   });
-
-  let parse = {
-    projectNo: row.projectNo,
-  };
-  //添加海绵设施
-
-  let haimianRes = await queryProjectStation(parse);
-  if (haimianRes && haimianRes.code == 200) {
-    console.log('haimianRes---', haimianRes.data);
-    if (!!haimianRes.data.length) {
-      let features = [];
-      let feature = {};
-      haimianRes.data.forEach(data => {
-        let lonlat = data.lonlat.split(',');
-        feature = {
-          type: 'Feature',
-          geometry: {
-            type: 'Point',
-            coordinates: [Number(lonlat[0]), Number(lonlat[1])],
-          },
-          properties: data,
-        };
-        features.push(feature);
-      });
-      let haimianFacility = {
-        type: 'FeatureCollection',
-        features: features,
-      };
-      newfiberVectorLayer.addGeojsonPoint(
-        newfiberMap,
-        haimianFacility,
-        getImageUrl('spongeFacility_icon.png', 'cesiumMap/legendIcon'),
-        'haimianFacility'
-      );
-    }
-  }
-  //海绵工程边界
-  let res = await selectProjectImageList(parse);
-  if (res && res.code == 200) {
-    let projectInfo = res.data[0];
-    console.log('res----', projectInfo);
-    if (!projectInfo.geometry) return;
-    let projectGeojson = {
-      type: 'FeatureCollection',
-      features: [{ type: 'Feature', geometry: Terraformer.WKT.parse(projectInfo.geometry), properties: projectInfo }],
-    };
-    if (projectInfo.geometry.includes('MULTILINESTRING')) {
-      newfiberVectorLayer.addLightenLine(projectGeojson, 'projectBoundaryLayers');
-    } else if (projectInfo.geometry.includes('MULTIPOLYGON')) {
-      let polygonToWall = turf.polygonToLine(projectGeojson.features[0].geometry, projectGeojson.features[0].properties);
-      newfiberVectorLayer.addGeojsonWall(newfiberMap, polygonToWall, 'projectBoundaryLayers');
-    } else {
-      newfiberVectorLayer.addLightenClrcle(projectGeojson, 'projectBoundaryLayers');
-    }
-  }
 };
 
 const { queryParams } = toRefs(AllData);
@@ -258,29 +192,100 @@
   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,
+
+  newfiberMapbox.map.easeTo({
+    center: [114.345, 34.801],
+    zoom: 13.8,
+    pitch: 55,
   });
+  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea', projectArea, 20, 0.4, 0.6);
+  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea_dynamicLine', projectArea, 3, 0.8);
+  // let lineWidth = 1;
+  // projectTimer.value = setInterval(() => {
+  //   lineWidth += 0.5;
+  //   if (lineWidth > 10) {
+  //     lineWidth = 3;
+  //   }
+  //   newfiberMapbox.map.setPaintProperty('projectArea_dynamicLine', 'line-width', lineWidth);
+  // });
+  //项目边界
+  let layer = new mapboxL7.LineLayer({
+    name: 'projectArea',
+  })
+    .source(projectArea)
+    .size(40)
+    .shape('wall')
+    .style({
+      opacity: 1,
+      sourceColor: '#1cd66c',
+      targetColor: 'rbga(0,255,255, 1)',
+    });
+  newfiberMapbox.addLayer(layer);
+
+  let layer2 = new mapboxL7.LineLayer({
+    name: 'projectArea2',
+  })
+    .source(projectArea2)
+    .size(40)
+    .shape('wall')
+    .style({
+      opacity: 1,
+      sourceColor: '#0075ff',
+      targetColor: 'rbga(0,255,255, 1)',
+    });
+  newfiberMapbox.addLayer(layer2);
+
+  let layer1 = new mapboxL7.LineLayer({
+    name: 'projectArea1',
+  })
+    .source(projectArea1)
+    .size(40)
+    .shape('wall')
+    .style({
+      opacity: 1,
+      sourceColor: '#fcc424',
+      targetColor: 'rbga(0,255,255, 1)',
+    });
+  newfiberMapbox.addLayer(layer1);
+
+  newfiberMapbox.map.on('click', ['polygonGeojson', 'lineGeojson', 'pointGeojson'], e => {
+    const feature = newfiberMapbox.map
+      .queryRenderedFeatures([
+        [e.point.x - 10 / 2, e.point.y - 10 / 2],
+        [e.point.x + 10 / 2, e.point.y + 10 / 2],
+      ])
+      .filter(i => !!i.layer.id)[0];
+    let properties = feature.properties;
+    ProjectClick(properties);
+    console.log('feature--', '海绵项目点击事件', properties);
+  });
+  // newfiberMap.setCenter({
+  //   lng: 114.322,
+  //   lat: 34.602,
+  //   heading: 2.281299097855777,
+  //   zoom: 10358.12942752382,
+  //   pitch: -25.2508969308367,
+  //   roll: 0.005453465256790101,
+  // });
 });
 onBeforeUnmount(() => {
-  if (!newfiberMap) return;
-  newfiberMap.removeByIds([
-    'projectBoundaryLayers',
-    'HMJZYSQ',
-    'HMXDLGC',
-    'HMXGYLD',
-    'HMXSX',
-    'GWPCYXF',
-    'GWJBZ',
-    'GIS',
-    'haimianFacility',
+  clearInterval(projectTimer.value);
+  if (!newfiberMapbox) return;
+  newfiberMapBoxVectorLayer.removeByIds([
+    'polygonGeojson',
+    'lineGeojson',
+    'pointGeojson',
+    'polygonGeojson_label',
+    'lineGeojson_label',
+    'pointGeojson_label',
+    'projectArea',
+    'projectArea_dynamicLine',
   ]);
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea'));
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea1'));
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea2'));
 });
 </script>
 

diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
index e89b33e..9699782 100644
--- a/src/views/sponeScreen/projectHM/ProjectDisplay.vue
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -29,10 +29,7 @@
 </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 { projectInfoNew } from '@/api/sponeScreen/gcpjApi.js';
 import bus from '@/bus';
 import dlgc from '@/assets/images/zonglan/2.png';
 import gyld from '@/assets/images/zonglan/3.png';
@@ -42,13 +39,16 @@
 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 { nextTick, onMounted } from 'vue';
+import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
+import projectArea from '@/assets/geojson/kaifeng/projectArea.json';
+import projectArea1 from '@/assets/geojson/kaifeng/projectArea1.json';
+import projectArea2 from '@/assets/geojson/kaifeng/projectArea2.json';
+
 const emitM = defineEmits();
 const listDataXm = ref([]);
 const listActive = ref({});
 const searvhDate = ref('');
+const projectTimer = ref(null);
 const obj = {
   海绵建筑与社区: jzsq,
   海绵型道路广场: dlgc,
@@ -68,101 +68,93 @@
   console.log('ppppp---', p);
   let { data, code } = await projectInfoNew(p);
   if (code == 200) {
-    newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
+    //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
-    }
+    // 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) {
-    let projectList = [
-      {
-        layerLabel: '海绵建筑与社区',
-        layerName: 'HMJZYSQ',
-        data: [],
-      },
-      {
-        layerLabel: '海绵型道路广场',
-        layerName: 'HMXDLGC',
-        data: [],
-      },
-      {
-        layerLabel: '海绵型公园绿地',
-        layerName: 'HMXGYLD',
-        data: [],
-      },
-      {
-        layerLabel: '海绵型水系',
-        layerName: 'HMXSX',
-        data: [],
-      },
-      {
-        layerLabel: '管网排查与修复',
-        layerName: 'GWPCYXF',
-        data: [],
-      },
-      {
-        layerLabel: '管网及泵站',
-        layerName: 'GWJBZ',
-        data: [],
-      },
-      {
-        layerLabel: 'GIS平台建设与监测设施',
-        layerName: 'GIS',
-        data: [],
-      },
-    ];
-    //海绵工程数据分类
-    projectList.forEach(projectItem => {
-      data.forEach(item => {
-        if (item.projectTypeCode == projectItem.layerName) projectItem.data.push(item);
-      });
+    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,
+            projectLocation: element.projectLocation,
+            id: element.id,
+          },
+        };
+        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);
+        }
+      }
     });
-    //海绵工程上图
-    projectList.forEach(projectItem => {
-      let mapDataFeatures = [];
-      let mapDataGeojson = {};
-      projectItem.data.forEach((item, index) => {
-        if (!!!item.projectLocation) return;
-        let projectWKT = `POINT(${item.projectLocation.split(',').join(' ')})`;
-
-        let feature = { type: 'Feature', geometry: Terraformer.WKT.parse(projectWKT), properties: item };
-        mapDataFeatures.push(feature);
-      });
-
-      mapDataGeojson = {
-        type: 'FeatureCollection',
-        features: mapDataFeatures,
-      };
-      if (!mapDataGeojson.features.length) return;
-      newfiberVectorLayer.addGeojsonPoint(newfiberMap, mapDataGeojson, getIcon(projectItem.layerLabel), projectItem.layerName);
-    });
+    let pointGeojson = {
+      type: 'FeatureCollection',
+      features: pointList,
+    };
+    let lineGeojson = {
+      type: 'FeatureCollection',
+      features: lineList,
+    };
+    let polygonGeojson = {
+      type: 'FeatureCollection',
+      features: polygonList,
+    };
+    // 项目名称图层
+    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('polygonGeojson', polygonGeojson, 12);
+    newfiberMapBoxVectorLayer.addGeojsonLineWithLabel('lineGeojson', lineGeojson, 5, 12);
+    newfiberMapBoxVectorLayer.addGeojsonCircle('pointGeojson', pointGeojson, 12);
   }
 };
 const AllData = reactive({
@@ -178,73 +170,15 @@
     }
   });
 
-  newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
+  //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);
-  newfiberMap.setCenter({
-    lng: lonlat[0],
-    lat: lonlat[1] - 0.05,
-    zoom: 3000,
-    heading: 2.281299097855777,
-    pitch: -25.2508969308367,
-    roll: 0.005453465256790101,
+  newfiberMapbox.map.easeTo({
+    center: lonlat,
+    zoom: 15.5,
+    pitch: 55,
   });
-
-  let parse = {
-    projectNo: row.projectNo,
-  };
-  //添加海绵设施
-
-  let haimianRes = await queryProjectStation(parse);
-  if (haimianRes && haimianRes.code == 200) {
-    console.log('haimianRes---', haimianRes.data);
-    if (!!haimianRes.data.length) {
-      let features = [];
-      let feature = {};
-      haimianRes.data.forEach(data => {
-        let lonlat = data.lonlat.split(',');
-        feature = {
-          type: 'Feature',
-          geometry: {
-            type: 'Point',
-            coordinates: [Number(lonlat[0]), Number(lonlat[1])],
-          },
-          properties: data,
-        };
-        features.push(feature);
-      });
-      let haimianFacility = {
-        type: 'FeatureCollection',
-        features: features,
-      };
-      newfiberVectorLayer.addGeojsonPoint(
-        newfiberMap,
-        haimianFacility,
-        getImageUrl('spongeFacility_icon.png', 'cesiumMap/legendIcon'),
-        'haimianFacility'
-      );
-    }
-  }
-  //海绵工程边界
-  let res = await selectProjectImageList(parse);
-  if (res && res.code == 200) {
-    let projectInfo = res.data[0];
-    console.log('res----', projectInfo);
-    if (!projectInfo.geometry) return;
-    let projectGeojson = {
-      type: 'FeatureCollection',
-      features: [{ type: 'Feature', geometry: Terraformer.WKT.parse(projectInfo.geometry), properties: projectInfo }],
-    };
-    if (projectInfo.geometry.includes('MULTILINESTRING')) {
-      newfiberVectorLayer.addLightenLine(projectGeojson, 'projectBoundaryLayers');
-    } else if (projectInfo.geometry.includes('MULTIPOLYGON')) {
-      let polygonToWall = turf.polygonToLine(projectGeojson.features[0].geometry, projectGeojson.features[0].properties);
-      newfiberVectorLayer.addGeojsonWall(newfiberMap, polygonToWall, 'projectBoundaryLayers');
-    } else {
-      newfiberVectorLayer.addLightenClrcle(projectGeojson, 'projectBoundaryLayers');
-    }
-  }
 };
 
 const { queryParams } = toRefs(AllData);
@@ -258,29 +192,100 @@
   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,
+
+  newfiberMapbox.map.easeTo({
+    center: [114.345, 34.801],
+    zoom: 13.8,
+    pitch: 55,
   });
+  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea', projectArea, 20, 0.4, 0.6);
+  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea_dynamicLine', projectArea, 3, 0.8);
+  // let lineWidth = 1;
+  // projectTimer.value = setInterval(() => {
+  //   lineWidth += 0.5;
+  //   if (lineWidth > 10) {
+  //     lineWidth = 3;
+  //   }
+  //   newfiberMapbox.map.setPaintProperty('projectArea_dynamicLine', 'line-width', lineWidth);
+  // });
+  //项目边界
+  let layer = new mapboxL7.LineLayer({
+    name: 'projectArea',
+  })
+    .source(projectArea)
+    .size(40)
+    .shape('wall')
+    .style({
+      opacity: 1,
+      sourceColor: '#1cd66c',
+      targetColor: 'rbga(0,255,255, 1)',
+    });
+  newfiberMapbox.addLayer(layer);
+
+  let layer2 = new mapboxL7.LineLayer({
+    name: 'projectArea2',
+  })
+    .source(projectArea2)
+    .size(40)
+    .shape('wall')
+    .style({
+      opacity: 1,
+      sourceColor: '#0075ff',
+      targetColor: 'rbga(0,255,255, 1)',
+    });
+  newfiberMapbox.addLayer(layer2);
+
+  let layer1 = new mapboxL7.LineLayer({
+    name: 'projectArea1',
+  })
+    .source(projectArea1)
+    .size(40)
+    .shape('wall')
+    .style({
+      opacity: 1,
+      sourceColor: '#fcc424',
+      targetColor: 'rbga(0,255,255, 1)',
+    });
+  newfiberMapbox.addLayer(layer1);
+
+  newfiberMapbox.map.on('click', ['polygonGeojson', 'lineGeojson', 'pointGeojson'], e => {
+    const feature = newfiberMapbox.map
+      .queryRenderedFeatures([
+        [e.point.x - 10 / 2, e.point.y - 10 / 2],
+        [e.point.x + 10 / 2, e.point.y + 10 / 2],
+      ])
+      .filter(i => !!i.layer.id)[0];
+    let properties = feature.properties;
+    ProjectClick(properties);
+    console.log('feature--', '海绵项目点击事件', properties);
+  });
+  // newfiberMap.setCenter({
+  //   lng: 114.322,
+  //   lat: 34.602,
+  //   heading: 2.281299097855777,
+  //   zoom: 10358.12942752382,
+  //   pitch: -25.2508969308367,
+  //   roll: 0.005453465256790101,
+  // });
 });
 onBeforeUnmount(() => {
-  if (!newfiberMap) return;
-  newfiberMap.removeByIds([
-    'projectBoundaryLayers',
-    'HMJZYSQ',
-    'HMXDLGC',
-    'HMXGYLD',
-    'HMXSX',
-    'GWPCYXF',
-    'GWJBZ',
-    'GIS',
-    'haimianFacility',
+  clearInterval(projectTimer.value);
+  if (!newfiberMapbox) return;
+  newfiberMapBoxVectorLayer.removeByIds([
+    'polygonGeojson',
+    'lineGeojson',
+    'pointGeojson',
+    'polygonGeojson_label',
+    'lineGeojson_label',
+    'pointGeojson_label',
+    'projectArea',
+    'projectArea_dynamicLine',
   ]);
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea'));
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea1'));
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea2'));
 });
 </script>
 
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue b/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue
deleted file mode 100644
index eb02f5e..0000000
--- a/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue
+++ /dev/null
@@ -1,363 +0,0 @@
-<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 projectArea from '@/assets/geojson/kaifeng/projectArea.json';
-import projectArea1 from '@/assets/geojson/kaifeng/projectArea1.json';
-import projectArea2 from '@/assets/geojson/kaifeng/projectArea2.json';
-import { nextTick, onMounted } from 'vue';
-const emitM = defineEmits();
-const listDataXm = ref([]);
-const listActive = ref({});
-const searvhDate = ref('');
-const projectTimer = ref(null);
-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;
-    // 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,
-            projectLocation: element.projectLocation,
-            id: element.id,
-          },
-        };
-        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();
-
-  newfiberMapbox.map.easeTo({
-    center: [114.345, 34.801],
-    zoom: 13.8,
-    pitch: 55,
-  });
-  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea', projectArea, 20, 0.4, 0.6);
-  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea_dynamicLine', projectArea, 3, 0.8);
-  // let lineWidth = 1;
-  // projectTimer.value = setInterval(() => {
-  //   lineWidth += 0.5;
-  //   if (lineWidth > 10) {
-  //     lineWidth = 3;
-  //   }
-  //   newfiberMapbox.map.setPaintProperty('projectArea_dynamicLine', 'line-width', lineWidth);
-  // });
-  //河流流向
-  let layer = new mapboxL7.LineLayer({
-    name: 'projectArea',
-  })
-    .source(projectArea)
-    .size(40)
-    .shape('wall')
-    .style({
-      opacity: 1,
-      sourceColor: '#1cd66c',
-      targetColor: 'rbga(0,255,255, 1)',
-    });
-  newfiberMapbox.addLayer(layer);
-  let layer2 = new mapboxL7.LineLayer({
-    name: 'projectArea2',
-  })
-    .source(projectArea2)
-    .size(40)
-    .shape('wall')
-    .style({
-      opacity: 1,
-      sourceColor: '#0075ff',
-      targetColor: 'rbga(0,255,255, 1)',
-    });
-  newfiberMapbox.addLayer(layer2);
-  let layer1 = new mapboxL7.LineLayer({
-    name: 'projectArea1',
-  })
-    .source(projectArea1)
-    .size(40)
-    .shape('wall')
-    .style({
-      opacity: 1,
-      sourceColor: '#fcc424',
-      targetColor: 'rbga(0,255,255, 1)',
-    });
-  newfiberMapbox.addLayer(layer1);
-  newfiberMapbox.map.on('click', ['polygonGeojson', 'lineGeojson', 'pointGeojson'], e => {
-    const feature = newfiberMapbox.map
-      .queryRenderedFeatures([
-        [e.point.x - 10 / 2, e.point.y - 10 / 2],
-        [e.point.x + 10 / 2, e.point.y + 10 / 2],
-      ])
-      .filter(i => !!i.layer.id)[0];
-    let properties = feature.properties;
-    ProjectClick(properties);
-    console.log('feature--', '海绵项目点击事件', properties);
-  });
-  // newfiberMap.setCenter({
-  //   lng: 114.322,
-  //   lat: 34.602,
-  //   heading: 2.281299097855777,
-  //   zoom: 10358.12942752382,
-  //   pitch: -25.2508969308367,
-  //   roll: 0.005453465256790101,
-  // });
-});
-onBeforeUnmount(() => {
-  clearInterval(projectTimer.value);
-  if (!newfiberMapbox) return;
-  newfiberMapBoxVectorLayer.removeByIds([
-    'polygonGeojson',
-    'lineGeojson',
-    'pointGeojson',
-    'polygonGeojson_label',
-    'lineGeojson_label',
-    'pointGeojson_label',
-    'projectArea',
-    'projectArea_dynamicLine',
-  ]);
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea'));
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea1'));
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea2'));
-});
-</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/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
index e89b33e..9699782 100644
--- a/src/views/sponeScreen/projectHM/ProjectDisplay.vue
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -29,10 +29,7 @@
 </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 { projectInfoNew } from '@/api/sponeScreen/gcpjApi.js';
 import bus from '@/bus';
 import dlgc from '@/assets/images/zonglan/2.png';
 import gyld from '@/assets/images/zonglan/3.png';
@@ -42,13 +39,16 @@
 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 { nextTick, onMounted } from 'vue';
+import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
+import projectArea from '@/assets/geojson/kaifeng/projectArea.json';
+import projectArea1 from '@/assets/geojson/kaifeng/projectArea1.json';
+import projectArea2 from '@/assets/geojson/kaifeng/projectArea2.json';
+
 const emitM = defineEmits();
 const listDataXm = ref([]);
 const listActive = ref({});
 const searvhDate = ref('');
+const projectTimer = ref(null);
 const obj = {
   海绵建筑与社区: jzsq,
   海绵型道路广场: dlgc,
@@ -68,101 +68,93 @@
   console.log('ppppp---', p);
   let { data, code } = await projectInfoNew(p);
   if (code == 200) {
-    newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
+    //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
-    }
+    // 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) {
-    let projectList = [
-      {
-        layerLabel: '海绵建筑与社区',
-        layerName: 'HMJZYSQ',
-        data: [],
-      },
-      {
-        layerLabel: '海绵型道路广场',
-        layerName: 'HMXDLGC',
-        data: [],
-      },
-      {
-        layerLabel: '海绵型公园绿地',
-        layerName: 'HMXGYLD',
-        data: [],
-      },
-      {
-        layerLabel: '海绵型水系',
-        layerName: 'HMXSX',
-        data: [],
-      },
-      {
-        layerLabel: '管网排查与修复',
-        layerName: 'GWPCYXF',
-        data: [],
-      },
-      {
-        layerLabel: '管网及泵站',
-        layerName: 'GWJBZ',
-        data: [],
-      },
-      {
-        layerLabel: 'GIS平台建设与监测设施',
-        layerName: 'GIS',
-        data: [],
-      },
-    ];
-    //海绵工程数据分类
-    projectList.forEach(projectItem => {
-      data.forEach(item => {
-        if (item.projectTypeCode == projectItem.layerName) projectItem.data.push(item);
-      });
+    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,
+            projectLocation: element.projectLocation,
+            id: element.id,
+          },
+        };
+        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);
+        }
+      }
     });
-    //海绵工程上图
-    projectList.forEach(projectItem => {
-      let mapDataFeatures = [];
-      let mapDataGeojson = {};
-      projectItem.data.forEach((item, index) => {
-        if (!!!item.projectLocation) return;
-        let projectWKT = `POINT(${item.projectLocation.split(',').join(' ')})`;
-
-        let feature = { type: 'Feature', geometry: Terraformer.WKT.parse(projectWKT), properties: item };
-        mapDataFeatures.push(feature);
-      });
-
-      mapDataGeojson = {
-        type: 'FeatureCollection',
-        features: mapDataFeatures,
-      };
-      if (!mapDataGeojson.features.length) return;
-      newfiberVectorLayer.addGeojsonPoint(newfiberMap, mapDataGeojson, getIcon(projectItem.layerLabel), projectItem.layerName);
-    });
+    let pointGeojson = {
+      type: 'FeatureCollection',
+      features: pointList,
+    };
+    let lineGeojson = {
+      type: 'FeatureCollection',
+      features: lineList,
+    };
+    let polygonGeojson = {
+      type: 'FeatureCollection',
+      features: polygonList,
+    };
+    // 项目名称图层
+    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('polygonGeojson', polygonGeojson, 12);
+    newfiberMapBoxVectorLayer.addGeojsonLineWithLabel('lineGeojson', lineGeojson, 5, 12);
+    newfiberMapBoxVectorLayer.addGeojsonCircle('pointGeojson', pointGeojson, 12);
   }
 };
 const AllData = reactive({
@@ -178,73 +170,15 @@
     }
   });
 
-  newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
+  //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);
-  newfiberMap.setCenter({
-    lng: lonlat[0],
-    lat: lonlat[1] - 0.05,
-    zoom: 3000,
-    heading: 2.281299097855777,
-    pitch: -25.2508969308367,
-    roll: 0.005453465256790101,
+  newfiberMapbox.map.easeTo({
+    center: lonlat,
+    zoom: 15.5,
+    pitch: 55,
   });
-
-  let parse = {
-    projectNo: row.projectNo,
-  };
-  //添加海绵设施
-
-  let haimianRes = await queryProjectStation(parse);
-  if (haimianRes && haimianRes.code == 200) {
-    console.log('haimianRes---', haimianRes.data);
-    if (!!haimianRes.data.length) {
-      let features = [];
-      let feature = {};
-      haimianRes.data.forEach(data => {
-        let lonlat = data.lonlat.split(',');
-        feature = {
-          type: 'Feature',
-          geometry: {
-            type: 'Point',
-            coordinates: [Number(lonlat[0]), Number(lonlat[1])],
-          },
-          properties: data,
-        };
-        features.push(feature);
-      });
-      let haimianFacility = {
-        type: 'FeatureCollection',
-        features: features,
-      };
-      newfiberVectorLayer.addGeojsonPoint(
-        newfiberMap,
-        haimianFacility,
-        getImageUrl('spongeFacility_icon.png', 'cesiumMap/legendIcon'),
-        'haimianFacility'
-      );
-    }
-  }
-  //海绵工程边界
-  let res = await selectProjectImageList(parse);
-  if (res && res.code == 200) {
-    let projectInfo = res.data[0];
-    console.log('res----', projectInfo);
-    if (!projectInfo.geometry) return;
-    let projectGeojson = {
-      type: 'FeatureCollection',
-      features: [{ type: 'Feature', geometry: Terraformer.WKT.parse(projectInfo.geometry), properties: projectInfo }],
-    };
-    if (projectInfo.geometry.includes('MULTILINESTRING')) {
-      newfiberVectorLayer.addLightenLine(projectGeojson, 'projectBoundaryLayers');
-    } else if (projectInfo.geometry.includes('MULTIPOLYGON')) {
-      let polygonToWall = turf.polygonToLine(projectGeojson.features[0].geometry, projectGeojson.features[0].properties);
-      newfiberVectorLayer.addGeojsonWall(newfiberMap, polygonToWall, 'projectBoundaryLayers');
-    } else {
-      newfiberVectorLayer.addLightenClrcle(projectGeojson, 'projectBoundaryLayers');
-    }
-  }
 };
 
 const { queryParams } = toRefs(AllData);
@@ -258,29 +192,100 @@
   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,
+
+  newfiberMapbox.map.easeTo({
+    center: [114.345, 34.801],
+    zoom: 13.8,
+    pitch: 55,
   });
+  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea', projectArea, 20, 0.4, 0.6);
+  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea_dynamicLine', projectArea, 3, 0.8);
+  // let lineWidth = 1;
+  // projectTimer.value = setInterval(() => {
+  //   lineWidth += 0.5;
+  //   if (lineWidth > 10) {
+  //     lineWidth = 3;
+  //   }
+  //   newfiberMapbox.map.setPaintProperty('projectArea_dynamicLine', 'line-width', lineWidth);
+  // });
+  //项目边界
+  let layer = new mapboxL7.LineLayer({
+    name: 'projectArea',
+  })
+    .source(projectArea)
+    .size(40)
+    .shape('wall')
+    .style({
+      opacity: 1,
+      sourceColor: '#1cd66c',
+      targetColor: 'rbga(0,255,255, 1)',
+    });
+  newfiberMapbox.addLayer(layer);
+
+  let layer2 = new mapboxL7.LineLayer({
+    name: 'projectArea2',
+  })
+    .source(projectArea2)
+    .size(40)
+    .shape('wall')
+    .style({
+      opacity: 1,
+      sourceColor: '#0075ff',
+      targetColor: 'rbga(0,255,255, 1)',
+    });
+  newfiberMapbox.addLayer(layer2);
+
+  let layer1 = new mapboxL7.LineLayer({
+    name: 'projectArea1',
+  })
+    .source(projectArea1)
+    .size(40)
+    .shape('wall')
+    .style({
+      opacity: 1,
+      sourceColor: '#fcc424',
+      targetColor: 'rbga(0,255,255, 1)',
+    });
+  newfiberMapbox.addLayer(layer1);
+
+  newfiberMapbox.map.on('click', ['polygonGeojson', 'lineGeojson', 'pointGeojson'], e => {
+    const feature = newfiberMapbox.map
+      .queryRenderedFeatures([
+        [e.point.x - 10 / 2, e.point.y - 10 / 2],
+        [e.point.x + 10 / 2, e.point.y + 10 / 2],
+      ])
+      .filter(i => !!i.layer.id)[0];
+    let properties = feature.properties;
+    ProjectClick(properties);
+    console.log('feature--', '海绵项目点击事件', properties);
+  });
+  // newfiberMap.setCenter({
+  //   lng: 114.322,
+  //   lat: 34.602,
+  //   heading: 2.281299097855777,
+  //   zoom: 10358.12942752382,
+  //   pitch: -25.2508969308367,
+  //   roll: 0.005453465256790101,
+  // });
 });
 onBeforeUnmount(() => {
-  if (!newfiberMap) return;
-  newfiberMap.removeByIds([
-    'projectBoundaryLayers',
-    'HMJZYSQ',
-    'HMXDLGC',
-    'HMXGYLD',
-    'HMXSX',
-    'GWPCYXF',
-    'GWJBZ',
-    'GIS',
-    'haimianFacility',
+  clearInterval(projectTimer.value);
+  if (!newfiberMapbox) return;
+  newfiberMapBoxVectorLayer.removeByIds([
+    'polygonGeojson',
+    'lineGeojson',
+    'pointGeojson',
+    'polygonGeojson_label',
+    'lineGeojson_label',
+    'pointGeojson_label',
+    'projectArea',
+    'projectArea_dynamicLine',
   ]);
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea'));
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea1'));
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea2'));
 });
 </script>
 
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue b/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue
deleted file mode 100644
index eb02f5e..0000000
--- a/src/views/sponeScreen/projectHM/ProjectDisplay_1.vue
+++ /dev/null
@@ -1,363 +0,0 @@
-<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 projectArea from '@/assets/geojson/kaifeng/projectArea.json';
-import projectArea1 from '@/assets/geojson/kaifeng/projectArea1.json';
-import projectArea2 from '@/assets/geojson/kaifeng/projectArea2.json';
-import { nextTick, onMounted } from 'vue';
-const emitM = defineEmits();
-const listDataXm = ref([]);
-const listActive = ref({});
-const searvhDate = ref('');
-const projectTimer = ref(null);
-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;
-    // 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,
-            projectLocation: element.projectLocation,
-            id: element.id,
-          },
-        };
-        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();
-
-  newfiberMapbox.map.easeTo({
-    center: [114.345, 34.801],
-    zoom: 13.8,
-    pitch: 55,
-  });
-  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea', projectArea, 20, 0.4, 0.6);
-  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea_dynamicLine', projectArea, 3, 0.8);
-  // let lineWidth = 1;
-  // projectTimer.value = setInterval(() => {
-  //   lineWidth += 0.5;
-  //   if (lineWidth > 10) {
-  //     lineWidth = 3;
-  //   }
-  //   newfiberMapbox.map.setPaintProperty('projectArea_dynamicLine', 'line-width', lineWidth);
-  // });
-  //河流流向
-  let layer = new mapboxL7.LineLayer({
-    name: 'projectArea',
-  })
-    .source(projectArea)
-    .size(40)
-    .shape('wall')
-    .style({
-      opacity: 1,
-      sourceColor: '#1cd66c',
-      targetColor: 'rbga(0,255,255, 1)',
-    });
-  newfiberMapbox.addLayer(layer);
-  let layer2 = new mapboxL7.LineLayer({
-    name: 'projectArea2',
-  })
-    .source(projectArea2)
-    .size(40)
-    .shape('wall')
-    .style({
-      opacity: 1,
-      sourceColor: '#0075ff',
-      targetColor: 'rbga(0,255,255, 1)',
-    });
-  newfiberMapbox.addLayer(layer2);
-  let layer1 = new mapboxL7.LineLayer({
-    name: 'projectArea1',
-  })
-    .source(projectArea1)
-    .size(40)
-    .shape('wall')
-    .style({
-      opacity: 1,
-      sourceColor: '#fcc424',
-      targetColor: 'rbga(0,255,255, 1)',
-    });
-  newfiberMapbox.addLayer(layer1);
-  newfiberMapbox.map.on('click', ['polygonGeojson', 'lineGeojson', 'pointGeojson'], e => {
-    const feature = newfiberMapbox.map
-      .queryRenderedFeatures([
-        [e.point.x - 10 / 2, e.point.y - 10 / 2],
-        [e.point.x + 10 / 2, e.point.y + 10 / 2],
-      ])
-      .filter(i => !!i.layer.id)[0];
-    let properties = feature.properties;
-    ProjectClick(properties);
-    console.log('feature--', '海绵项目点击事件', properties);
-  });
-  // newfiberMap.setCenter({
-  //   lng: 114.322,
-  //   lat: 34.602,
-  //   heading: 2.281299097855777,
-  //   zoom: 10358.12942752382,
-  //   pitch: -25.2508969308367,
-  //   roll: 0.005453465256790101,
-  // });
-});
-onBeforeUnmount(() => {
-  clearInterval(projectTimer.value);
-  if (!newfiberMapbox) return;
-  newfiberMapBoxVectorLayer.removeByIds([
-    'polygonGeojson',
-    'lineGeojson',
-    'pointGeojson',
-    'polygonGeojson_label',
-    'lineGeojson_label',
-    'pointGeojson_label',
-    'projectArea',
-    'projectArea_dynamicLine',
-  ]);
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea'));
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea1'));
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea2'));
-});
-</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 50838f5..5598a38 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_1.vue'; //项目展示
+import ProjectDisplay from '@/views/sponeScreen/projectHM/ProjectDisplay.vue'; //项目展示
 import ProjectEvaluation from '@/views/sponeScreen/projectHM/ProjectEvaluation.vue'; //项目评估
 import qipao from '@/views/sponeScreen/projectHM/gongchenkanbani_comp/qipao.vue';
 const { proxy } = getCurrentInstance();
@@ -40,7 +40,6 @@
 watch(
   () => props.showPanel,
   () => {
-    console.log('val---', props.showPanel);
     showPanel.value = props.showPanel;
   },
   { immediate: true }