diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index 4e68130..3ac9486 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -54,7 +54,7 @@
       </div>
     </div>
   </div>
-  <!-- 降雨预测 -->
+  <!-- 降雨实况 -->
   <div class="RainfallForecast">
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">降雨实况</div>
@@ -72,7 +72,9 @@
         </div>
       </div>
       <div class="rainImgBox">
-        <div class="rainend"></div>
+        <div class="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">
             <span :class="index == 0 ? 'sBorder' : ''" :style="`background:${item.color}`"></span>
@@ -93,6 +95,7 @@
 <script setup>
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import mapbox from '@/views/oneMap/map/mapboxInTable.vue';
 import fxd from '@/assets/images/zhps/fxd.png'; //风险点
 import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
 import yld from '@/assets/images/zhps/yld.png'; //易涝点
@@ -113,6 +116,12 @@
   { num: '6', yls: '桥儿沟隧道1', wz: '双拥大道桥儿沟' },
   { num: '7', yls: '原水果市场1', wz: '双拥大道东十里铺' },
 ]);
+const images = [
+  'https://server1.wh-nf.cn:6082/tif/0819_8.tif',
+  'https://server1.wh-nf.cn:6082/tif/0819_9.tif',
+  'https://server1.wh-nf.cn:6082/tif/0819_10.tif',
+  'https://server1.wh-nf.cn:6082/tif/0819_11.tif',
+];
 // 普查现状点击事件
 function Pointclick(val) {
   Pointname.value = val.yls;
@@ -126,8 +135,10 @@
 ]);
 const activedname = ref('1小时');
 // 时间点击事件
-function yearclick(val) {
+function yearclick(val, index) {
   activedname.value = val.name;
+  console.log('index', index);
+  initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
@@ -148,7 +159,7 @@
   if (partName.value == '风险点') {
     bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: true });
     bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
-    newfiberMapbox.map.easeTo({
+    newfiberMapbox_table.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
@@ -178,7 +189,7 @@
   } else {
     bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
     bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: true });
-    newfiberMapbox.map.easeTo({
+    newfiberMapbox_table.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
@@ -195,6 +206,114 @@
     ];
   }
 }
+async function urlToFile(url, fileName) {
+  // 使用 fetch 获取图片并转换为 Blob
+  const response = await fetch(url);
+  const blob = await response.blob();
+  // 将 Blob 转换为 File 对象
+  const file = new File([blob], fileName, { type: blob.type });
+  return file;
+}
+
+const createCanvas = id => {
+  let canvas = document.createElement('canvas');
+  canvas.id = 'canvas' + id;
+  canvas.style.display = 'none';
+  document.body.append(canvas);
+  return canvas;
+};
+
+const createPlot = async (e, canvas) => {
+  var tif = await GeoTIFF.fromArrayBuffer(e.target.result);
+  var tifImg = await tif.getImage();
+  var readRasters = await tifImg.readRasters();
+  plot == null &&
+    (plot = new plotty.plot({
+      canvas,
+      data: readRasters[0],
+      width: tifImg.getWidth(),
+      height: tifImg.getHeight(),
+      domain: [0, 256],
+      colorScale: 'mycolorscale',
+    }));
+  plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight());
+  plot.render();
+};
+
+const createCanvasLayer = (canvasId, i, bbox) => {
+  bbox = [
+    [bbox[0], bbox[3]],
+    [bbox[2], bbox[3]],
+    [bbox[2], bbox[1]],
+    [bbox[0], bbox[1]],
+  ];
+  if (newfiberMapbox_table.map.getLayer('canvas-layer' + i)) {
+    newfiberMapbox_table.map.removeLayer('canvas-layer' + i);
+    newfiberMapbox_table.map.removeSource('canvas-source' + i);
+  }
+  newfiberMapbox_table.map.addSource('canvas-source' + i, {
+    type: 'canvas',
+    canvas: canvasId,
+    coordinates: bbox,
+    animate: true,
+  });
+
+  newfiberMapbox_table.map.addLayer({
+    id: 'canvas-layer' + i,
+    type: 'raster',
+    source: 'canvas-source' + i,
+  });
+  newfiberMapbox_table.map.moveLayer('canvas-layer' + i);
+};
+
+const plotInit = (colorScale = colorScale) => {
+  const minVal = colorScale[0].value;
+  const maxVal = colorScale[colorScale.length - 1].value;
+  let color = colorScale.filter(i => Number(i.value) / maxVal <= 1);
+  if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color });
+  plotty.addColorScale(
+    'mycolorscale',
+    color.map(i => i.color),
+    color.map(i => (i.value / maxVal).toFixed(5))
+  );
+};
+
+let colorScale = [
+  { value: '0', color: 'rgba(7, 213, 118, 0)' },
+  { value: '0.1', color: 'rgba(7, 213, 118, 0)' },
+  { value: '5', color: 'rgba(7, 213, 118, 1)' },
+  { value: '15', color: 'rgba(38, 129, 240,1)' },
+  { value: '30', color: 'rgba(247, 223, 56, 1)' },
+  { value: '70', color: 'rgba(230, 85, 41, 1)' },
+  { value: '140', color: 'rgba(255, 26, 26, 1)' },
+];
+let imageFiles = [];
+let canvas = [];
+let plot = null;
+const initRainImage = async imagesList => {
+  imageFiles = await Promise.all(imagesList.map(url => urlToFile(url, _.last(_.split(url, '/')))));
+
+  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);
+  // let i = 0;
+  // let interval = setInterval(() => {
+  //   if (i >= imageFiles.length) i = 0;
+  //   setRainImage(i++);
+  // }, 1000);
+};
+
+const setRainImage = index => {
+  var reader = new FileReader();
+  reader.onload = e => createPlot(e, canvas);
+  reader.readAsArrayBuffer(imageFiles[index]);
+};
+onMounted(() => {
+  initRainImage([images[0]]);
+});
 onBeforeUnmount(() => {
   bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
   bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
@@ -384,7 +503,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 {

diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index 4e68130..3ac9486 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -54,7 +54,7 @@
       </div>
     </div>
   </div>
-  <!-- 降雨预测 -->
+  <!-- 降雨实况 -->
   <div class="RainfallForecast">
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">降雨实况</div>
@@ -72,7 +72,9 @@
         </div>
       </div>
       <div class="rainImgBox">
-        <div class="rainend"></div>
+        <div class="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">
             <span :class="index == 0 ? 'sBorder' : ''" :style="`background:${item.color}`"></span>
@@ -93,6 +95,7 @@
 <script setup>
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import mapbox from '@/views/oneMap/map/mapboxInTable.vue';
 import fxd from '@/assets/images/zhps/fxd.png'; //风险点
 import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
 import yld from '@/assets/images/zhps/yld.png'; //易涝点
@@ -113,6 +116,12 @@
   { num: '6', yls: '桥儿沟隧道1', wz: '双拥大道桥儿沟' },
   { num: '7', yls: '原水果市场1', wz: '双拥大道东十里铺' },
 ]);
+const images = [
+  'https://server1.wh-nf.cn:6082/tif/0819_8.tif',
+  'https://server1.wh-nf.cn:6082/tif/0819_9.tif',
+  'https://server1.wh-nf.cn:6082/tif/0819_10.tif',
+  'https://server1.wh-nf.cn:6082/tif/0819_11.tif',
+];
 // 普查现状点击事件
 function Pointclick(val) {
   Pointname.value = val.yls;
@@ -126,8 +135,10 @@
 ]);
 const activedname = ref('1小时');
 // 时间点击事件
