存储path

src/editor/Catalog/index.tsx

@@ -29,13 +29,11 @@ const OverlayList = (props: OverlayListProps) => {
 };
 
 const Catalog = () => {
-  // const callback = (key: string | string[]) => console.log(key);
   const { rectangles, polygons, polylines, circles } =
     useSelector(mapStateSelector);
   return (
     <Collapse
-      defaultActiveKey={["1"]}
-      // onChange={callback}
+      defaultActiveKey={["1", "2", "3", "4"]}
       expandIconPosition="right"
     >
       <Panel header="矩形" key={1}>

src/index.tsx

@@ -4,8 +4,9 @@ import { Provider } from "react-redux";
 
 import "antd/dist/antd.css";
 
-import { store, StoreContext } from "./store";
+import { store } from "./store";
 import { Editor } from "./editor";
+
 import "./index.less";
 
 ReactDOM.render(

src/map/index.ts

@@ -12,6 +12,7 @@ import {
 
 import { registerHotkey } from "../utils/hotkeys";
 import { EventTypes } from "../types/enum";
+import { getOverlayPaths } from "@utils";
 
 let uuid = 0;
 const getUuid = () => ++uuid;
@@ -72,14 +73,15 @@ export class MapEditor extends Emitter {
   finishCreateOverlay() {
     if (this._currentOverlayEditor == null) return;
     const target = this._currentOverlayEditor.finish();
-    console.log(target);
     let evt: any = null;
     if (target != null) {
       const id = getUuid();
+      const type = this._currentOverlayEditor.getType();
       this.overlayMap[id] = target;
       evt = {
         id,
-        type: this._currentOverlayEditor.getType(),
+        type,
+        path: getOverlayPaths(target, type),
       };
     }
     evt && this.emit(EventTypes.FinishCreateOverlay, evt);

src/store/reducers/map/index.ts

@@ -26,6 +26,5 @@ export function finishCreateOverlay(state = initState, payload: any) {
       ? draft.map.polygons
       : draft.map.polylines
     ).push(overlay);
-    // draft.map.rectangles = state.map.rectangles.concat([overlay]);
   });
 }

src/store/type.ts

@@ -4,6 +4,8 @@ export interface IOverlay {
   id: string;
   name: string;
   type: OverlayTypes;
+  lngLat?: number[];
+  paths?: number[][];
 }
 
 export interface IMapState {

src/utils/index.ts

@@ -1 +1,30 @@
+import { OverlayTypes } from "@types";
+
 export * from "./hotkeys";
+
+export function getOverlayPaths(target: AMap.MapOverlay, type: OverlayTypes) {
+  if (type === OverlayTypes.Rectangle) {
+    const overlay = target as AMap.Rectangle;
+    const bounds = overlay.getBounds();
+    const [west, south, east, north] = getBBox(bounds!);
+    return [
+      [west, south],
+      [west, north],
+      [east, north],
+      [east, south],
+    ];
+  }
+
+  const overlay = target as AMap.Polygon | AMap.Polyline;
+  return overlay.getPath()?.map((path) => {
+    const lngLat = path as AMap.LngLat;
+    return [lngLat.lng, lngLat.lat] || [];
+  });
+}
+
+function getBBox(bounds: AMap.Bounds) {
+  const { northEast, southWest } = bounds;
+  let { lng: east, lat: north } = northEast;
+  let { lng: west, lat: south } = southWest;
+  return [west, south, east, north];
+}