支持删除覆盖物

src/map/index.ts

@@ -84,6 +84,9 @@ export class MapEditor extends Emitter {
         break;
       case Command.SelectOverlay:
         this._selectOverlays(mapState.selectedIds);
+        break;
+      case Command.DeleteOverlays:
+        this._deleteOverlays();
     }
   }
 
@@ -119,6 +122,14 @@ export class MapEditor extends Emitter {
     });
   }
 
+  _deleteOverlays() {
+    if (this._selectedIds?.length === 0) return;
+    this._selectedIds.forEach((id) => {
+      const { target } = this.overlayMap[id];
+      this.map.remove(target);
+    });
+  }
+
   _finishEditOverlay() {
     if (this._currentOverlayEditor == null) return;
     const target = this._currentOverlayEditor.finish();

src/store/GlobalController.ts

@@ -1,9 +1,11 @@
+import { message, Popconfirm, Modal } from "antd";
+import { registerHotkey, downloadJSON } from "@utils";
+
 import { IStore } from "./type";
-import { registerHotkey } from "@utils";
+import { getGeoJSON } from "./utils";
-import { getGeoJSON } from "./utils/getGeoJSON";
 import { OverlayTypes } from "../types/enum";
 import { EditorAction } from "./actions";
-import { downloadJSON } from "../utils/download";
+
 interface IGlobalController {
   saveGeoJSON: () => void;
   saveProject: () => void;
@@ -16,6 +18,7 @@ interface IGlobalController {
   createPolygon: () => void;
   createPolyline: () => void;
   createCircle: () => void;
+  deleteOverlays: () => void;
 }
 
 // 全局控制器, 用以复用一些快捷方法.
@@ -72,12 +75,24 @@ export class GlobelController implements IGlobalController {
     this._store.dispatch(EditorAction.createOverlay(type));
   }
 
+  deleteOverlays() {
+    const { selectedIds } = this.mapState;
+    if (selectedIds?.length == 0) return;
+    Modal.confirm({
+      title: "确定删除覆盖物吗?",
+      onOk: () => {
+        this._store.dispatch(EditorAction.deleteOverlays());
+      },
+    });
+  }
+
   private _bindOperations() {
     this.saveGeoJSON = this.saveGeoJSON.bind(this);
     this.createRectangle = this.createRectangle.bind(this);
     this.createPolygon = this.createPolygon.bind(this);
     this.createPolyline = this.createPolyline.bind(this);
     this.createCircle = this.createCircle.bind(this);
+    this.deleteOverlays = this.deleteOverlays.bind(this);
   }
 
   private _registerHotkeys() {
@@ -98,6 +113,8 @@ export class GlobelController implements IGlobalController {
       alt: true,
       ctrl: true,
     });
+    registerHotkey("Delete", { callback: this.deleteOverlays });
+
     registerHotkey("p", { callback: this.showCommand, alt: true });
     registerHotkey("1", {
       callback: this.createRectangle,

src/store/actions.ts

@@ -5,6 +5,7 @@ export enum ActionTypes {
   CreateOverlay = "createOverlay",
   FinishEditOverlay = "finishEditOverlay",
   SelectOverlay = "selectOverlay",
+  DeleteOverlays = "deleteOverlays",
 }
 
 export type CreatedOverlay = {
@@ -12,7 +13,7 @@ export type CreatedOverlay = {
   type: OverlayTypes;
 };
 
-type ActionCreator = (payload: any) => { type: ActionTypes; payload: any };
+type ActionCreator = (payload?: any) => { type: ActionTypes; payload: any };
 
 export const EditorAction: Record<ActionTypes, ActionCreator> = {
   createOverlay(type: OverlayTypes) {
@@ -33,4 +34,10 @@ export const EditorAction: Record<ActionTypes, ActionCreator> = {
       payload: id,
     };
   },
+  deleteOverlays() {
+    return {
+      type: ActionTypes.DeleteOverlays,
+      payload: null,
+    };
+  },
 };

src/store/reducers/index.ts

@@ -1,7 +1,12 @@
+import { IEditorState } from "../type";
 import { initState } from "../initState";
 import { ActionTypes } from "../actions";
-import { createOverlay, finishEditOverlay, selectOverlay } from "./map";
+import {
-import { IEditorState } from "@store";
+  createOverlay,
+  finishEditOverlay,
+  selectOverlay,
+  deleteOverlays,
+} from "./map";
 
 export type Action = {
   type: ActionTypes;
@@ -14,6 +19,7 @@ const actionReducers: Record<ActionTypes, ActionReducer> = {
   [ActionTypes.CreateOverlay]: createOverlay,
   [ActionTypes.FinishEditOverlay]: finishEditOverlay,
   [ActionTypes.SelectOverlay]: selectOverlay,
+  [ActionTypes.DeleteOverlays]: deleteOverlays,
   // addRect: undefined
 };
 

src/store/reducers/map/index.ts

@@ -11,6 +11,22 @@ export function createOverlay(state = initState, payload: any) {
   });
 }
 
+export function deleteOverlays(state = initState, payload: any) {
+  const { selectedIds } = state.map;
+  const [id] = selectedIds!;
+  const filterFunc = (overlay: IOverlay) => overlay.id !== id;
+  return produce(state, (draft) => {
+    // draft.map.status = Status.CreateOverlay;
+    draft.map.command = Command.DeleteOverlays;
+    draft.map.rectangles = draft.map.rectangles.filter(filterFunc);
+    draft.map.polygons = draft.map.polygons.filter(filterFunc);
+    draft.map.polylines = draft.map.polylines.filter(filterFunc);
+    draft.map.circles = draft.map.circles.filter(filterFunc);
+    draft.map.selectedIds = [];
+    // draft.map.overlayType = payload as OverlayTypes;
+  });
+}
+
 export function finishEditOverlay(state = initState, payload: any) {
   return produce(state, (draft) => {
     const overlay = payload as IOverlay;

src/store/utils/index.ts

@@ -0,0 +1 @@
+export * from "./getGeoJSON";

src/types/enum.ts

@@ -13,6 +13,7 @@ export enum OverlayTypes {
 export enum Command {
   CreateOverlay = "createOveraly",
   SelectOverlay = "selectOverlay",
+  DeleteOverlays = "deleteOverlays",
 }
 
 // 地图状态.

src/utils/hotkeys.ts

@@ -15,6 +15,7 @@ export const registerHotkey = (key: string, config: HotkeyConfig) => {
 window.onkeydown = function (e) {
   const { key } = e;
   const listeners = Hotkeys[key];
+  // console.log(key);
 
   if (listeners == null || listeners.length === 0) return;
   e.stopPropagation();

src/utils/index.ts

@@ -1,6 +1,7 @@
 import { OverlayTypes } from "@types";
 
 export * from "./hotkeys";
+export * from "./download";
 
 export function getOverlayPaths(target: AMap.MapOverlay, type: OverlayTypes) {
   if (type === OverlayTypes.Rectangle) {