雷达回波 实现图层展示

src/utils/olMap/olMap.ts

@@ -69,6 +69,7 @@ export class olMap {
   private plot;
   private vectorLayer;
   private maskLayer;
+  private maskLayer2 = [];
 
   constructor(options) {
     this.options = options;
@@ -331,7 +332,98 @@ export class olMap {
     });
     converLayer.getSource().addFeature(convertFt);
   }
-
+  createVecByJson2(json, options) {
+    if (this.maskLayer2 && this.maskLayer2.length > 0) {
+      this.maskLayer2.forEach((layer) => {
+        this.map.addLayer(layer);
+      });
+    } else {
+      // const layer = new VectorLayer({
+      //   source: new VectorSource(),
+      //   style: new Style({
+      //     fill: new Fill({
+      //       color: options.fillColor ? options.fillColor : 'rgba(16, 36, 59, 0.65)'
+      //     }),
+      //     stroke: new Stroke({
+      //       color: options.strokeColor ? options.strokeColor : 'rgba(38, 138, 185, 1)',
+      //       width: 2
+      //     })
+      //   }),
+      //   zIndex: options.zIndex ? options.zIndex : 99
+      // });
+      // // 合并区边界
+      // const format = new GeoJSON();
+      // const data2 = mergeGeoJsonPolygons(json);
+      // const fs = format.readFeatures(data2);
+      // const extent = [-180, -90, 180, 90];
+      // const polygonRing = fromExtent(extent);
+      // fs.forEach((x) => {
+      //   const ft = x.values_.geometry;
+      //   const coords = ft.getCoordinates();
+      //   coords.forEach((coord) => {
+      //     const linearRing = new LinearRing(coord[0]);
+      //     polygonRing.appendLinearRing(linearRing);
+      //   });
+      // });
+      // const convertFt = new Feature({
+      //   geometry: polygonRing
+      // });
+      // layer.getSource().addFeature(convertFt);
+      // this.maskLayer2.push(layer);
+      // this.map.addLayer(layer);
+      // 边界部分
+      json.features.forEach((feature) => {
+        if (feature.geometry.type === 'Polygon') {
+          const polygonPath = feature.geometry.coordinates[0].map((coord) => {
+            return [coord[0], coord[1]];
+          });
+          const feature2 = new Feature({
+            geometry: new Polygon([polygonPath])
+          });
+          const vector = new VectorLayer({
+            source: new VectorSource(),
+            style: new Style({
+              fill: new Fill({
+                color: 'rgba(0, 0, 0, 0)'
+              }),
+              stroke: new Stroke({
+                color: options.strokeColor ? options.strokeColor : '#268ab9',
+                width: options.strokeWeight ? options.strokeWeight : 1
+              })
+            })
+          });
+          vector.getSource().addFeature(feature2);
+          this.maskLayer2.push(vector);
+          this.map.addLayer(vector);
+        } else if (feature.geometry.type === 'MultiPolygon') {
+          feature.geometry.coordinates.forEach((polygonCoords) => {
+            const polygonPath = polygonCoords.map((ring) => {
+              return ring.map((coord) => {
+                return [coord[0], coord[1]];
+              });
+            });
+            const outerPath = polygonPath;
+            const feature2 = new Feature({ geometry: new Polygon(outerPath), });
+            const vector = new VectorLayer({
+              source: new VectorSource(),
+              style: new Style({
+                fill: new Fill({
+                  color: 'rgba(0, 0, 0, 0)'
+                }),
+                stroke: new Stroke({
+                  color: options.strokeColor ? options.strokeColor : '#268ab9',
+                  width: options.strokeWeight ? options.strokeWeight : 1
+                })
+              })
+            });
+            vector.getSource().addFeature(feature2);
+            this.maskLayer2.push(vector);
+            this.map.addLayer(vector);
+          });
+        }
+      });
+    }
+  }
   /**
    * @description 创建矢量图层
    * @param {String} layerName 图层名称
@@ -394,7 +486,22 @@ export class olMap {
       }
     });
   }
-
+  removeMask2() {
+    if (this.maskLayer) {
+      this.map.removeLayer(this.maskLayer);
+      this.maskLayer = null;
+    }
+  }
+  removeMask3(isHide) {
+    if (this.maskLayer2 && this.maskLayer2.length > 0) {
+      this.maskLayer2.forEach((layer) => {
+        this.map.removeLayer(layer);
+      });
+      if (!isHide) {
+        this.maskLayer2 = [];
+      }
+    }
+  }
   /**
    * 绘制经纬线
    * visible: boolean 是否可见

src/views/disasterRiskMonitor/radarEchoMap.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="map-box">
-      <div class="title-box">雷达拼图{{time}}</div>
+      <div class="title-box">雷达拼图{{imgList[activeImg] ? imgList[activeImg].time : ''}}</div>
 <!--      <img v-for="(item, index) in imgList" :key="index" :src="item.url" alt="" style="width: 200px;height: 200px;">-->
       <div class="btn1" @click="handleChangeDynamic">
         <el-button type="primary">
@@ -9,7 +9,7 @@
           {{ openDynamicImage ? '切换为静图' : '切换为动图' }}
         </el-button>
       </div>
-      <div ref="windBreakMapRef" id="map" />
+      <div ref="mapRef" id="map" />
       <div class="right-bottom-box">
         <div :class="showLegend  ? 'legend-btn btn-active' : 'legend-btn'" @click="handleClickLegend">
           <i class="icon-legend" />
@@ -43,11 +43,11 @@
           </div>
         </div>
         <div class="operate-box">
-          <div class="operate-btn">
+          <div class="operate-btn" @click="handleIndex('reduce')">
             <i class="icon-left" />
             上时次
           </div>
-          <div class="operate-btn">
+          <div class="operate-btn" @click="handleIndex('add')">
             <i class="icon-right" />
             下时次
           </div>
@@ -61,13 +61,16 @@
   </div>
 </template>
 
-<script lang="ts" setup name="Windbreak">
+<script lang="ts" setup name="RadarEchoMap">
 import { olMap } from '@/utils/olMap/olMap';
-import mmJson from '@/assets/json/mm.json';
-import {getAreaMap} from "@/api/globalMap";
+import mmJson from '@/assets/json/mm2.json';
 import {ElButton} from "element-plus";
 import {getRadarChart} from "@/api/disasterRiskMonitor/radarEchoMap";
-let windBreakMapRef = ref(null);
+import { transform } from 'ol/proj'
+import Image from 'ol/layer/Image';
+import ImageStatic from 'ol/source/ImageStatic';
+
+let mapRef = ref(null);
 let mapState = reactive({
   center: [110.925175, 22],
   zoom: 8.4,
@@ -75,8 +78,6 @@ let mapState = reactive({
   maxZoom: 16
 });
 let map, mapUtils;
-// 时间
-let time = ref('');
 // 是否开启动态图
 let openDynamicImage = ref(false);
 
@@ -84,7 +85,7 @@ let openDynamicImage = ref(false);
 const initMap = () => {
   const index = mapTypeList.findIndex((item) => item.value === activeMap.value);
   mapUtils = new olMap({
-    dom: windBreakMapRef.value,
+    dom: mapRef.value,
     id: mapTypeList[index].data,
     center: mapState.center,
     zoom: mapState.zoom,
@@ -93,36 +94,61 @@ const initMap = () => {
     // 加载完成事件
     onLoadCompleted: (yMap) => {
       map = yMap;
-      getLevelData();
-      mapUtils.createVecByJson(mmJson, {
-        fillColor: 'transparent'
-      });
+      getImageData();
+      mapUtils.createVecByJson2(mmJson, { strokeWeight: 2 });
       mapUtils.handleLngLatLine(showLatLngLine.value);
       map.updateSize();
     }
   });
 };
-// 获取级别数据
-let levelData = ref({});
-const getLevelData = () => {
-  getAreaMap().then((res) => {
-    levelData.value = res.data;
-    mapUtils.createMask(res.data);
+// 获取图层数据
+let imageLayer;
+let activeImg  = ref(0);
+let imgList = ref([]);
+// 获取图层数据
+const getImageData = () => {
+  getRadarChart().then((res) => {
+    imgList.value = res.data;
+    switchImage();
   })
-  const now = new Date();
-
-  // 获取月份（从0开始，所以需要+1），并补零
-  const month = String(now.getMonth() + 1).padStart(2, '0');
-
-  // 获取日期，并补零
-  const day = String(now.getDate()).padStart(2, '0');
-
-  // 获取小时，并补零
-  const hour = String(now.getHours()).padStart(2, '0');
+}
+// 加载图层到地图中
+const switchImage = () => {
+  if (!!imageLayer) {
+    map.removeLayer(imageLayer);
+    imageLayer = null;
+  }
+  let left = 18.1,
+      bottom = 108.5,
+      right = 26.9,
+      top = 119
+  let lb = (transform([bottom, left], 'EPSG:4326', 'EPSG:4490'));
+  let tr = (transform([top, right], 'EPSG:4326', 'EPSG:4490'));
 
-  // 拼接成所需格式
-  time.value = `${month}-${day} ${hour}:00`;
+  // 创建ImageStatic图层
+  imageLayer = new Image({
+    source: new ImageStatic({
+      url: imgList.value[activeImg.value].url,
+      crossOrigin: '',
+      projection: 'EPSG:4490',
+      imageExtent: [lb[0], lb[1], tr[0], tr[1]]
+    })
+  });
+  map.getLayers().push(imageLayer);
 }
+// 上下一个时间
+const handleIndex = (type = 'add') => {
+  if (type === 'add') {
+    if (activeImg.value + 1 < imgList.value.length) {
+      activeImg.value += 1;
+    } else if (playing.value) {
+      activeImg.value = 0
+    }
+  } else if (type === 'reduce' && activeImg.value - 1 >= 0) {
+    activeImg.value -= 1;
+  }
+  switchImage();
+};
 // 切换动/静图
 const handleChangeDynamic = () => {
   openDynamicImage.value = !openDynamicImage.value;
@@ -158,10 +184,7 @@ const changeActiveMap = (value) => {
   mapUtils.removeMask();
   mapUtils.replaceLayers(layers, () => {
     //加载完基础图层后再加载其他图层
-    mapUtils.createMask(levelData.value);
-    mapUtils.createVecByJson(mmJson, {
-      fillColor: 'transparent'
-    });
+    mapUtils.createVecByJson2(mmJson, { strokeWeight: 2 })
     if (showLatLngLine.value) {
       mapUtils.handleLngLatLine(showLatLngLine.value);
     }
@@ -187,14 +210,16 @@ const handleShowLatPlaceName = () => {
 }
 // 动画
 let playing = ref(false);
+let timer
 const handleClickPlaying = () => {
   playing.value = !playing.value;
+  if (playing.value) {
+    timer = setInterval(handleIndex, 1000)
+  } else {
+    clearInterval(timer)
+  }
 }
-let imgList = ref([]);
 onMounted(() => {
-  getRadarChart().then((res) => {
-    imgList.value = res.data;
-  })
   initMap();
 })
 </script>

src/views/threePreventionResponsiblePerson/responsibilityType.vue

@@ -206,13 +206,10 @@ const onConfirm = () => {
   for(let key in selectData.value) {
     if (selectData.value[key].children && selectData.value[key].children.length > 0) {
       let obj = {
-        // key: key,
         type_parent_id: selectData.value[key].type_parent_id,
         parentName: selectData.value[key].parentName,
         children: selectData.value[key].children,
-        labelData: selectData.value[key].labelData,
-        // dept_name: '',
-        // other_type_id: []
+        labelData: selectData.value[key].labelData
       }
       if (['4', '5', '7'].includes(key) && selectData.value[key].dept_name) {
         obj.dept_name = selectData.value[key].dept_name;