diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 2841368..39d0d18 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -209,6 +209,7 @@
   getWeather();
 });
 onBeforeUnmount(() => {
+  if (!newfiberMap) return;
   if (newfiberMap) {
     console.log('newfiberMap.getMap().destroy()');
     let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;

diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 2841368..39d0d18 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -209,6 +209,7 @@
   getWeather();
 });
 onBeforeUnmount(() => {
+  if (!newfiberMap) return;
   if (newfiberMap) {
     console.log('newfiberMap.getMap().destroy()');
     let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
diff --git a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
index 3075239..d2a1340 100644
--- a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
+++ b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
@@ -2,7 +2,7 @@
   <!-- 年径流污染削减率 -->
   <div class="publicContainer">
     <!-- gis地图 -->
-    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`"></MapBox>
+    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`" @map-click="mapClick"></MapBox>
 
     <!-- 海绵设施监测详情 -->
     <el-dialog v-model="dialogShow" title="海绵设施监测点位详情" :modal-append-to-body="false" width="600px">
@@ -22,10 +22,15 @@
 <script setup>
 import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
 import optionChart from './chartOption.js';
-
+import YSFQ3 from '@/assets/geojson/kaifeng/kaifengPSFQ3.json';
+import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
+import newfiberVectorLayer from '../../sponeScreen/gisMF/newfiberVectorLayer.js';
+import { queryProjectStation } from '@/api/sponeScreen/syntherticData.js';
+import bus from '@/bus';
 const { proxy } = getCurrentInstance();
 const dialogShow = ref(true);
 const charts = ref(null);
+const mapboxTimer = ref(null);
 const dateSearch = ref([proxy.moment(new Date()).subtract(60, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
 
 // 历史数据搜索
@@ -56,9 +61,50 @@
   charts.value.clear();
   charts.value.setOption(optionChart.option);
 }
-
+//添加海绵设施
+const addFacilityLayer = async () => {
+  let params = {};
+  let projectStationRes = await queryProjectStation(params);
+  if (projectStationRes && projectStationRes.code == 200) {
+    //projectStation = this.getGeojsonData(projectStationRes.data);
+    let facilityFeaturcs = [];
+    projectStationRes.data.forEach(data => {
+      facilityFeaturcs.push(turf.point(data.lonlat.split(',').map(Number), data));
+    });
+    let facilityGeojson = {
+      type: 'FeatureCollection',
+      features: facilityFeaturcs,
+    };
+    console.log('facilityGeojson--', facilityGeojson);
+    bus.emit('setLegendData', [{ data: facilityGeojson, layername: 'spongeFacility', type: 'point' }]);
+    bus.emit('setLayerVisible', { layername: 'spongeFacility', isCheck: true });
+  }
+};
+//地图点击事件
+const mapClick = (point, properties) => {
+  console.log('point', point);
+  console.log('properties', properties);
+};
 onMounted(() => {
   handleQuery();
+  YSFQ3.features.forEach(element => {
+    element.properties.name = element.properties.name + element.properties.totalflow;
+  });
+  //添加排水分区
+  mapboxTimer.value = setInterval(() => {
+    if (!newfiberMapbox) {
+      return;
+    } else {
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('rainAreaLayer', YSFQ3);
+      newfiberMapbox.map.setLayoutProperty('rainAreaLayer_label', 'text-allow-overlap', true);
+      clearInterval(mapboxTimer.value);
+    }
+  }, 1000);
+  setTimeout(() => {
+    newfiberMapbox.map.moveLayer('kaifengWater', 'rainAreaLayer');
+    //添加海绵设施
+    addFacilityLayer();
+  }, 4000);
 });
 </script>