覆盖物选中可拖拽

src/editor/Catalog/index.tsx

@@ -1,7 +1,8 @@
 import { Collapse } from "antd";
 import { useSelector } from "react-redux";
 
-import { IOverlay, editorAction, mapOptionsSelector } from "@store";
+import { editorAction, selectedIdsSelector, mapOptionsSelector } from "@store";
+import { IOverlay } from "@map";
 
 import "./style.less";
 import classNames from "classnames";
@@ -15,7 +16,7 @@ export type OverlayListProps = {
 const OverlayList = (props: OverlayListProps) => {
   const { overlays } = props;
   const onClick = (id: string) => () => editorAction.selectOverlay(id);
-  const { selectedIds } = useSelector(mapOptionsSelector);
+  const selectedIds = useSelector(selectedIdsSelector);
 
   return (
     <>

src/map/MapEditor.ts

@@ -28,6 +28,8 @@ type OverlayTemp = {
   target: AMap.MapOverlay;
 };
 
+const getOverlayOptions = (type: OverlayTypes) =>
+  type === OverlayTypes.Polyline ? PolylineOptions : PolygonOptions;
 export class MapEditor extends Emitter implements IMapEditor {
   dom: HTMLDivElement;
   private _map: AMap.Map | undefined;
@@ -103,6 +105,9 @@ export class MapEditor extends Emitter implements IMapEditor {
         type,
         target,
       };
+      target.setOptions(
+        type === OverlayTypes.Polyline ? PolylineOptions : PolygonOptions
+      );
       this.map.add(target);
     };
 
@@ -148,6 +153,10 @@ export class MapEditor extends Emitter implements IMapEditor {
 
   selectOverlays(ids?: string[]) {
     if (!ids?.length) return;
+    this.selectedIds.forEach((id) => {
+      const { target, type } = this.overlayMap[id];
+      target.setOptions(getOverlayOptions(type));
+    });
     this.selectedIds = ids;
     ids.forEach((id) => {
       const { target } = this.overlayMap[id];

src/map/constants.ts

@@ -29,4 +29,6 @@ export const PolylineOptions: OverlayOptions = {
 
 export const SelectedOptions: OverlayOptions = {
   strokeColor: SelectedStroke,
+  draggable: true,
+  cursor: "pointer",
 };

src/store/actions/index.ts

@@ -89,7 +89,8 @@ export class EditorAction {
   }
 
   selectOverlay(id: string) {
-    //
+    this.mapEditor?.selectOverlays([id]);
+    this.dispatch(StoreAction.selectOverlay(id));
   }
 
   saveProject() {

src/store/initState.ts

@@ -3,6 +3,7 @@ import { IEditorState } from "./type";
 export const initState: IEditorState = {
   status: null,
   overlayType: null,
+  selectedIds: [],
   map: {
     polygons: [],
     polylines: [],

src/store/reducers/index.ts

@@ -2,13 +2,7 @@ import produce from "immer";
 import { IEditorState } from "../type";
 import { initState } from "../initState";
 import { ActionTypes } from "../actions";
-import {
-  createOverlay,
-  finishEditOverlay,
-  selectOverlay,
-  deleteOverlays,
-} from "./map";
-import { Command } from "@types";
+import { createOverlay, finishEditOverlay, deleteOverlays } from "./map";
 
 export type Action = {
   type: ActionTypes;
@@ -27,10 +21,13 @@ const actionReducers: Record<ActionTypes, ActionReducer> = {
 
 function replaceState(state = initState, payload: IEditorState) {
   return payload;
-  // return produce(payload, (draft) => {
-  //   // draft.map.command = Command.OpenProject;
-  //   retr
-  // });
+}
+
+export function selectOverlay(state = initState, payload: any) {
+  const id = payload as string;
+  return produce(state, (draft) => {
+    draft.selectedIds = [id];
+  });
 }
 
 export function reducer(state = initState, action: Action) {

src/store/reducers/map/index.ts

@@ -1,7 +1,8 @@
 import produce from "immer";
 import { initState } from "../../initState";
-import { IOverlay, OverlayNamePrefixs } from "@store";
+import { OverlayNamePrefixs } from "@store";
 import { OverlayTypes, Status } from "@types";
+import { IOverlay } from "@map";
 
 export function createOverlay(state = initState, payload: OverlayTypes) {
   return produce(state, (draft) => {
@@ -50,10 +51,3 @@ export function finishEditOverlay(state = initState, payload: any) {
     draft.status = null;
   });
 }
-
-export function selectOverlay(state = initState, payload: any) {
-  const id = payload as string;
-  return produce(state, (draft) => {
-    draft.map.selectedIds = [id];
-  });
-}

src/store/selectors.ts

@@ -3,3 +3,4 @@ import { IEditorState } from "@store";
 export const mapOptionsSelector = (state: IEditorState) => state.map;
 export const overlayTypeSelector = (state: IEditorState) => state.overlayType;
 export const statusSelector = (state: IEditorState) => state.status;
+export const selectedIdsSelector = (state: IEditorState) => state.selectedIds;

src/store/type.ts

@@ -1,30 +1,13 @@
 import { Store } from "redux";
 import { Action } from "./reducers";
-import { OverlayTypes, Status, Command } from "@types";
+import { OverlayTypes, Status } from "@types";
 import { IMapOptions } from "@map";
 
 export type IStore = Store<IEditorState, Action>;
-export interface IOverlay {
-  id: string;
-  name: string;
-  type: OverlayTypes;
-  lngLat?: GeoJSON.Position;
-  path?: GeoJSON.Position[];
-  radius?: number;
-}
-export interface IMapState {
-  status: Status | null;
-  command: Command | null;
-  overlayType: OverlayTypes | null;
-  polygons: IOverlay[];
-  polylines: IOverlay[];
-  circles: IOverlay[];
-  rectangles: IOverlay[];
-  selectedIds?: string[];
-}
 
 export interface IEditorState {
   map: IMapOptions;
   status: Status | null;
+  selectedIds: string[];
   overlayType: OverlayTypes | null;
 }