补齐overlayEditor

src/editor/Catalog/index.tsx

@@ -30,7 +30,8 @@ const OverlayList = (props: OverlayListProps) => {
 
 const Catalog = () => {
   // const callback = (key: string | string[]) => console.log(key);
-  const { rectangles, polygons } = useSelector(mapStateSelector);
+  const { rectangles, polygons, polylines, circles } =
+    useSelector(mapStateSelector);
   return (
     <Collapse
       defaultActiveKey={["1"]}
@@ -43,6 +44,12 @@ const Catalog = () => {
       <Panel header="多边形" key={2}>
         <OverlayList overlays={polygons} />
       </Panel>
+      <Panel header="多段线" key={3}>
+        <OverlayList overlays={polylines} />
+      </Panel>
+      <Panel header="圆形" key={4}>
+        <OverlayList overlays={circles} />
+      </Panel>
     </Collapse>
   );
 };

src/editor/Plot/Tools/index.tsx

@@ -1,6 +1,7 @@
 import { Tooltip } from "antd";
 import { useDispatch } from "react-redux";
 import { editorAction } from "@store";
+import { OverlayTypes } from "@types";
 
 type IconWithTipProps = {
   type: string;
@@ -25,15 +26,25 @@ const IconWithTip = ({
 const Tools = () => {
   const dispatch = useDispatch();
 
-  const createOverlay = (type: string) => () =>
+  const createOverlay = (type: OverlayTypes) => () =>
     dispatch(editorAction.createOverlay(type));
-  const createRectangle = createOverlay("rect");
+
+  const createRectangle = createOverlay(OverlayTypes.Rectangle);
+  const createPolygon = createOverlay(OverlayTypes.Polygon);
+  const createPolyline = createOverlay(OverlayTypes.Polyline);
+  const createCircle = createOverlay(OverlayTypes.Circle);
 
   return (
     <>
       <div className="marker-tools">
         <IconWithTip type="rect" text="矩形工具" onClick={createRectangle} />
-        <IconWithTip type="circle" text="圆形工具" />
+        <IconWithTip type="polygon" text="多边形工具" onClick={createPolygon} />
+        <IconWithTip
+          type="polyline"
+          text="多段线工具"
+          onClick={createPolyline}
+        />
+        <IconWithTip type="circle" text="圆形工具" onClick={createCircle} />
       </div>
       <div className="common-tools">
         <div className="tools-group">

src/map/editors/BaseOverlayEditor.ts

@@ -1,4 +1,6 @@
-export abstract class BaseLayerEditor<T extends AMap.BaseEditor> {
+import { OverlayTypes } from "@types";
+
+export abstract class BaseOverlayEditor<T extends AMap.BaseEditor> {
   map: AMap.Map;
   editor: T;
   constructor(map: AMap.Map) {
@@ -19,4 +21,6 @@ export abstract class BaseLayerEditor<T extends AMap.BaseEditor> {
 
     return target;
   }
+
+  abstract getType(): OverlayTypes;
 }

src/map/editors/CircleEditor.ts

@@ -0,0 +1,11 @@
+import { OverlayTypes } from "@types";
+import { BaseOverlayEditor } from "./BaseOverlayEditor";
+
+export class CircleEditor extends BaseOverlayEditor<AMap.CircleEditor> {
+  getType(): OverlayTypes {
+    return OverlayTypes.Circle;
+  }
+  initEditor(map: AMap.Map) {
+    return new AMap.CircleEditor(this.map);
+  }
+}

src/map/editors/PolygonEditor.ts

@@ -0,0 +1,11 @@
+import { OverlayTypes } from "@types";
+import { BaseOverlayEditor } from "./BaseOverlayEditor";
+
+export class PolygonEditor extends BaseOverlayEditor<AMap.PolygonEditor> {
+  getType(): OverlayTypes {
+    return OverlayTypes.Polygon;
+  }
+  initEditor(map: AMap.Map) {
+    return new AMap.PolygonEditor(map);
+  }
+}

src/map/editors/PolylineEditor.ts

@@ -0,0 +1,12 @@
+import { OverlayTypes } from "@types";
+import { BaseOverlayEditor } from "./BaseOverlayEditor";
+
+export class PolylineEditor extends BaseOverlayEditor<AMap.PolylineEditor> {
+  initEditor(map: AMap.Map) {
+    return new AMap.PolylineEditor(this.map);
+  }
+
+  getType(): OverlayTypes {
+    return OverlayTypes.Polyline;
+  }
+}

src/map/editors/RectangleEditor.ts

@@ -1,7 +1,12 @@
-import { BaseLayerEditor } from "./BaseLayerEditor";
+import { OverlayTypes } from "@types";
+import { BaseOverlayEditor } from "./BaseOverlayEditor";
 
-export class RectangleEditor extends BaseLayerEditor<AMap.PolygonEditor> {
+export class RectangleEditor extends BaseOverlayEditor<AMap.RectangleEditor> {
   initEditor(map: AMap.Map) {
     return new AMap.RectangleEditor(this.map);
   }
+
+  getType(): OverlayTypes {
+    return OverlayTypes.Rectangle;
+  }
 }

src/map/editors/index.ts

@@ -1,2 +1,5 @@
-export * from "./BaseLayerEditor";
+export * from "./BaseOverlayEditor";
 export * from "./RectangleEditor";
+export * from "./PolygonEditor";
+export * from "./CircleEditor";
+export * from "./PolylineEditor";

src/map/index.ts

@@ -1,19 +1,35 @@
 import Emitter from "@finevis/emitter";
-import "../types";
+import "@amap/amap-jsapi-types";
+
 import { IMapState } from "@store";
-import { RectangleEditor } from "./editors";
+import {
+  BaseOverlayEditor,
+  RectangleEditor,
+  PolygonEditor,
+  PolylineEditor,
+  CircleEditor,
+} from "./editors";
 
-import "@amap/amap-jsapi-types";
 import { registerHotkey } from "../utils/hotkeys";
 import { EventTypes } from "../types/enum";
 
 let uuid = 0;
 const getUuid = () => ++uuid;
+
+type AMapOverlayEditor =
+  | AMap.RectangleEditor
+  | AMap.PolygonEditor
+  | AMap.PolylineEditor
+  | AMap.CircleEditor;
+
 export class MapEditor extends Emitter {
   dom: HTMLDivElement;
   private _map: AMap.Map | undefined;
-  private rectangleEditor: RectangleEditor | undefined;
+  private overlayEditors: BaseOverlayEditor<AMapOverlayEditor>[] = [];
   private overlayMap: Record<number, AMap.MapOverlay> = {};
+  private _currentOverlayEditor:
+    | BaseOverlayEditor<AMapOverlayEditor>
+    | undefined;
   constructor(dom: HTMLDivElement) {
     super();
     this.dom = dom;
@@ -31,6 +47,7 @@ export class MapEditor extends Emitter {
         "AMap.RectangleEditor",
         "AMap.PolylineEditor",
         "AMap.PolygonEditor",
+        "AMap.CircleEditor",
         "AMap.PlaceSearch",
         "AMap.AutoComplete",
       ],
@@ -41,21 +58,26 @@ export class MapEditor extends Emitter {
     registerHotkey(" ", { callback: this.finishCreateOverlay.bind(this) });
   }
 
-  update(state: IMapState) {
+  update(mapState: IMapState) {
-    if (state.status === "createOverlay") {
+    const { status, overlayType } = mapState;
-      this.rectangleEditor?.create();
+    if (status === "createOverlay") {
+      this._currentOverlayEditor = this.overlayEditors.find(
+        (editor) => editor.getType() === overlayType
+      );
+      this._currentOverlayEditor?.create();
     }
   }
 
   finishCreateOverlay() {
-    const target = this.rectangleEditor?.finish();
+    if (this._currentOverlayEditor == null) return;
+    const target = this._currentOverlayEditor.finish();
     let evt: any = null;
     if (target != null) {
       const id = getUuid();
       this.overlayMap[id] = target;
       evt = {
         id,
-        type: "rectangle",
+        type: this._currentOverlayEditor.getType(),
       };
     }
     this.emit(EventTypes.FinishCreateOverlay, evt);
@@ -63,6 +85,11 @@ export class MapEditor extends Emitter {
 
   initEditors() {
     const { map } = this;
-    this.rectangleEditor = new RectangleEditor(map);
+    this.overlayEditors = [
+      new RectangleEditor(map),
+      new PolygonEditor(map),
+      new PolylineEditor(map),
+      new CircleEditor(map),
+    ];
   }
 }

src/store/actions.ts

@@ -1,3 +1,5 @@
+import { OverlayTypes } from "@types";
+
 export enum ActionTypes {
   // AddRect = "addRect",
   CreateOverlay = "createOverlay",
@@ -6,7 +8,7 @@ export enum ActionTypes {
 
 export type CreatedOverlay = {
   id: string;
-  type: string;
+  type: OverlayTypes;
 };
 export class EditorAction {
   // addRect() {
@@ -14,7 +16,7 @@ export class EditorAction {
   //     type: ActionTypes.AddRect,
   //   };
   // }
-  createOverlay(type: string) {
+  createOverlay(type: OverlayTypes) {
     return {
       type: ActionTypes.CreateOverlay,
       payload: type,

src/store/initState.ts

@@ -3,8 +3,10 @@ import { IEditorState } from "./type";
 export const initState: IEditorState = {
   map: {
     status: "",
-    overlayType: "",
+    overlayType: null,
     polygons: [],
+    polylines: [],
+    circles: [],
     rectangles: [],
   },
 };

src/store/reducers/map/index.ts

@@ -1,21 +1,38 @@
 import produce from "immer";
 import { initState } from "../../initState";
 import { IOverlay } from "@store";
+import { OverlayTypes } from "@types";
+
+const OverlayNamePrefixs: Record<OverlayTypes, string> = {
+  [OverlayTypes.Rectangle]: "矩形",
+  [OverlayTypes.Polygon]: "多边形",
+  [OverlayTypes.Polyline]: "多段线",
+  [OverlayTypes.Circle]: "圆形",
+};
 
 export function createOverlay(state = initState, payload: any) {
   return produce(state, (draft) => {
     draft.map.status = "createOverlay";
-    draft.map.overlayType = payload as string;
+    draft.map.overlayType = payload as OverlayTypes;
   });
 }
 
 export function finishCreateOverlay(state = initState, payload: any) {
   return produce(state, (draft) => {
     const overlay = payload as IOverlay;
+    const { type } = overlay;
     // todo: uniqueName.
-    overlay.name = "矩形" + overlay.id;
+    overlay.name = OverlayNamePrefixs[type] + overlay.id;
     draft.map.status = "";
-    draft.map.overlayType = "";
+    draft.map.overlayType = null;
-    draft.map.rectangles = state.map.rectangles.concat([overlay]);
+    (type === OverlayTypes.Rectangle
+      ? draft.map.rectangles
+      : type === OverlayTypes.Circle
+      ? draft.map.circles
+      : type === OverlayTypes.Polygon
+      ? draft.map.polygons
+      : draft.map.polylines
+    ).push(overlay);
+    // draft.map.rectangles = state.map.rectangles.concat([overlay]);
   });
 }

src/store/selectors.ts

@@ -1,3 +1,3 @@
-import { editorAction, IEditorState } from "@store";
+import { IEditorState } from "@store";
 
 export const mapStateSelector = (state: IEditorState) => state.map;

src/store/type.ts

@@ -1,13 +1,17 @@
+import { OverlayTypes } from "@types";
+
 export interface IOverlay {
   id: string;
   name: string;
-  type: string;
+  type: OverlayTypes;
 }
 
 export interface IMapState {
   status: string;
-  overlayType: string;
+  overlayType: OverlayTypes | null;
   polygons: IOverlay[];
+  polylines: IOverlay[];
+  circles: IOverlay[];
   rectangles: IOverlay[];
 }
 

src/types/enum.ts

@@ -1,3 +1,10 @@
 export enum EventTypes {
   FinishCreateOverlay = "finishCreateOverlay",
 }
+
+export enum OverlayTypes {
+  Rectangle = "rectangle",
+  Polygon = "polygon",
+  Polyline = "polyline",
+  Circle = "circle",
+}

src/types/index.ts

@@ -19,6 +19,12 @@ declare global {
     class RectangleEditor extends BaseEditor {
       //
     }
+    class PolylineEditor extends BaseEditor {
+      //
+    }
+    class CircleEditor extends BaseEditor {
+      //
+    }
   }
 }
-export {};
+export * from "./enum";