支持复制图层

src/map/MapEditor.ts

@@ -11,7 +11,7 @@ import {
   CircleEditor,
 } from "./editors";
 
-import { IMapOptions, IMapEditor } from "./type";
+import { IMapOptions, IMapEditor, IOverlay } from "./type";
 
 import { PolygonOptions, PolylineOptions, SelectedOptions } from "./constants";
 
@@ -102,16 +102,6 @@ export class MapEditor extends Emitter implements IMapEditor {
     this.clearOverlays();
     const { overlays } = options;
 
-    const overlayEditors: Record<
-      OverlayTypes,
-      BaseOverlayEditor<AMapOverlayEditor>
-    > = {
-      [OverlayTypes.Rectangle]: this.getEditorByType(OverlayTypes.Rectangle),
-      [OverlayTypes.Polygon]: this.getEditorByType(OverlayTypes.Polygon),
-      [OverlayTypes.Polyline]: this.getEditorByType(OverlayTypes.Polyline),
-      [OverlayTypes.Circle]: this.getEditorByType(OverlayTypes.Circle),
-    };
-
     if (options.center) {
       const [lng, lat] = options.center;
       this.map.setCenter(new AMap.LngLat(lng, lat));
@@ -120,18 +110,7 @@ export class MapEditor extends Emitter implements IMapEditor {
       this.map.setZoom(options.zoom);
     }
 
-    overlays.forEach((overlay) => {
-      const { type, id } = overlay;
-      const target = overlayEditors[type].build(overlay);
-      this._addOverlay(id, { type, target });
-      target.setOptions(
-        type === OverlayTypes.Polyline ? PolylineOptions : PolygonOptions
-      );
-      this.map.add(target);
-      if (overlay.backgroundImage) {
-        this.updateOverlayBackground(id, overlay.backgroundImage);
-      }
-    });
+    overlays.forEach((overlay) => this._buildFromOverlay(overlay));
   }
 
   importGeoJSON(geojson: GeoJSON.FeatureCollection): void {
@@ -225,6 +204,33 @@ export class MapEditor extends Emitter implements IMapEditor {
     this.editorStatus = null;
   }
 
+  copyOverlay(overlay: IOverlay) {
+    const id = getUID();
+    const newOverlay = {
+      ...overlay,
+      id,
+    };
+    this._buildFromOverlay(newOverlay);
+    this._updateOverlay(id);
+    return id;
+  }
+
+  _buildFromOverlay(overlay: IOverlay) {
+    const { type, id } = overlay;
+    const editor = this.overlayEditors.find(
+      (editor) => editor.getType() === type
+    )!;
+    const target = editor.build(overlay);
+    this._addOverlay(id, { type, target });
+    target.setOptions(
+      type === OverlayTypes.Polyline ? PolylineOptions : PolygonOptions
+    );
+    this.map.add(target);
+    if (overlay.backgroundImage) {
+      this.updateOverlayBackground(id, overlay.backgroundImage);
+    }
+  }
+
   _updateOverlay(id: string) {
     if (this.overlayMap[id] == null) return;
     const { type, target } = this.overlayMap[id];

src/map/type.ts

@@ -9,6 +9,7 @@ export interface IMapEditor {
   selectOverlays(ids?: string[]): void;
   deleteOverlays(): void;
   clearOverlays(): void;
+  copyOverlay(overlay: IOverlay): string;
   getCenter(): GeoJSON.Position;
   getZoom(): number;
   updateOverlayBackground(id: string, src?: string): void;

src/store/actions/index.ts

@@ -1,6 +1,6 @@
 import { IMapEditor } from "@map";
 import { Action } from "redux";
-import { Modal } from "antd";
+import { message, Modal } from "antd";
 import { registerHotkey, downloadJSON, openUpload } from "@utils";
 
 import { getGeoJSON } from "../utils";
@@ -128,6 +128,20 @@ export class EditorAction {
       },
     });
   }
+
+  copyOverlay() {
+    const { selectedIds } = this.store.getState();
+    if (selectedIds.length === 0) return;
+    const seletedOverlay = this.mapOptions.overlays.find(
+      (overlay) => overlay.id === selectedIds[0]
+    )!;
+    const id = this.mapEditor?.copyOverlay(seletedOverlay);
+    if (id) {
+      message.success("复制成功!");
+      this.selectOverlay(id);
+    }
+  }
+
   openGeoJSON() {
     openUpload({
       accept: ".geojson",
@@ -183,6 +197,7 @@ export class EditorAction {
     this.createCircle = this.createCircle.bind(this);
     this.deleteOverlays = this.deleteOverlays.bind(this);
     this.clearOverlays = this.clearOverlays.bind(this);
+    this.copyOverlay = this.copyOverlay.bind(this);
   }
 
   private _registerHotkeys() {
@@ -221,5 +236,7 @@ export class EditorAction {
     });
     registerHotkey("4", { callback: this.createCircle, alt: true });
     // registerHotkey("5", { callback: () => {}, alt: true });
+    // 复制覆盖物
+    registerHotkey("d", { callback: this.copyOverlay, alt: true });
   }
 }

src/store/utils/getGeoJSON.ts

@@ -29,9 +29,9 @@ export function getGeoJSON(state: IMapOptions): GeoJSON.FeatureCollection {
       properties.water = true;
     }
 
-    coordinates.forEach((coord) => {
+    coordinates = coordinates.map((coord) => {
       if (turf.booleanClockwise(coord)) {
-        coord.reverse();
+        coord = coord.slice().reverse();
       }
       // 闭合.
       if (coord.length > 2) {
@@ -41,6 +41,7 @@ export function getGeoJSON(state: IMapOptions): GeoJSON.FeatureCollection {
           coord.push([...coord[0]]);
         }
       }
+      return coord;
     });
     features.push({
       type: "Feature",