diff --git a/src/editor/Plot/mapHooks.ts b/src/editor/Plot/mapHooks.ts index 277a030..1ff8113 100644 --- a/src/editor/Plot/mapHooks.ts +++ b/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) { // + map.on(EventTypes.FinishCreateOverlay, (evt: any) => + dispatch(editorAction.finishCreateOverlay(evt)) + ); } diff --git a/src/map/editors/BaseLayerEditor.ts b/src/map/editors/BaseLayerEditor.ts index 86b01a0..f61602e 100644 --- a/src/map/editors/BaseLayerEditor.ts +++ b/src/map/editors/BaseLayerEditor.ts @@ -14,7 +14,9 @@ export abstract class BaseLayerEditor { } finish() { - // const target = this.editor.getT + const target = this.editor.getTarget(); this.editor.setTarget(null); + + return target; } } diff --git a/src/map/index.ts b/src/map/index.ts index fc25c7b..c9f8aa7 100644 --- a/src/map/index.ts +++ b/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 = {}; 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() { diff --git a/src/store/actions.ts b/src/store/actions.ts index bb93ce2..677273e 100644 --- a/src/store/actions.ts +++ b/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, + }; + } } diff --git a/src/store/index.ts b/src/store/index.ts index 313817a..a9a29f0 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -9,6 +9,8 @@ export * from "./type"; type IStore = Store; const store: IStore = createStore(reducer); +(window as any).store = store; + export { store }; // export class Store { diff --git a/src/store/initState.ts b/src/store/initState.ts index 0a45abd..d87c936 100644 --- a/src/store/initState.ts +++ b/src/store/initState.ts @@ -5,5 +5,6 @@ export const initState: IEditorState = { status: "", overlayType: "", polygons: [], + rectangles: [], }, }; diff --git a/src/store/reducers.ts b/src/store/reducers.ts index 589b32a..0a5f366 100644 --- a/src/store/reducers.ts +++ b/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; } diff --git a/src/store/type.ts b/src/store/type.ts index d023a30..9b22657 100644 --- a/src/store/type.ts +++ b/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 { diff --git a/src/types/index.ts b/src/types/index.ts index 7dec904..96df3eb 100644 --- a/src/types/index.ts +++ b/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 {