地图边界

src/hooks/AMap/useAMap.ts

@@ -276,10 +276,32 @@ 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(function(coord) {
+        const polygonPath = feature.geometry.coordinates[0].map((coord) => {
           return [coord[0], coord[1]];
         });
         const polygon = new AMap.Polygon({
@@ -313,27 +335,6 @@ export function useAMap(options) {
         });
       }
     });
-    // 遮罩部分
-    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,
-      strokeOpacity: 0,
-      strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
-      fillColor: option.fillColor ? option.fillColor : '#10243b',
-      fillOpacity: option.fillOpacity ? option.fillOpacity : 0.65
-    });
-    map.add(maskPolygon);
   };
   const removeMask2 = () => {
     if (!!maskPolygon) {

src/utils/gisUtils.ts

@@ -167,9 +167,9 @@ export const gcj_wgs_encrypts = (latlngs) => {
 export const mergeGeoJsonPolygons = (geoJsonData) => {
   const polygons = geoJsonData.features.map((feature) => {
     if (feature.geometry.type === 'Polygon') {
-      return turf.polygon(feature.geometry.coordinates, {"fill": "#0f0"});
+      return turf.polygon(feature.geometry.coordinates);
     } else if (feature.geometry.type === 'MultiPolygon') {
-      return turf.multiPolygon(feature.geometry.coordinates, {"fill": "#0f0"});
+      return turf.multiPolygon(feature.geometry.coordinates);
     }
   });
   if (polygons.length <= 1) {