地图

src/utils/olMap/olMap.ts

@@ -291,7 +291,7 @@ export class olMap {
   createVecByJson(json, layerName = '') {
     const format = new GeoJSON();
     const fs = format.readFeatures(json);
-    this.removeMask();
+    this.removeMask2();
     this.maskLayer = new VectorLayer({
       source: new VectorSource(),
       style: new Style({
@@ -322,7 +322,51 @@ export class olMap {
     this.maskLayer.getSource().addFeature(convertFt);
   }
 
+  // 分布图遮罩层
+  createMask(data) {
+    this.removeMask();
+    if (!data || data.length === 0) return;
+    data.forEach((item) => {
+      // 遮罩图层的样式
+      const maskStyle = new Style({
+        fill: new Fill({
+          color: item.color // 红色遮罩，50%透明度
+        }),
+        stroke: new Stroke({
+          color: 'rgba(159,159,159,0.7)',
+          width: 1
+        })
+      });
+
+      // 遮罩图层的矢量数据源（初始为空）
+      const maskSource = new VectorSource();
+      // 创建一个多边形特征
+      const polygonFeature = new Feature({
+        geometry: new Polygon(item.points)
+      });
+      const maskLayer = new VectorLayer({
+        source: maskSource,
+        style: maskStyle,
+        properties: {
+          name: 'mask'
+        }
+      });
+      this.map.addLayer(maskLayer);
+      // 将多边形特征添加到遮罩数据源中
+      maskSource.addFeature(polygonFeature);
+    });
+  }
   removeMask() {
+    //移除图层
+    const layersArray = this.map.getLayers().getArray();
+    layersArray.forEach((layer) => {
+      // 检查图层是否有自定义属性，并且该属性是否匹配你要移除的图层的标识符
+      if (layer.get('name') === 'mask') {
+        this.map.removeLayer(layer);
+      }
+    });
+  }
+  removeMask2() {
     if (this.maskLayer) {
       this.map.removeLayer(this.maskLayer);
       this.maskLayer = null;

src/views/globalMap/index.vue

@@ -66,7 +66,7 @@ let map;
 let mapRef = ref(null);
 let map2Ref = ref(null);
 let leftMenuRef = ref(null);
-let showMask = ref(false);
+let showMask = ref(true);
 //  vectorgraph satellite imageMap 废弃：logical satellite2 satellite3
 let activeMap = ref('satellite');
 // 附近视频菜单数据