雷达回波 实现切换地图、显隐经纬线、地名效果

src/utils/olMap/olMap.ts

@@ -89,7 +89,7 @@ export class olMap {
     });
     // 初始化比例尺
     if (options.showScale) {
-      // map.addControl(new AMap.Scale());
+      // this.map.addControl(new AMap.Scale());
     }
     if (options.drawTool?.use) {
       this.initMouseTool(options.drawTool);
@@ -100,11 +100,15 @@ export class olMap {
     // 添加新的图层
     if (Array.isArray(options.id)) {
       for (const layer of options.id) {
-        await this.formatXml(layer); // 等待当前 layer 处理完成
+        if (typeof layer === "string") {
+          await this.formatXml(layer); // 等待当前 layer 处理完成
+        } else {
+          await this.formatXml(layer.id, layer.minZoom, layer.maxZoom, layer.zIndex, layer.visible); // 等待当前 layer 处理完成
+        }
       }
     } else if (options.id) {
       // 如果 options.id 不是数组，但确实是一个图层，则直接处理
-      await this.formatXml(options.id);
+      await this.formatXml(options.id, options.minZoom, options.maxZoom, options.zIndex, options.visible);
     }
     // 创建Vector层并添加到地图上
     this.vectorLayer = new VectorLayer({
@@ -118,11 +122,8 @@ export class olMap {
     }
   }
 
-  formatXml(code, minZoom, maxZoom, zIndex, visible) {
+  formatXml(code: string, minZoom?: number, maxZoom?: number, zIndex?: number, visible?: boolean) {
     const xml = new WMTSCapabilities();
-    // axios.post(commonUrl + 'YZT1723547712680', '<wfs:GetFeature xmlns:wfs="http://www.opengis.net/wfs"service="WFS"version="1.0.0"outputFormat="GeoJson"maxFeatures="99999"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.opengis.net/wfshttp://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd">\n' +
-    //   '<wfs:QuerytypeName="GDSMMSZJGZDTJX_2023"userecent="true"/>\n' +
-    //   '</wfs:GetFeature>');
     return this.getCapabilities(code).then((lists) => {
       const geojson = xml.read(lists.data);
       const data = geojson.Contents.Layer[0];
@@ -158,6 +159,7 @@ export class olMap {
       })
     });
     const layer = new TileLayer({
+      name: code,
       source: source,
       zIndex: zIndex,
       minZoom: minZoom,
@@ -167,7 +169,6 @@ export class olMap {
     layer.set('layerName', code);
 
     this.map.addLayer(layer);
-    console.log(code);
   }
 
   // 初始化绘画工具
@@ -219,20 +220,23 @@ export class olMap {
   }
 
   // 切换图层
-  async replaceLayers(newLayers) {
+  async replaceLayers(newLayers, loadendFunc) {
     // 遍历当前的所有图层并移除它们
     this.map.getLayers().forEach((layer) => {
       this.map.removeLayer(layer);
     });
 
-    // 添加新的图层
     if (Array.isArray(newLayers)) {
       for (const layer of newLayers) {
-        await this.formatXml(layer); // 等待当前 layer 处理完成
+        if (typeof layer === "string") {
+          await this.formatXml(layer); // 等待当前 layer 处理完成
+        } else {
+          await this.formatXml(layer.id, layer.minZoom, layer.maxZoom, layer.zIndex, layer.visible); // 等待当前 layer 处理完成
+        }
       }
-    } else if (newLayers) {
+    } else {
       // 如果 options.id 不是数组，但确实是一个图层，则直接处理
-      await this.formatXml(newLayers);
+      await this.formatXml(newLayers.id, newLayers.minZoom, newLayers.maxZoom, newLayers.zIndex, newLayers.visible);
     }
     // 创建Vector层并添加到地图上
     this.vectorLayer = new VectorLayer({
@@ -244,6 +248,9 @@ export class olMap {
     const point = JSON.parse(JSON.stringify(this.markers));
     this.markers = [];
     this.addMarker(point);
+    if (loadendFunc) {
+      loadendFunc();
+    }
   }
 
   addMarker(points) {
@@ -379,16 +386,12 @@ export class olMap {
   removeMask() {
     //移除图层
     const layersArray = this.map.getLayers().getArray();
-    const layers = [];
     layersArray.forEach((layer) => {
       // 检查图层是否有自定义属性，并且该属性是否匹配你要移除的图层的标识符
       if (layer.get('name') === 'mask') {
-        layers.push(layer);
+        this.map.removeLayer(layer);
       }
     });
-    layers.forEach((layer) => {
-      this.map.removeLayer(layer);
-    });
   }
 
   /**
@@ -397,43 +400,50 @@ export class olMap {
    */
   handleLngLatLine(visible: boolean) {
     // 创建经纬网图层
-    let graticule = new Graticule({
+    const graticule = new Graticule({
+      name: 'Graticule',
       showLabels: true, // 为每条刻度线绘制一个带有各自纬度/经度的标签
-      wrapX: true,     // 是否水平重复经纬网
+      wrapX: false,     // 是否水平重复经纬网
       targetSize: 230,
       zIndex: 99999,
       strokeStyle: new Stroke({ // 用于绘制刻度线的样式
         color: '#dcdcdc', // 线条颜色
         width: 1,       // 线条宽度
       }),
-      // lonLabelFormatter: (data) => {
-      //   return data;
-      // },
-      // latLabelFormatter: (data) => {
-      //   return data;
-      // },
-      lonLabelPosition: 'top',
-      // latLabelPosition: 'left',
-      latLabelStyle: new Text({
+      lonLabelStyle: new Text({
         font: '12px Calibri,sans-serif',
         textBaseline: 'bottom',
         fill: new Fill({
           color: '#9d9d9d'
         })
+      }),
+      latLabelPosition: 0,
+      latLabelStyle: new Text({
+        font: '12px Calibri,sans-serif',
+        textAlign: 'left',
+        textBaseline: 'end',
+        fill: new Fill({
+          color: '#9d9d9d'
+        })
       })
     });
     if (visible) {
       this.map.addLayer(graticule)
     } else {
-      var layers = this.map.getLayers();
-      layers.forEach(element => {
-        //假设每个层都有一个名为 'name' 的属性
-        console.log(element.get('name'));
-        if (element.get('name')=='Graticule') {
-          //移除
-          this.map.removeLayer(element)
-        }
-      });
+      this.removeLayer('Graticule')
     }
   }
+  /**
+   * 移除指定name的layer
+   * layerName: string
+   * */
+  removeLayer(layerName: string) {
+    const layers = this.map.getLayers();
+    layers.forEach((element) => {
+      if (!!element && element.get('name') === layerName) {
+        //移除
+        this.map.removeLayer(element)
+      }
+    });
+  }
 }

src/views/disasterRiskMonitor/radarEchoMap.vue

@@ -80,9 +80,10 @@ let openDynamicImage = ref(false);
 
 // 初始化地图
 const initMap = () => {
+  const index = mapTypeList.findIndex((item) => item.value === activeMap.value);
   mapUtils = new olMap({
     dom: windBreakMapRef.value,
-    id: ['YZT1640925052482', 'YZT1695608158269'],
+    id: mapTypeList[index].data,
     center: mapState.center,
     zoom: mapState.zoom,
     minZoom: mapState.minZoom,
@@ -94,14 +95,16 @@ const initMap = () => {
       mapUtils.createVecByJson(mmJson, {
         fillColor: 'transparent'
       });
-      mapUtils.handleLngLatLine(true);
+      mapUtils.handleLngLatLine(showLatLngLine.value);
       map.updateSize();
     }
   });
 };
 // 获取级别数据
+let levelData = ref({});
 const getLevelData = () => {
   getAreaMap().then((res) => {
+    levelData.value = res.data;
     mapUtils.createMask(res.data);
   })
   const now = new Date();
@@ -134,22 +137,51 @@ const handleClickMapSetting = () => {
   showMapSetting.value = !showMapSetting.value;
 }
 // 当前显示图层
-let activeMap = ref('businessMap');
+let activeMap = ref('satelliteMap');
 let mapTypeList = reactive([
-  { name: '业务图', value: 'businessMap' },
-  { name: '卫星图', value: 'satelliteMap' }
+  { name: '业务图', value: 'businessMap', data: [{id: 'YZT1708679726700', zIndex: 0}, {id: 'YZT1695608158269', zIndex: 100}] },
+  { name: '卫星图', value: 'satelliteMap', data: [{id: 'YZT1640925052482', zIndex: 0}, {id: 'YZT1695608158269', zIndex: 100}] }
 ])
+// 切换地图
 const changeActiveMap = (value) => {
+  handleClickMapSetting();
+  if(activeMap.value === value) return;
   activeMap.value = value;
+  const index = mapTypeList.findIndex((item) => item.value === activeMap.value);
+  let layers = mapTypeList[index].data;
+  // 判断是否显示地名
+  if (!showLatPlaceName.value) {
+    layers = layers.filter(item => item.id !== 'YZT1695608158269');
+  }
+  mapUtils.removeMask();
+  mapUtils.replaceLayers(layers, () => {
+    //加载完基础图层后再加载其他图层
+    mapUtils.createMask(levelData.value);
+    mapUtils.createVecByJson(mmJson, {
+      fillColor: 'transparent'
+    });
+    if (showLatLngLine.value) {
+      mapUtils.handleLngLatLine(showLatLngLine.value);
+    }
+  });
 };
-// 显示经纬线
+// 显隐经纬线
 let showLatLngLine = ref(true);
 let showLatPlaceName = ref(true);
 const handleShowLatLngLine = () => {
   showLatLngLine.value = !showLatLngLine.value;
+  handleClickMapSetting();
+  mapUtils.handleLngLatLine(showLatLngLine.value);
 }
+// 显隐地名
 const handleShowLatPlaceName = () => {
   showLatPlaceName.value = !showLatPlaceName.value;
+  handleClickMapSetting();
+  if (showLatPlaceName.value) {
+    mapUtils.formatXml(['YZT1695608158269'])
+  } else {
+    mapUtils.removeLayer('YZT1695608158269')
+  }
 }
 // 动画
 let playing = ref(false);
@@ -366,6 +398,22 @@ onMounted(() => {
             background-size: 100% 100%;
             margin: 3px 0;
           }
+          &:active {
+            background-color: #48a1f7;
+            color: #fff;
+            .icon-left {
+              background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/left2.png") no-repeat;
+              background-size: 100% 100%;
+            }
+            .icon-right {
+              background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/right2.png") no-repeat;
+              background-size: 100% 100%;
+            }
+            .icon-play {
+              background: url("@/assets/images/disasterRiskMonitor/radarEchoMap/play2.png") no-repeat;
+              background-size: 100% 100%;
+            }
+          }
         }
       }
       .btn-active {

src/views/worker/index.vue

@@ -45,7 +45,7 @@
           <!-- 查看更多的链接 -->
           <div class="notice-more" @click="goToInformationReception">查看更多 >></div>
         </div>
-        <div class="notice-content">
+        <div class="notice-content" @click="handleInfo(noticeBarState.latestMessages)">
           {{ noticeBarState.latestMessages.content }}
         </div>
         <div class="notice-time">{{ noticeBarState.latestMessages.publish_time }}</div>
@@ -182,6 +182,9 @@ const initData = async() => {
     noticeBarState.show = true;
   }
 }
+const handleInfo = (item) => {
+  router.push("/infoDetails?id=" + item.id);
+}
 /*
 const initData = async () => {
   try {