走通创建图层流程

src/editor/Plot/mapHooks.ts

@@ -1,8 +1,12 @@
 import { Dispatch } from "react";
 import { editorAction, IEditorState } from "@store";
 import { MapEditor } from "@map";
+import { EventTypes } from "../../types/enum";
 
 // 注册地图的事件钩子
 export function registerMapEventHooks(map: MapEditor, dispatch: Dispatch<any>) {
   //
+  map.on(EventTypes.FinishCreateOverlay, (evt: any) =>
+    dispatch(editorAction.finishCreateOverlay(evt))
+  );
 }

src/map/editors/BaseLayerEditor.ts

@@ -14,7 +14,9 @@ export abstract class BaseLayerEditor<T extends AMap.BaseEditor> {
   }
 
   finish() {
-    // const target = this.editor.getT
+    const target = this.editor.getTarget();
     this.editor.setTarget(null);
+
+    return target;
   }
 }

src/map/index.ts

@@ -7,10 +7,13 @@ import "@amap/amap-jsapi-types";
 import { registerHotkey } from "../utils/hotkeys";
 import { EventTypes } from "../types/enum";
 
+let uuid = 0;
+const getUuid = () => ++uuid;
 export class MapEditor extends Emitter {
   dom: HTMLDivElement;
   private _map: AMap.Map | undefined;
   private rectangleEditor: RectangleEditor | undefined;
+  private overlayMap: Record<number, AMap.MapOverlay> = {};
   constructor(dom: HTMLDivElement) {
     super();
     this.dom = dom;
@@ -45,8 +48,17 @@ export class MapEditor extends Emitter {
   }
 
   finishCreateOverlay() {
-    this.rectangleEditor?.finish();
-    this.emit(EventTypes.FinishCreateOverlay);
+    const target = this.rectangleEditor?.finish();
+    let evt: any = null;
+    if (target != null) {
+      const id = getUuid();
+      this.overlayMap[id] = target;
+      evt = {
+        id,
+        type: "rectangle",
+      };
+    }
+    this.emit(EventTypes.FinishCreateOverlay, evt);
   }
 
   initEditors() {

src/store/actions.ts

@@ -1,8 +1,13 @@
 export enum ActionTypes {
   AddRect = "addRect",
   CreateOverlay = "createOverlay",
+  FinishCreateOverlay = "finishCreateOverlay",
 }
 
+export type CreatedOverlay = {
+  id: string;
+  type: string;
+};
 export class EditorAction {
   addRect() {
     return {
@@ -15,4 +20,10 @@ export class EditorAction {
       payload: type,
     };
   }
+  finishCreateOverlay(overlay: any) {
+    return {
+      type: ActionTypes.FinishCreateOverlay,
+      payload: overlay as CreatedOverlay,
+    };
+  }
 }

src/store/index.ts

@@ -9,6 +9,8 @@ export * from "./type";
 type IStore = Store<IEditorState, Action>;
 const store: IStore = createStore(reducer);
 
+(window as any).store = store;
+
 export { store };
 
 // export class Store {

src/store/initState.ts

@@ -5,5 +5,6 @@ export const initState: IEditorState = {
     status: "",
     overlayType: "",
     polygons: [],
+    rectangles: [],
   },
 };

src/store/reducers.ts

@@ -1,7 +1,7 @@
 import { createStore } from "redux";
 import { initState } from "./initState";
 import { ActionTypes } from "./actions";
-import { IEditorState } from "./type";
+import { IEditorState, IOverlay } from "./type";
 
 export type Action = {
   type: ActionTypes;
@@ -21,6 +21,16 @@ export function reducer(state = initState, action: Action): IEditorState {
         },
         //
       };
+    case ActionTypes.FinishCreateOverlay:
+      return {
+        ...state,
+        map: {
+          ...state.map,
+          status: "",
+          overlayType: "",
+          rectangles: [payload as IOverlay].concat(state.map.rectangles),
+        },
+      };
     default:
       return state;
   }

src/store/type.ts

@@ -1,12 +1,14 @@
-export interface IPolygon {
+export interface IOverlay {
   id: string;
   name: string;
+  type: string;
 }
 
 export interface IMapState {
   status: string;
   overlayType: string;
-  polygons: IPolygon[];
+  polygons: IOverlay[];
+  rectangles: IOverlay[];
 }
 
 export interface IEditorState {

src/types/index.ts

@@ -6,9 +6,11 @@ declare global {
     interface IBaseEditor {
       // new (map: AMap.Map): any;
     }
+    type MapOverlay = AMap.Rectangle | AMap.Polygon | AMap.Polyline;
     class BaseEditor implements IBaseEditor {
       constructor(map: AMap.Map);
       setTarget(target: any): void;
+      getTarget(): MapOverlay;
       open(): void;
     }
     class PolygonEditor extends BaseEditor {