diff --git a/src/assets/images/zhps/hsRain.png b/src/assets/images/zhps/hsRain.png
index d2ece0b..7795d50 100644
--- a/src/assets/images/zhps/hsRain.png
+++ b/src/assets/images/zhps/hsRain.png
Binary files differ

diff --git a/src/assets/images/zhps/hsRain.png b/src/assets/images/zhps/hsRain.png
index d2ece0b..7795d50 100644
--- a/src/assets/images/zhps/hsRain.png
+++ b/src/assets/images/zhps/hsRain.png
Binary files differ
diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index 916c0b0..a8f7b2d 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -72,8 +72,8 @@
         </div>
       </div>
       <div class="rainImgBox">
-        <div class="rainend">
-          <mapbox style="position: relative"></mapbox>
+        <div class="rainend" id="rainend">
+          <!-- <mapbox style="position: relative"></mapbox> -->
         </div>
         <div class="rainLegend flex flex-align-center">
           <div class="flex flex-align-center" v-for="(item, index) in ranLeng[timeActive]" :key="index">
@@ -218,8 +218,12 @@
 const createCanvas = id => {
   let canvas = document.createElement('canvas');
   canvas.id = 'canvas' + id;
-  canvas.style.display = 'none';
-  document.body.append(canvas);
+  canvas.style.height = '110%';
+  canvas.style.width = '110%';
+  canvas.style.position = 'relative';
+  canvas.style.top = '-17px';
+  //canvas.style.display = 'none';
+  document.getElementById('rainend').append(canvas);
   return canvas;
 };
 
@@ -295,10 +299,11 @@
 
   canvas = createCanvas(0);
   plotInit(colorScale);
-  createCanvasLayer(canvas.id, 0, [109.36903069276376, 36.53005543707354, 109.62694602722712, 36.7105574823517]);
   setRainImage(0);
-  newfiberMapbox_table.map.setZoom(10);
-  newfiberMapbox_table.map.setPitch(50);
+  //createCanvasLayer(canvas.id, 0, [109.36903069276376, 36.53005543707354, 109.62694602722712, 36.7105574823517]);
+  setRainImage(0);
+  // newfiberMapbox_table.map.setZoom(10);
+  // newfiberMapbox_table.map.setPitch(50);
   // let i = 0;
   // let interval = setInterval(() => {
   //   if (i >= imageFiles.length) i = 0;
@@ -317,6 +322,8 @@
 onBeforeUnmount(() => {
   bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
   bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+  var canvas = document.getElementById('canvas0');
+  canvas.remove();
 });
 </script>
 
@@ -503,7 +510,7 @@
       .rainend {
         width: 440px;
         height: 85%;
-        // background: url('@/assets/images/zhps/hsRain.png') no-repeat;
+        background: url('@/assets/images/zhps/hsRain.png') no-repeat;
         background-size: 100% 100%;
       }
       .rainLegend {