feat: 走通地图&redux更新逻辑

package.json

@@ -14,6 +14,7 @@
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
     "redux": "^4.1.2"
   },
   "devDependencies": {

src/editor/Plot/Tools/index.tsx

@@ -1,24 +1,38 @@
 import { Tooltip } from "antd";
+import { useDispatch } from "react-redux";
+import { editorAction } from "@store";
 
 type IconWithTipProps = {
   type: string;
   text: string;
+  onClick?: () => void;
   placement?: "top" | "right";
 };
 
-const IconWithTip = ({ type, text, placement = "top" }: IconWithTipProps) => {
+const IconWithTip = ({
+  type,
+  text,
+  onClick = () => {},
+  placement = "top",
+}: IconWithTipProps) => {
   return (
     <Tooltip title={text} placement={placement}>
-      <span className={`icon icon-${type}`}></span>
+      <span className={`icon icon-${type}`} onClick={onClick}></span>
     </Tooltip>
   );
 };
 
 const Tools = () => {
+  const dispatch = useDispatch();
+
+  const createOverlay = (type: string) => () =>
+    dispatch(editorAction.createOverlay(type));
+  const createRectangle = createOverlay("rect");
+
   return (
     <>
       <div className="marker-tools">
-        <IconWithTip type="rect" text="矩形工具" />
+        <IconWithTip type="rect" text="矩形工具" onClick={createRectangle} />
         <IconWithTip type="circle" text="圆形工具" />
       </div>
       <div className="common-tools">

src/editor/Plot/index.tsx

@@ -1,19 +1,34 @@
 import { Layout } from "antd";
-import { useEffect, useRef } from "react";
-import { MapStage } from "../../mapStage";
+import { useEffect, useRef, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { MapEditor } from "@map";
+import { editorAction, IEditorState } from "@store";
 import Tools from "./Tools";
 
 import "./index.less";
 
+const mapStateSelector = (state: IEditorState) => state.map;
+
 const { Header, Footer, Sider, Content } = Layout;
 
 const Plot = () => {
   const mapStageRef = useRef<HTMLDivElement>(null);
+  const mapState = useSelector(mapStateSelector);
+  const dispatch = useDispatch();
+
+  const [mapEditor, setMapEditor] = useState<MapEditor | null>(null);
 
+  // !mapEditor &&
   useEffect(() => {
-    const map = new MapStage(mapStageRef.current!);
-    map.init();
-  });
+    if (mapEditor == null) {
+      const editor = new MapEditor(mapStageRef.current!);
+      setMapEditor(editor);
+      editor.init().then(() => {
+        editor.update(mapState);
+      });
+    }
+  }, [mapEditor, mapState]);
+  mapEditor?.update(mapState);
 
   return (
     <>
@@ -26,4 +41,8 @@ const Plot = () => {
   );
 };
 
+// const mapStateToProps = (state: IEditorState) => {
+//   return state.map;
+// };
+
 export default Plot;

src/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
 
 import "antd/dist/antd.css";
 
@@ -8,8 +9,8 @@ import { Editor } from "./editor";
 import "./index.less";
 
 ReactDOM.render(
-  <StoreContext.Provider value={store}>
+  <Provider store={store}>
     <Editor />
-  </StoreContext.Provider>,
+  </Provider>,
   document.getElementById("app")
 );

src/map/editors/BaseLayerEditor.ts

@@ -0,0 +1,15 @@
+export abstract class BaseLayerEditor<T extends AMap.BaseEditor> {
+  map: AMap.Map;
+  editor: T;
+  constructor(map: AMap.Map) {
+    this.map = map;
+    this.editor = this.initEditor(map);
+  }
+
+  abstract initEditor(map: AMap.Map): T;
+
+  create() {
+    this.editor.setTarget(null);
+    this.editor.open();
+  }
+}

src/map/editors/RectangleEditor.ts

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

src/map/editors/index.ts

@@ -0,0 +1,2 @@
+export * from "./BaseLayerEditor";
+export * from "./RectangleEditor";

src/map/index.ts

@@ -1,15 +1,18 @@
 import "@amap/amap-jsapi-types";
-import "../types/index.d";
+import "../types";
+import { IMapState } from "@store";
+import { RectangleEditor } from "./editors";
 
-export class MapStage {
+export class MapEditor {
   dom: HTMLDivElement;
   private _map: AMap.Map | undefined;
+  private rectangleEditor: RectangleEditor | undefined;
   constructor(dom: HTMLDivElement) {
     this.dom = dom;
   }
 
   get map() {
-    return this._map;
+    return this._map!;
   }
 
   async init() {
@@ -25,5 +28,17 @@ export class MapStage {
       ],
     });
     this._map = new AMap.Map(this.dom);
+    this.initEditors();
+  }
+
+  update(state: IMapState) {
+    if (state.status === "createOverlay") {
+      this.rectangleEditor?.create();
+    }
+  }
+
+  initEditors() {
+    const { map } = this;
+    this.rectangleEditor = new RectangleEditor(map);
   }
 }

src/store/actions.ts

@@ -0,0 +1,18 @@
+export enum ActionTypes {
+  AddRect = "addRect",
+  CreateOverlay = "createOverlay",
+}
+
+export class EditorAction {
+  addRect() {
+    return {
+      type: ActionTypes.AddRect,
+    };
+  }
+  createOverlay(type: string) {
+    return {
+      type: ActionTypes.CreateOverlay,
+      payload: type,
+    };
+  }
+}

src/store/index.ts

@@ -2,6 +2,9 @@ import { createStore, Store } from "redux";
 import { createContext, Context, useContext } from "react";
 import { reducer, Action } from "./reducers";
 import { IEditorState } from "./type";
+import { EditorAction } from "./actions";
+
+export * from "./type";
 
 type IStore = Store<IEditorState, Action>;
 const store: IStore = createStore(reducer);
@@ -24,11 +27,13 @@ export { store };
 //   }
 // }
 
+export const editorAction = new EditorAction();
+
 export const StoreContext = createContext<IStore | null>(
   null
 ) as Context<IStore>;
 
-export const useStore = () => {
-  const store = useContext(StoreContext);
-  return store;
-};
+// export const useStore = () => {
+//   const store = useReduxContext(StoreContext);
+//   return store;
+// };

src/store/initState.ts

@@ -2,6 +2,8 @@ import { IEditorState } from "./type";
 
 export const initState: IEditorState = {
   map: {
+    status: "",
+    overlayType: "",
     polygons: [],
   },
 };

src/store/reducers.ts

@@ -1,11 +1,27 @@
 import { createStore } from "redux";
 import { initState } from "./initState";
+import { ActionTypes } from "./actions";
+import { IEditorState } from "./type";
 
 export type Action = {
-  type: string;
-  payload: any;
+  type: ActionTypes;
+  payload?: any;
 };
 
-export function reducer(state = initState, action: Action) {
-  return state;
+export function reducer(state = initState, action: Action): IEditorState {
+  const { type, payload } = action;
+  switch (type) {
+    case ActionTypes.CreateOverlay:
+      return {
+        ...state,
+        map: {
+          ...state.map,
+          status: "createOverlay",
+          overlayType: payload as string,
+        },
+        //
+      };
+    default:
+      return state;
+  }
 }

src/store/type.ts

@@ -4,6 +4,8 @@ export interface IPolygon {
 }
 
 export interface IMapState {
+  status: string;
+  overlayType: string;
   polygons: IPolygon[];
 }
 

src/types/index.d.ts

@@ -1,6 +0,0 @@
-declare global {
-  namespace AMapLoader {
-    const load: (config: any) => Promise<AMap.Map>;
-  }
-}
-export {};

src/types/index.ts

@@ -0,0 +1,22 @@
+declare global {
+  namespace AMapLoader {
+    const load: (config: any) => Promise<AMap.Map>;
+  }
+  namespace AMap {
+    interface IBaseEditor {
+      // new (map: AMap.Map): any;
+    }
+    class BaseEditor implements IBaseEditor {
+      constructor(map: AMap.Map);
+      setTarget(target: any): void;
+      open(): void;
+    }
+    class PolygonEditor extends BaseEditor {
+      //
+    }
+    class RectangleEditor extends BaseEditor {
+      //
+    }
+  }
+}
+export {};

tsconfig.json

@@ -14,7 +14,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@store": ["./src/store"],
+      "@editor": ["./src/editor"],
+      "@map": ["./src/map"],
+      "@types": ["./src/types"],
+    }
   },
   "include": ["./src"]
 }

vite.config.js

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 import path from "path";
 
 // https://vitejs.dev/config/
@@ -9,11 +9,12 @@ export default defineConfig({
     alias: {
       "@store": path.resolve(__dirname, "src/store"),
       "@editor": path.resolve(__dirname, "src/editor"),
+      "@map": path.resolve(__dirname, "src/map"),
       "@app": path.resolve(__dirname, "src/app"),
       "@types": path.resolve(__dirname, "src/types"),
     },
   },
   server: {
-    port: 8080
+    port: 8080,
   },
-})
+});