支持设置覆盖物属性

src/editor/Property/index.less

@@ -0,0 +1,3 @@
+.property-area{
+  padding: 8px;
+}

src/editor/Property/index.tsx

@@ -1,10 +1,75 @@
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
-import { selectedIdsSelector, mapOptionsSelector } from "@store";
+import { Form, Input, Select } from "antd";
+import { selectedIdsSelector, mapOptionsSelector, StoreAction } from "@store";
+import { OverlayCategory, IOverlay } from "@map";
+
+import "./index.less";
+import { OverlayTypes } from "@types";
+
+type CategoryItem = {
+  title: string;
+  value: OverlayCategory;
+};
+
+const { Option } = Select;
 
 const Property = () => {
   const selectedIds = useSelector(selectedIdsSelector);
-  // const {  } = useSelector(mapOptionsSelector);
+  const { overlays } = useSelector(mapOptionsSelector);
-  return <h1>属性区域</h1>;
+  const dispatch = useDispatch();
+  if (!selectedIds?.length) return <></>;
+  const [id] = selectedIds;
+  const overlay = overlays.find((overlay) => overlay.id === id)!;
+
+  const updateOverlayProps = (props: Partial<IOverlay>) => {
+    dispatch(StoreAction.updateOverlayProps(props));
+  };
+
+  const categorys: CategoryItem[] = [];
+  if (overlay.type === OverlayTypes.Polyline) {
+    categorys.push({ title: "道路", value: OverlayCategory.Road });
+  } else {
+    categorys.push(
+      { title: "建筑", value: OverlayCategory.Building },
+      { title: "河流", value: OverlayCategory.Water },
+      { title: "草地", value: OverlayCategory.Grass }
+    );
+  }
+
+  return (
+    <div className="property-area">
+      <Form size="small">
+        <Form.Item label="名称">
+          <Input
+            value={overlay.name}
+            onChange={(e) =>
+              updateOverlayProps({
+                id: overlay.id,
+                name: e.target.value,
+              })
+            }
+          />
+        </Form.Item>
+        <Form.Item label="类型">
+          <Select
+            value={overlay.category}
+            onChange={(category) =>
+              updateOverlayProps({
+                id: overlay.id,
+                category,
+              })
+            }
+          >
+            {categorys.map((item) => (
+              <Option key={item.title} value={item.value}>
+                {item.title}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+      </Form>
+    </div>
+  );
 };
 
 export default Property;

src/map/type.ts

@@ -13,6 +13,13 @@ export interface IMapEditor {
   getZoom(): number;
 }
 
+export enum OverlayCategory {
+  Building = "building",
+  Water = "water",
+  Road = "road",
+  Grass = "grass",
+}
+
 export interface IOverlay {
   id: string;
   name: string;
@@ -21,8 +28,8 @@ export interface IOverlay {
   path?: GeoJSON.Position[];
   radius?: number;
   backgroundImage?: string;
-  category?: string;
+  category?: OverlayCategory;
-  height?: string;
+  height?: number;
 }
 export interface IMapOptions {
   overlays: IOverlay[];

src/store/actions/StoreAction.ts

@@ -8,6 +8,7 @@ export enum ActionTypes {
   DeleteOverlays = "deleteOverlays",
   ReplaceState = "replaceState",
   ClearOverlays = "clearOverlays",
+  UpdateOverlayProps = "updateOverlayProps",
 }
 
 type ActionCreator = (payload?: any) => {
@@ -51,4 +52,10 @@ export const StoreAction: Record<ActionTypes, ActionCreator> = {
       type: ActionTypes.ClearOverlays,
     };
   },
+  updateOverlayProps(payload: Partial<IOverlay>) {
+    return {
+      type: ActionTypes.UpdateOverlayProps,
+      payload,
+    };
+  },
 };

src/store/actions/index.ts

@@ -10,7 +10,7 @@ import { StoreAction } from "./StoreAction";
 import { IStore } from "../type";
 import { initState } from "../initState";
 
-export { ActionTypes } from "./StoreAction";
+export { ActionTypes, StoreAction } from "./StoreAction";
 
 export class EditorAction {
   mapEditor: IMapEditor | null = null;
@@ -58,6 +58,7 @@ export class EditorAction {
           zoom: this.mapEditor?.getZoom(),
         })
       );
+      console.log("saved!");
     }, 10000);
   }
   // ---------- public methods -------------

src/store/index.ts

@@ -10,6 +10,8 @@ export * from "./type";
 export * from "./selectors";
 export * from "./constants";
 
+export { StoreAction } from "./actions";
+
 // export { EditorAction };
 
 declare global {

src/store/reducers/index.ts

@@ -9,6 +9,8 @@ import {
   clearOverlays,
 } from "./map";
 
+import { IOverlay } from "@map";
+
 export type Action = {
   type: ActionTypes;
   payload?: any;
@@ -23,8 +25,17 @@ const actionReducers: Record<ActionTypes, ActionReducer> = {
   [ActionTypes.DeleteOverlays]: deleteOverlays,
   [ActionTypes.ReplaceState]: replaceState,
   [ActionTypes.ClearOverlays]: clearOverlays,
+  [ActionTypes.UpdateOverlayProps]: updateOverlayProps,
 };
 
+function updateOverlayProps(state = initState, payload: Partial<IOverlay>) {
+  return produce(state, (draft) => {
+    const { id, ...rest } = payload;
+    const overlay = draft.map.overlays.find((overlay) => overlay.id === id);
+    Object.assign(overlay, rest);
+  });
+}
+
 function replaceState(state = initState, payload: IEditorState) {
   return payload;
 }