优化地图边界显隐

src/components/Map/YztMap/index.vue

@@ -76,9 +76,9 @@ watch(
   () => props.showMask,
   () => {
     if (props.showMask) {
-      mapUtils.createVecByJson(mmJson, '茂名市');
+      mapUtils.createVecByJson2(mmJson, { strokeWeight: 2 });
     } else {
-      mapUtils.removeMask2();
+      mapUtils.removeMask3();
     }
   }
 );
@@ -118,7 +118,7 @@ const init = () => {
         mapState.zoom = map.getView().getZoom().toFixed(2);
       });
       if (props.showMask) {
-        mapUtils.createVecByJson(mmJson, '茂名市');
+        mapUtils.createVecByJson2(mmJson, { strokeWeight: 2 });
       }
       handleResize();
     }

src/components/Map/index.vue

@@ -419,7 +419,7 @@ watch(
     if (props.showMask) {
       creatMask2(mmJson, { strokeWeight: 2 });
     } else {
-      removeMask2();
+      removeMask2(true);
     }
   }
 );

src/hooks/AMap/useAMap.ts

@@ -275,56 +275,43 @@ export function useAMap(options) {
   };
   let maskPolygon2 = [];
   const creatMask2 = (data, option) => {
-    data = convertCoordinates(data);
-    // 遮罩部分
-    const outer = [
-      new AMap.LngLat(-180, 90, true),
-      new AMap.LngLat(-180, -90, true),
-      new AMap.LngLat(180, -90, true),
-      new AMap.LngLat(180, 90, true)
-    ];
-    const pathArray = [outer];
-    // 合并区边界
-    const data2 = mergeGeoJsonPolygons(data);
-    data2.geometry.coordinates.forEach((coords) => {
-      pathArray.push(coords[0]);
-    });
-    maskPolygon = new AMap.Polygon({
-      path: pathArray,
-      strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
-      strokeOpacity: 1,
-      strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
-      fillColor: option.fillColor ? option.fillColor : '#10243b',
-      fillOpacity: option.fillOpacity ? option.fillOpacity : 0.65
-    });
-    map.add(maskPolygon);
-    // 边界部分
-    data.features.forEach((feature) => {
-      if (feature.geometry.type === 'Polygon') {
-        const polygonPath = feature.geometry.coordinates[0].map((coord) => {
-          return [coord[0], coord[1]];
-        });
-        const polygon = new AMap.Polygon({
-          path: polygonPath,
-          strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
-          strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
-          strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
-          fillOpacity: 0
-        });
-        maskPolygon2.push(polygon);
-        map.add(polygon);
-      } 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]];
-            });
+    if (maskPolygon2 && maskPolygon2.length > 0) {
+      maskPolygon2.forEach((polygon) => {
+        polygon.show();
+      });
+    } else {
+      data = convertCoordinates(data);
+      // 遮罩部分
+      const outer = [
+        new AMap.LngLat(-180, 90, true),
+        new AMap.LngLat(-180, -90, true),
+        new AMap.LngLat(180, -90, true),
+        new AMap.LngLat(180, 90, true)
+      ];
+      const pathArray = [outer];
+      // 合并区边界
+      const data2 = mergeGeoJsonPolygons(data);
+      data2.geometry.coordinates.forEach((coords) => {
+        pathArray.push(coords[0]);
+      });
+      const maskPolygon = new AMap.Polygon({
+        path: pathArray,
+        strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
+        strokeOpacity: 1,
+        strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
+        fillColor: option.fillColor ? option.fillColor : '#10243b',
+        fillOpacity: option.fillOpacity ? option.fillOpacity : 0.65
+      });
+      maskPolygon2.push(maskPolygon);
+      map.add(maskPolygon);
+      // 边界部分
+      data.features.forEach((feature) => {
+        if (feature.geometry.type === 'Polygon') {
+          const polygonPath = feature.geometry.coordinates[0].map((coord) => {
+            return [coord[0], coord[1]];
           });
-          const outerPath = polygonPath[0];
-          const innerPaths = polygonPath.slice(1);
           const polygon = new AMap.Polygon({
-            path: outerPath,
-            holes: innerPaths,
+            path: polygonPath,
             strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
             strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
             strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
@@ -332,20 +319,38 @@ export function useAMap(options) {
           });
           maskPolygon2.push(polygon);
           map.add(polygon);
-        });
-      }
-    });
-  };
-  const removeMask2 = () => {
-    if (!!maskPolygon) {
-      map.remove(maskPolygon);
-      maskPolygon = null;
+        } 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[0];
+            const innerPaths = polygonPath.slice(1);
+            const polygon = new AMap.Polygon({
+              path: outerPath,
+              holes: innerPaths,
+              strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
+              strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
+              strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
+              fillOpacity: 0
+            });
+            maskPolygon2.push(polygon);
+            map.add(polygon);
+          });
+        }
+      });
     }
+  };
+  const removeMask2 = (isHidden) => {
     if (maskPolygon2 && maskPolygon2.length > 0) {
       maskPolygon2.forEach((polygon) => {
-        map.remove(polygon);
+        polygon.hide();
       });
-      maskPolygon2 = [];
+      if (!isHidden) {
+        maskPolygon2 = [];
+      }
     }
   };
   let moveMarker, movePolyline, movePassedPolyline, timerId;

src/utils/index.ts

@@ -375,6 +375,5 @@ export const getRgba = (rgbaString) => {
   return {
     color: 'rgb(' + r + ',' + g + ',' + b + ')',
     opacity: opacity
-  }
-}
-
+  };
+};

src/utils/olMap/olMap.ts

@@ -27,6 +27,7 @@ import { fromExtent } from 'ol/geom/Polygon';
 import { LinearRing, Polygon } from 'ol/geom';
 import { Tile } from 'ol';
 import {Graticule} from "ol/layer";
+import { mergeGeoJsonPolygons } from '@/utils/gisUtils';
 // import olPlot from 'ol-plot';
 // import { activate } from '../ol-plot/ol-plot'
 
@@ -69,6 +70,7 @@ export class olMap {
   private plot;
   private vectorLayer;
   private maskLayer;
+  private maskLayer2 = [];
 
   constructor(options) {
     this.options = options;
@@ -330,7 +332,98 @@ export class olMap {
     });
     this.maskLayer.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 图层名称
@@ -364,7 +457,6 @@ export class olMap {
           width: 1
         })
       });
-
       // 遮罩图层的矢量数据源（初始为空）
       const maskSource = new VectorSource();
       // 创建一个多边形特征
@@ -399,6 +491,16 @@ export class olMap {
       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 是否可见