diff --git a/src/map/editors/BaseLayerEditor.ts b/src/map/editors/BaseOverlayEditor.ts
similarity index 71%
rename from src/map/editors/BaseLayerEditor.ts
rename to src/map/editors/BaseOverlayEditor.ts
index f61602e..951d4f3 100644
--- a/src/map/editors/BaseLayerEditor.ts
+++ b/src/map/editors/BaseOverlayEditor.ts
@@ -1,4 +1,6 @@
-export abstract class BaseLayerEditor
{
+import { OverlayTypes } from "@types";
+
+export abstract class BaseOverlayEditor {
map: AMap.Map;
editor: T;
constructor(map: AMap.Map) {
@@ -19,4 +21,6 @@ export abstract class BaseLayerEditor {
return target;
}
+
+ abstract getType(): OverlayTypes;
}
diff --git a/src/map/editors/CircleEditor.ts b/src/map/editors/CircleEditor.ts
new file mode 100644
index 0000000..8265170
--- /dev/null
+++ b/src/map/editors/CircleEditor.ts
@@ -0,0 +1,11 @@
+import { OverlayTypes } from "@types";
+import { BaseOverlayEditor } from "./BaseOverlayEditor";
+
+export class CircleEditor extends BaseOverlayEditor {
+ getType(): OverlayTypes {
+ return OverlayTypes.Circle;
+ }
+ initEditor(map: AMap.Map) {
+ return new AMap.CircleEditor(this.map);
+ }
+}
diff --git a/src/map/editors/PolygonEditor.ts b/src/map/editors/PolygonEditor.ts
new file mode 100644
index 0000000..2962c8d
--- /dev/null
+++ b/src/map/editors/PolygonEditor.ts
@@ -0,0 +1,11 @@
+import { OverlayTypes } from "@types";
+import { BaseOverlayEditor } from "./BaseOverlayEditor";
+
+export class PolygonEditor extends BaseOverlayEditor {
+ getType(): OverlayTypes {
+ return OverlayTypes.Polygon;
+ }
+ initEditor(map: AMap.Map) {
+ return new AMap.PolygonEditor(map);
+ }
+}
diff --git a/src/map/editors/PolylineEditor.ts b/src/map/editors/PolylineEditor.ts
new file mode 100644
index 0000000..7b340cc
--- /dev/null
+++ b/src/map/editors/PolylineEditor.ts
@@ -0,0 +1,12 @@
+import { OverlayTypes } from "@types";
+import { BaseOverlayEditor } from "./BaseOverlayEditor";
+
+export class PolylineEditor extends BaseOverlayEditor {
+ initEditor(map: AMap.Map) {
+ return new AMap.PolylineEditor(this.map);
+ }
+
+ getType(): OverlayTypes {
+ return OverlayTypes.Polyline;
+ }
+}
diff --git a/src/map/editors/RectangleEditor.ts b/src/map/editors/RectangleEditor.ts
index d44f44b..336dd9d 100644
--- a/src/map/editors/RectangleEditor.ts
+++ b/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 {
+export class RectangleEditor extends BaseOverlayEditor {
initEditor(map: AMap.Map) {
return new AMap.RectangleEditor(this.map);
}
+
+ getType(): OverlayTypes {
+ return OverlayTypes.Rectangle;
+ }
}
diff --git a/src/map/editors/index.ts b/src/map/editors/index.ts
index d600eef..bd91fd2 100644
--- a/src/map/editors/index.ts
+++ b/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";
diff --git a/src/map/index.ts b/src/map/index.ts
index c9f8aa7..38bab4d 100644
--- a/src/map/index.ts
+++ b/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[] = [];
private overlayMap: Record = {};
+ private _currentOverlayEditor:
+ | BaseOverlayEditor
+ | 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) {
- if (state.status === "createOverlay") {
- this.rectangleEditor?.create();
+ update(mapState: IMapState) {
+ const { status, overlayType } = mapState;
+ 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),
+ ];
}
}
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 768ed1a..f1e948e 100644
--- a/src/store/actions.ts
+++ b/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,
diff --git a/src/store/initState.ts b/src/store/initState.ts
index d87c936..cfde017 100644
--- a/src/store/initState.ts
+++ b/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: [],
},
};
diff --git a/src/store/reducers/map/index.ts b/src/store/reducers/map/index.ts
index b6eac66..314b0e3 100644
--- a/src/store/reducers/map/index.ts
+++ b/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.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.rectangles = state.map.rectangles.concat([overlay]);
+ draft.map.overlayType = null;
+ (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]);
});
}
diff --git a/src/store/selectors.ts b/src/store/selectors.ts
index 0fed680..5c49f02 100644
--- a/src/store/selectors.ts
+++ b/src/store/selectors.ts
@@ -1,3 +1,3 @@
-import { editorAction, IEditorState } from "@store";
+import { IEditorState } from "@store";
export const mapStateSelector = (state: IEditorState) => state.map;
diff --git a/src/store/type.ts b/src/store/type.ts
index 9b22657..2f271c2 100644
--- a/src/store/type.ts
+++ b/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[];
}
diff --git a/src/types/enum.ts b/src/types/enum.ts
index 8844e37..75b3e5a 100644
--- a/src/types/enum.ts
+++ b/src/types/enum.ts
@@ -1,3 +1,10 @@
export enum EventTypes {
FinishCreateOverlay = "finishCreateOverlay",
}
+
+export enum OverlayTypes {
+ Rectangle = "rectangle",
+ Polygon = "polygon",
+ Polyline = "polyline",
+ Circle = "circle",
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 96df3eb..0b65227 100644
--- a/src/types/index.ts
+++ b/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";