-function yearclick(val) {
+function yearclick(val, index) {
   activedname.value = val.name;
+  console.log('index', index);
+  initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
@@ -148,7 +159,7 @@
   if (partName.value == '风险点') {
     bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: true });
     bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
-    newfiberMapbox.map.easeTo({
+    newfiberMapbox_table.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
@@ -178,7 +189,7 @@
   } else {
     bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
     bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: true });
-    newfiberMapbox.map.easeTo({
+    newfiberMapbox_table.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
@@ -195,6 +206,114 @@
     ];
   }
 }
+async function urlToFile(url, fileName) {
+  // 使用 fetch 获取图片并转换为 Blob
+  const response = await fetch(url);
+  const blob = await response.blob();
+  // 将 Blob 转换为 File 对象
+  const file = new File([blob], fileName, { type: blob.type });
+  return file;
+}
+
+const createCanvas = id => {
+  let canvas = document.createElement('canvas');
+  canvas.id = 'canvas' + id;
+  canvas.style.display = 'none';
+  document.body.append(canvas);
+  return canvas;
+};
+
+const createPlot = async (e, canvas) => {
+  var tif = await GeoTIFF.fromArrayBuffer(e.target.result);
+  var tifImg = await tif.getImage();
+  var readRasters = await tifImg.readRasters();
+  plot == null &&
+    (plot = new plotty.plot({
+      canvas,
+      data: readRasters[0],
+      width: tifImg.getWidth(),
+      height: tifImg.getHeight(),
+      domain: [0, 256],
+      colorScale: 'mycolorscale',
+    }));
+  plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight());
+  plot.render();
+};
+
+const createCanvasLayer = (canvasId, i, bbox) => {
+  bbox = [
+    [bbox[0], bbox[3]],
+    [bbox[2], bbox[3]],
+    [bbox[2], bbox[1]],
+    [bbox[0], bbox[1]],
+  ];
+  if (newfiberMapbox_table.map.getLayer('canvas-layer' + i)) {
+    newfiberMapbox_table.map.removeLayer('canvas-layer' + i);
+    newfiberMapbox_table.map.removeSource('canvas-source' + i);
+  }
+  newfiberMapbox_table.map.addSource('canvas-source' + i, {
+    type: 'canvas',
+    canvas: canvasId,
+    coordinates: bbox,
+    animate: true,
+  });
+
+  newfiberMapbox_table.map.addLayer({
+    id: 'canvas-layer' + i,
+    type: 'raster',
+    source: 'canvas-source' + i,
+  });
+  newfiberMapbox_table.map.moveLayer('canvas-layer' + i);
+};
+
+const plotInit = (colorScale = colorScale) => {
+  const minVal = colorScale[0].value;
+  const maxVal = colorScale[colorScale.length - 1].value;
+  let color = colorScale.filter(i => Number(i.value) / maxVal <= 1);
+  if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color });
+  plotty.addColorScale(
+    'mycolorscale',
+    color.map(i => i.color),
+    color.map(i => (i.value / maxVal).toFixed(5))
+  );
+};
+
+let colorScale = [
+  { value: '0', color: 'rgba(7, 213, 118, 0)' },
+  { value: '0.1', color: 'rgba(7, 213, 118, 0)' },
+  { value: '5', color: 'rgba(7, 213, 118, 1)' },
+  { value: '15', color: 'rgba(38, 129, 240,1)' },
+  { value: '30', color: 'rgba(247, 223, 56, 1)' },
+  { value: '70', color: 'rgba(230, 85, 41, 1)' },
+  { value: '140', color: 'rgba(255, 26, 26, 1)' },
+];
+let imageFiles = [];
+let canvas = [];
+let plot = null;
+const initRainImage = async imagesList => {
+  imageFiles = await Promise.all(imagesList.map(url => urlToFile(url, _.last(_.split(url, '/')))));
+
+  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);
+  // let i = 0;
+  // let interval = setInterval(() => {
+  //   if (i >= imageFiles.length) i = 0;
+  //   setRainImage(i++);
+  // }, 1000);
+};
+
+const setRainImage = index => {
+  var reader = new FileReader();
+  reader.onload = e => createPlot(e, canvas);
+  reader.readAsArrayBuffer(imageFiles[index]);
+};
+onMounted(() => {
+  initRainImage([images[0]]);
+});
 onBeforeUnmount(() => {
   bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
   bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
@@ -384,7 +503,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 {
diff --git a/src/views/oneMap/map/mapboxInTable.vue b/src/views/oneMap/map/mapboxInTable.vue
new file mode 100644
index 0000000..b134272
--- /dev/null
+++ b/src/views/oneMap/map/mapboxInTable.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="mapPage">
+    <div id="mapboxContainer"></div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
+import bus from '@/bus';
+import axios from 'axios';
+export default {
+  components: {},
+  props: {
+    initJson: {
+      type: String,
+      default: () => '/static/libs/mapbox/style/floodOneMap.json',
+    },
+    loadCallback: {
+      type: Function,
+      default: () => function () {},
+    },
+  },
+  setup(props, event) {
+    const allData = reactive({
+      layerIds: [],
+    });
+    let map = null;
+    let config = null;
+    const initeMap = async () => {
+      config = (await axios.get(props.initJson)).data;
+      const { basemap } = config.params;
+      const { style, localStyle } = config.params.init;
+      let styleJson = (
+        await axios.get(
+          localStyle ? localStyle : (style.includes('http') ? '' : location.origin + basemap) + config.params.init.style
+        )
+      ).data;
+      styleJson.glyphs = styleJson.glyphs.includes('http') ? styleJson.glyphs : location.origin + styleJson.glyphs;
+      styleJson.sprite = styleJson.sprite.includes('http') ? styleJson.sprite : location.origin + styleJson.sprite;
+
+      window.newfiberMapbox_table = new mapboxL7.Scene({
+        id: 'mapboxContainer',
+        map: new mapboxL7.Mapbox({
+          style: styleJson,
+          // style:  localStyle?localStyle:(style.includes('http')?'':location.origin + config.params.basemap) + config.params.init.style,
+          center: config.params.init.center,
+          zoom: config.params.init.zoom,
+        }),
+      });
+      map = newfiberMapbox_table.map;
+      map.ogcLayers = [];
+      newfiberMapbox_table.unLoadLayers = [];
+    };
+    onMounted(() => {
+      initeMap();
+    });
+
+    onBeforeUnmount(() => {
+      if (newfiberMapbox_table) {
+        newfiberMapbox_table.destroy();
+        newfiberMapbox_table = null;
+      }
+    });
+
+    return {
+      ...toRefs(allData),
+    };
+  },
+};
+</script>
+<style>
+.mapPage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 0;
+  background: lavender;
+}
+
+#mapboxContainer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.l7-control-mouse-location {
+  background: none;
+}
+
+.l7-control-mouse-location {
+  color: #ffffff;
+}
+</style>

diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index 4e68130..3ac9486 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -54,7 +54,7 @@
       </div>
     </div>
   </div>
-  <!-- 降雨预测 -->
+  <!-- 降雨实况 -->
   <div class="RainfallForecast">
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">降雨实况</div>
@@ -72,7 +72,9 @@
         </div>
       </div>
       <div class="rainImgBox">
-        <div class="rainend"></div>
+        <div class="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">
             <span :class="index == 0 ? 'sBorder' : ''" :style="`background:${item.color}`"></span>
@@ -93,6 +95,7 @@
 <script setup>
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import mapbox from '@/views/oneMap/map/mapboxInTable.vue';
 import fxd from '@/assets/images/zhps/fxd.png'; //风险点
 import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
 import yld from '@/assets/images/zhps/yld.png'; //易涝点
@@ -113,6 +116,12 @@
   { num: '6', yls: '桥儿沟隧道1', wz: '双拥大道桥儿沟' },
   { num: '7', yls: '原水果市场1', wz: '双拥大道东十里铺' },
 ]);
+const images = [
+  'https://server1.wh-nf.cn:6082/tif/0819_8.tif',
+  'https://server1.wh-nf.cn:6082/tif/0819_9.tif',
+  'https://server1.wh-nf.cn:6082/tif/0819_10.tif',
+  'https://server1.wh-nf.cn:6082/tif/0819_11.tif',
+];
 // 普查现状点击事件
 function Pointclick(val) {
   Pointname.value = val.yls;
@@ -126,8 +135,10 @@
 ]);
 const activedname = ref('1小时');
 // 时间点击事件
-function yearclick(val) {
+function yearclick(val, index) {
   activedname.value = val.name;
+  console.log('index', index);
+  initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
@@ -148,7 +159,7 @@
   if (partName.value == '风险点') {
     bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: true });
     bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
-    newfiberMapbox.map.easeTo({
+    newfiberMapbox_table.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
@@ -178,7 +189,7 @@
   } else {
     bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
     bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: true });
-    newfiberMapbox.map.easeTo({
+    newfiberMapbox_table.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
@@ -195,6 +206,114 @@
     ];
   }
 }
+async function urlToFile(url, fileName) {
+  // 使用 fetch 获取图片并转换为 Blob
+  const response = await fetch(url);
+  const blob = await response.blob();
+  // 将 Blob 转换为 File 对象
+  const file = new File([blob], fileName, { type: blob.type });
+  return file;
+}
+
+const createCanvas = id => {
+  let canvas = document.createElement('canvas');
+  canvas.id = 'canvas' + id;
+  canvas.style.display = 'none';
+  document.body.append(canvas);
+  return canvas;
+};
+
+const createPlot = async (e, canvas) => {
+  var tif = await GeoTIFF.fromArrayBuffer(e.target.result);
+  var tifImg = await tif.getImage();
+  var readRasters = await tifImg.readRasters();
+  plot == null &&
+    (plot = new plotty.plot({
+      canvas,
+      data: readRasters[0],
+      width: tifImg.getWidth(),
+      height: tifImg.getHeight(),
+      domain: [0, 256],
+      colorScale: 'mycolorscale',
+    }));
+  plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight());
+  plot.render();
+};
+
+const createCanvasLayer = (canvasId, i, bbox) => {
+  bbox = [
+    [bbox[0], bbox[3]],
+    [bbox[2], bbox[3]],
+    [bbox[2], bbox[1]],
+    [bbox[0], bbox[1]],
+  ];
+  if (newfiberMapbox_table.map.getLayer('canvas-layer' + i)) {
+    newfiberMapbox_table.map.removeLayer('canvas-layer' + i);
+    newfiberMapbox_table.map.removeSource('canvas-source' + i);
+  }
+  newfiberMapbox_table.map.addSource('canvas-source' + i, {
+    type: 'canvas',
+    canvas: canvasId,
+    coordinates: bbox,
+    animate: true,
+  });
+
+  newfiberMapbox_table.map.addLayer({
+    id: 'canvas-layer' + i,
+    type: 'raster',
+    source: 'canvas-source' + i,
+  });
+  newfiberMapbox_table.map.moveLayer('canvas-layer' + i);
+};
+
+const plotInit = (colorScale = colorScale) => {
+  const minVal = colorScale[0].value;
+  const maxVal = colorScale[colorScale.length - 1].value;
+  let color = colorScale.filter(i => Number(i.value) / maxVal <= 1);
+  if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color });
+  plotty.addColorScale(
+    'mycolorscale',
+    color.map(i => i.color),
+    color.map(i => (i.value / maxVal).toFixed(5))
+  );
+};
+
+let colorScale = [
+  { value: '0', color: 'rgba(7, 213, 118, 0)' },
+  { value: '0.1', color: 'rgba(7, 213, 118, 0)' },
+  { value: '5', color: 'rgba(7, 213, 118, 1)' },
+  { value: '15', color: 'rgba(38, 129, 240,1)' },
+  { value: '30', color: 'rgba(247, 223, 56, 1)' },
+  { value: '70', color: 'rgba(230, 85, 41, 1)' },
+  { value: '140', color: 'rgba(255, 26, 26, 1)' },
+];
+let imageFiles = [];
+let canvas = [];
+let plot = null;
+const initRainImage = async imagesList => {
+  imageFiles = await Promise.all(imagesList.map(url => urlToFile(url, _.last(_.split(url, '/')))));
+
+  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);
+  // let i = 0;
+  // let interval = setInterval(() => {
+  //   if (i >= imageFiles.length) i = 0;
+  //   setRainImage(i++);
+  // }, 1000);
+};
+
+const setRainImage = index => {
+  var reader = new FileReader();
+  reader.onload = e => createPlot(e, canvas);
+  reader.readAsArrayBuffer(imageFiles[index]);
+};
+onMounted(() => {
+  initRainImage([images[0]]);
+});
 onBeforeUnmount(() => {
   bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
   bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
@@ -384,7 +503,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 {
diff --git a/src/views/oneMap/map/mapboxInTable.vue b/src/views/oneMap/map/mapboxInTable.vue
new file mode 100644
index 0000000..b134272
--- /dev/null
+++ b/src/views/oneMap/map/mapboxInTable.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="mapPage">
+    <div id="mapboxContainer"></div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
+import bus from '@/bus';
+import axios from 'axios';
+export default {
+  components: {},
+  props: {
+    initJson: {
+      type: String,
+      default: () => '/static/libs/mapbox/style/floodOneMap.json',
+    },
+    loadCallback: {
+      type: Function,
+      default: () => function () {},
+    },
+  },
+  setup(props, event) {
+    const allData = reactive({
+      layerIds: [],
+    });
+    let map = null;
+    let config = null;
+    const initeMap = async () => {
+      config = (await axios.get(props.initJson)).data;
+      const { basemap } = config.params;
+      const { style, localStyle } = config.params.init;
+      let styleJson = (
+        await axios.get(
+          localStyle ? localStyle : (style.includes('http') ? '' : location.origin + basemap) + config.params.init.style
+        )
+      ).data;
+      styleJson.glyphs = styleJson.glyphs.includes('http') ? styleJson.glyphs : location.origin + styleJson.glyphs;
+      styleJson.sprite = styleJson.sprite.includes('http') ? styleJson.sprite : location.origin + styleJson.sprite;
+
+      window.newfiberMapbox_table = new mapboxL7.Scene({
+        id: 'mapboxContainer',
+        map: new mapboxL7.Mapbox({
+          style: styleJson,
+          // style:  localStyle?localStyle:(style.includes('http')?'':location.origin + config.params.basemap) + config.params.init.style,
+          center: config.params.init.center,
+          zoom: config.params.init.zoom,
+        }),
+      });
+      map = newfiberMapbox_table.map;
+      map.ogcLayers = [];
+      newfiberMapbox_table.unLoadLayers = [];
+    };
+    onMounted(() => {
+      initeMap();
+    });
+
+    onBeforeUnmount(() => {
+      if (newfiberMapbox_table) {
+        newfiberMapbox_table.destroy();
+        newfiberMapbox_table = null;
+      }
+    });
+
+    return {
+      ...toRefs(allData),
+    };
+  },
+};
+</script>
+<style>
+.mapPage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 0;
+  background: lavender;
+}
+
+#mapboxContainer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.l7-control-mouse-location {
+  background: none;
+}
+
+.l7-control-mouse-location {
+  color: #ffffff;
+}
+</style>
diff --git a/src/views/oneMap/map/newfiberMapBox copy.vue b/src/views/oneMap/map/newfiberMapBox copy.vue
deleted file mode 100644
index c4cc694..0000000
--- a/src/views/oneMap/map/newfiberMapBox copy.vue
+++ /dev/null
@@ -1,504 +0,0 @@
-<template>
-  <div class="mapPage">
-    <div id="mapboxContainer"></div>
-  </div>
-</template>
-<script>
-import bus from '@/bus';
-import axios from 'axios';
-import buildingGeojson from '@/assets/yanAnBuilding.json';
-import yanAnRoad from '@/assets/yanAnRoad.json';
-import yanAnWater from '@/assets/yanAnWater.json';
-export default {
-  components: {},
-  props: {
-    initJson: {
-      type: String,
-      default: () => '/static/libs/mapbox/style/floodOneMap.json',
-    },
-    loadCallback: {
-      type: Function,
-      default: () => function () {},
-    },
-  },
-  setup(props, event) {
-    const allData = reactive({
-      layerIds: [],
-    });
-    let geojson = {
-      point: { type: 'FeatureCollection', features: [] },
-      polygon: { type: 'FeatureCollection', features: [] },
-      linestring: { type: 'FeatureCollection', features: [] },
-    };
-    let map = null;
-    let config = null;
-    let highlightLayers = {
-      highlight_point: 1,
-      //highlight_point1: 1,
-      highlight_polygon: 1,
-      highlight_linestring: 1,
-    };
-    const initeMap = async () => {
-      config = (await axios.get(props.initJson)).data;
-      let { sprites, l7 } = config.params;
-
-      window.newfiberMapbox = new mapboxL7.Scene({
-        id: 'mapboxContainer',
-        map: new mapboxL7.Mapbox({
-          style: config.params.init.style,
-          center: config.params.init.center,
-          zoom: config.params.init.zoom,
-        }),
-      });
-      newfiberMapbox.map.load = false;
-      map = newfiberMapbox.map;
-      map.ogcLayers = [];
-      newfiberMapbox.unLoadLayers = [];
-      (sprites || []).forEach(url => {
-        map.style._loadSprite(url.includes('http') ? url : window.location.href.split('#')[0] + url);
-      });
-      ((l7 || []).images || []).forEach(item =>
-        newfiberMapbox.addImage(item.name, item.url.includes('http') ? item.url : window.location.href.split('#')[0] + item.url)
-      );
-      setTimeout(() => {
-        map.on('load', async () => {
-          const mouseLocation = new mapboxL7.MouseLocation({
-            transform: position => {
-              return [position[0].toFixed(6), position[1].toFixed(6)];
-            },
-          });
-          newfiberMapbox.addControl(mouseLocation);
-          // !!!map.getSource('kaifengWater') && map.addSource('kaifengWater', { type: 'geojson', data: kaifengWater });
-          // !!!map.getLayer('kaifengWater') &&
-          //   map.addLayer({
-          //     id: 'kaifengWater',
-          //     type: 'fill',
-          //     source: 'kaifengWater',
-          //     paint: {
-          //       'fill-color': 'rgba(117, 207, 240,1)',
-          //     },
-          //   });
-
-          addYanAnBuilding();
-          addYanAnRiverFlow();
-          addYanAnRoad();
-
-          await loadData();
-
-          props.loadCallback && props.loadCallback();
-          // getLayerIdByClick();
-          (config.orders || []).forEach(item => setLayerOrder(...item));
-          newfiberMapbox.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i));
-          // let timeout = setTimeout(() => {
-          let { pitch, center } = config.params.init;
-          pitch && newfiberMapbox.map.setPitch(pitch);
-          center && newfiberMapbox.map.setCenter(center);
-          //clearTimeout(timeout);
-          //}, 1000);
-          newfiberMapbox.map.load = true;
-        });
-      }, 200);
-
-      let layerIds = (config.mapbox || []).map(i => i.id);
-      map.on('click', e => {
-        Object.values(highlightLayers).forEach(layer => {
-          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
-        });
-        const feature = (
-          map.queryRenderedFeatures([
-            [e.point.x - 10 / 2, e.point.y - 10 / 2],
-            [e.point.x + 10 / 2, e.point.y + 10 / 2],
-          ]) || []
-        ).filter(i => layerIds.includes(i.layer.id) || i.layer.id == 'rainStation')[0];
-        if (feature) event.emit('map-click', Object.values(e.lngLat), feature.properties);
-        setHighlight(feature);
-      });
-      map.on('mouseenter', 'point', e => {
-        Object.values(highlightLayers).forEach(layer => {
-          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
-        });
-        const feature = (
-          map.queryRenderedFeatures([
-            [e.point.x - 10 / 2, e.point.y - 10 / 2],
-            [e.point.x + 10 / 2, e.point.y + 10 / 2],
-          ]) || []
-        ).filter(i => layerIds.includes(i.layer.id))[0];
-        if (feature) event.emit('map-moveOn', Object.values(e.lngLat), feature.properties);
-        setHighlight(feature);
-      });
-      map.on('mouseleave', 'point', e => {
-        Object.values(highlightLayers).forEach(layer => {
-          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
-        });
-        const feature = (
-          map.queryRenderedFeatures([
-            [e.point.x - 10 / 2, e.point.y - 10 / 2],
-            [e.point.x + 10 / 2, e.point.y + 10 / 2],
-          ]) || []
-        ).filter(i => layerIds.includes(i.layer.id))[0];
-        if (feature) event.emit('map-moveLeave', Object.values(e.lngLat), feature.properties);
-      });
-    };
-
-    const loadData = async () => {
-      let { mapbox, l7, ogc } = config;
-      if (mapbox)
-        //用mapbox添加水系
-        //axios.get(config.params.mvt + `/v1/geojson/hubei_xiaogan_water1`).then(({ data: geojson }) => {
-
-        // });
-        mapbox.forEach(item => {
-          let { mType, columns } = item;
-          let params = '';
-          if (columns) params = `?columns=${columns}`;
-          if (!!!map.getSource(item.id)) {
-            let flag = mType == 'geojson';
-            flag
-              ? map.addSource(item.id, {
-                  type: mType,
-                  data: geojson[item.id],
-                })
-              : map.addSource(item.id, {
-                  type: 'vector',
-                  tiles: [config.params.mvt + `/v1/${mType}/${item.key}/{z}/{x}/{y}` + params],
-                  tileSize: 512,
-                  scheme: 'xyz',
-                  maxzoom: 24,
-                  minzoom: 1,
-                });
-          }
-          map.addLayer({ ...item, source: item.id });
-          map.moveLayer(item.id, undefined);
-          allData.layerIds.push(item.id);
-        });
-      if (l7) {
-        if (!!!l7.length) return;
-        l7.forEach(item => {
-          let { id, columns, filter } = item;
-          let params = '';
-          if (columns) params += `columns=${columns}&`;
-          if (filter) params += `filter=${filter}&`;
-          id
-            ? axios
-                .get(config.params.mvt + `/v1/geojson/${id}?` + params)
-                .then(({ data: geojson }) => initMapBoxL7Class(item, geojson))
-            : initMapBoxL7Class(item, geojson[item.key] || turf.featureCollection([]));
-        });
-      }
-      if (ogc)
-        ogc.forEach(item => {
-          let { id, type, params, methods } = item;
-          Object.keys(params).forEach(
-            i => (params[i] = typeof params[i] == 'string' ? (params[i].includes('||') ? eval(params[i]) : params[i]) : params[i])
-          );
-          let layer = new mapboxgl1[type](params);
-          layer.newfiberId = id;
-          methods.forEach(method => {
-            let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
-            layer[method.name](...ms);
-          });
-          map.ogcLayers.push(layer);
-        });
-
-      function initMapBoxL7Class({ type, params, methods, id, show, key }, geojson) {
-        let layer = new mapboxL7[type](params).source(geojson);
-        methods.forEach(method => {
-          let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
-          layer[method.name](...ms);
-        });
-        layer.newfiberId = key;
-        if (!show) return newfiberMapbox.unLoadLayers.push(layer);
-        newfiberMapbox.addLayer(layer);
-        allData.layerIds.push(key);
-      }
-    };
-
-    const setLayerVisible = ({ layername, isCheck }) => {
-      if (!!!window.newfiberMapbox) return;
-      if (((config || {}).filter || {})[layername]) {
-        config.filter[layername].layerName.forEach((name, index) => {
-          let filter = map.getFilter(name);
-          let fValues = config.filter[layername].filter[index];
-          console.log('fValues---', fValues);
-          isCheck ? filter.push(...fValues) : (filter = filter.filter(i => !fValues.includes(i)));
-          map.setFilter(name, filter);
-        });
-        return config.filter[layername].easeTo && isCheck && map.easeTo(config.filter[layername].easeTo);
-      }
-      let features = Object.values(geojson)
-        .map(i => i.features)
-        .flat(Infinity)
-        .filter(i => i.properties.type == layername);
-      if (features.length) {
-        let types = Array.from(new Set(features.map(i => i.geometry.type.toLocaleLowerCase())));
-        types.forEach(type1 => {
-          if (map.getLayer(type1)) {
-            let filter = map.getFilter(type1);
-            if (!!!filter) return;
-            isCheck ? filter.push(layername) : (filter = filter.filter(i => i != layername));
-
-            map.setFilter(type1, filter);
-          }
-        });
-      }
-      let layer = newfiberMapbox.getLayers().filter(i => i.newfiberId == layername)[0];
-      if (!!!layer) {
-        layer = newfiberMapbox.unLoadLayers.filter(i => i.newfiberId == layername)[0];
-        isCheck && layer && newfiberMapbox.addLayer(layer);
-      }
-      layer && layer[['hide', 'show'][Number(isCheck)]]();
-
-      layer = map.getLayer(layername);
-      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
-
-      layer = map.getLayer(layername + '_text');
-      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
-
-      layer = map.ogcLayers.filter(i => i.id == layername)[0];
-      layer && (layer.map ? layer[isCheck ? 'show' : 'hide']() : layer.addTo(map));
-    };
-
-    const getGeojsonByType = ({ type, callback }) => {
-      let geojs = turf.featureCollection(
-        Object.values(geojson)
-          .map(i => i.features)
-          .flat(Infinity)
-          .filter(i => i.properties.type == type)
-      );
-      callback && callback(geojs);
-    };
-
-    const removeLayers = ids => {
-      let { getLayers, removeAllLayer, removeLayer: removeLayerL7 } = newfiberMapbox;
-      let { getLayer, removeLayer } = map;
-
-      if (!!!ids) {
-        allData.layerIds.forEach(id => getLayer(id) && removeLayer(id));
-        return removeAllLayer();
-      }
-
-      ids.forEach(id => {
-        getLayer(id) && removeLayer(id);
-        getLayers().forEach(layer => layer.newfiberId == id && removeLayerL7(layer));
-      });
-    };
-
-    const removeMapDatas = types => {
-      !!!types
-        ? Object.keys(geojson).forEach(key => (geojson[key].features.length = 0))
-        : Object.keys(geojson).forEach(
-            key => (geojson[key].features = geojson[key].features.filter(feature => !types.includes(feature.properties.type)))
-          );
-      return refreshGeoJSON();
-    };
-
-    const setLegendData = list => {
-      list.forEach(i => {
-        i.data &&
-          i.data.features &&
-          i.data.features.forEach(a => {
-            if (!!!a || !!!a.properties) return;
-            a.properties.type = a.properties.type || i.layername;
-            a.properties.name =
-              a.properties.name ||
-              a.properties.Name ||
-              a.properties.stName ||
-              a.properties.roadName ||
-              a.properties.sewageName ||
-              a.properties.sectionName ||
-              a.properties.pumpName ||
-              a.properties.projectName ||
-              a.properties.plantName;
-          });
-      });
-
-      let types = {};
-      list
-        .map(i => i.data && i.data.features)
-        .filter(Boolean)
-        .flat(Infinity)
-        .forEach(feature => {
-          if (!!!feature || !!!feature.properties) return;
-          feature.properties.geometry = Terraformer.WKT.convert(feature.geometry);
-          let type = feature.geometry.type.toLocaleLowerCase();
-          let flag = type.includes('multi');
-          type = type.replaceAll('multi', '');
-          let features = null;
-          if (flag) features = turf.flatten(feature).features;
-          !!!types[type] && (types[type] = []);
-          types[type].push(...(features ? features : [feature]));
-        });
-      Object.keys(types).forEach(key => geojson[key].features.push(...types[key]));
-      refreshGeoJSON();
-    };
-
-    const refreshGeoJSON = () => {
-      Object.keys(geojson).forEach(key => map.getSource(key) && map.getSource(key).setData(geojson[key]));
-    };
-
-    const setGeoJSON = ({ json, key }) => {
-      // geojson[key] = json;
-      let layer = newfiberMapbox.getLayers().filter(i => i.newfiberId == key)[0];
-      if (!!!layer) {
-        layer = newfiberMapbox.unLoadLayers.filter(i => i.newfiberId == key)[0];
-        layer && newfiberMapbox.addLayer(layer);
-      }
-      if (layer) layer.setData(json);
-      setLegendData([{ data: json, layername: key, type: 'point' }]);
-    };
-
-    const setLayerOrder = (sourceLayer, targetLayer) => {
-      map.moveLayer(sourceLayer, targetLayer);
-    };
-
-    const setHighlight = (features = {}) => {
-      let array = {};
-      features = features.forEach ? features : [features];
-      Object.values(highlightLayers).forEach(
-        layer => layer.setData && layer.setData({ type: 'FeatureCollection', features: [] })
-      );
-      features.forEach(feature => {
-        if (!!!feature || !Boolean(Object.keys(feature).length) || !feature.properties.geometry) return;
-        let geometry = Terraformer.WKT.parse(feature.properties.geometry);
-        let geoFeature = turf.feature(geometry, feature.properties);
-        let type = geometry.type.toLocaleLowerCase().replaceAll('multi', '');
-        let key = Object.keys(highlightLayers).filter(key => key.lastIndexOf(type) > -1)[0];
-        if (!array[key]) array[key] = [];
-        array[key].push(geoFeature);
-      });
-      Object.keys(array).forEach(
-        key => highlightLayers[key] && highlightLayers[key].setData({ type: 'FeatureCollection', features: array[key] })
-      );
-    };
-
-    const getLayerIdByClick = () => {
-      map.getStyle().layers.forEach(i =>
-        map.on('click', i.id, (a, b, c, d) => {
-          console.log('layer-id', a.features[0].layer.id);
-        })
-      );
-    };
-
-    //添加延安建筑白膜
-    const addYanAnBuilding = () => {
-      map.addLayer({
-        id: 'buildingLayer',
-        type: 'fill-extrusion',
-        source: {
-          type: 'geojson',
-          data: buildingGeojson,
-        },
-        // //绘画功能
-        paint: {
-          // Get the fill-extrusion-color from the source 'color' property.   从source 'color'属性获取fill- extrusive -color。
-          // 'fill-extrusion-color':'rgba(200, 100, 240, 0.4)',
-          // "fill-extrusion-color":['get','color'],//加载数据中的颜色
-          'fill-extrusion-color': {
-            //根据数值中加载相对应颜色
-            property: 'height_3', // this will be your density property form you geojson
-            stops: [
-              [10, '#0284bf'],
-              [20, '#0284bf'],
-              [30, '#0284bf'],
-              [80, '#00517e'],
-              [100, '#1f95bd'],
-              [125, '#1f95bd'],
-              [300, '#1f95bd'],
-            ],
-          },
-          //    从source 'height'属性获取填充-挤出-高度。
-          'fill-extrusion-height': ['get', 'height_3'],
-          'fill-extrusion-opacity': 1,
-        },
-      });
-    };
-    //添加延安水系
-    const addYanAnRiverFlow = () => {
-      let layer = new mapboxL7.LineLayer({})
-        .source(yanAnWater)
-        .size(4)
-        .shape('line')
-        .texture('arrow')
-        .color('rgb(34, 149, 252)')
-        .animate({
-          interval: 2, // 间隔
-          duration: 3, // 持续时间，延时
-          trailLength: 3, // 流线长度
-        })
-        .style({
-          opacity: 0.8,
-          lineTexture: true, // 开启线的贴图功能
-          iconStep: 200, // 设置贴图纹理的间距
-          borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: '#fff', // 默认为 #ccc
-        });
-      newfiberMapbox.addLayer(layer);
-    };
-    //添加延安路网
-    const addYanAnRoad = () => {
-      let layer = new mapboxL7.LineLayer({})
-        .source(yanAnRoad)
-        .size(1.3)
-        .shape('line')
-        .color('rgb(184, 184, 184)')
-        .animate({
-          interval: 1, // 间隔
-          duration: 1.5, // 持续时间，延时
-          trailLength: 2, // 流线长度
-        })
-        .style({
-          opacity: 0.6,
-        });
-      newfiberMapbox.addLayer(layer);
-    };
-    onMounted(() => {
-      initeMap();
-      bus.on('setLayerVisible', setLayerVisible);
-      bus.on('setLegendData', setLegendData);
-      bus.on('setGeoJSON', setGeoJSON);
-      bus.on('getGeojsonByType', getGeojsonByType);
-      bus.on('removeLayers', removeLayers);
-      bus.on('removeMapDatas', removeMapDatas);
-      bus.on('setHighlight', setHighlight);
-    });
-
-    onBeforeUnmount(() => {
-      bus.off('setLayerVisible');
-      bus.off('setLegendData');
-      bus.off('setGeoJSON');
-      bus.off('getGeojsonByType');
-      bus.off('removeMapDatas');
-      bus.off('setHighlight');
-      newfiberMapbox.destroy();
-      newfiberMapbox = null;
-    });
-
-    return {
-      ...toRefs(allData),
-      initeMap,
-    };
-  },
-};
-</script>
-<style lang="scss">
-.mapPage {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-
-  background: lavender;
-  #mapboxContainer {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-  .l7-control-mouse-location {
-    background: none;
-  }
-  .l7-control-mouse-location {
-    color: #ffffff;
-  }
-}
-</style>