保存地图中心点&缩放层级

src/editor/Plot/Tools/index.tsx

@@ -38,11 +38,12 @@ const IconWithTip = ({
 
 type OverlayToolProps = {
   type: OverlayTypes;
+  hotkey: string;
 };
 
 const OverlayTool = (props: OverlayToolProps) => {
-  const { type } = props;
+  const { type, hotkey } = props;
-  const text = OverlayNamePrefixs[type];
+  const text = `创建${OverlayNamePrefixs[type]}(${hotkey})`;
 
   const overlayType = useSelector(overlayTypeSelector);
   const status = useSelector(statusSelector);
@@ -57,18 +58,18 @@ const Tools = () => {
   return (
     <>
       <div className="marker-tools">
-        <OverlayTool type={OverlayTypes.Rectangle} />
+        <OverlayTool type={OverlayTypes.Rectangle} hotkey="Alt+1" />
-        <OverlayTool type={OverlayTypes.Polygon} />
+        <OverlayTool type={OverlayTypes.Polygon} hotkey="Alt+2" />
-        <OverlayTool type={OverlayTypes.Polyline} />
+        <OverlayTool type={OverlayTypes.Polyline} hotkey="Alt+3" />
-        <OverlayTool type={OverlayTypes.Circle} />
+        <OverlayTool type={OverlayTypes.Circle} hotkey="Alt+4" />
       </div>
       <div className="common-tools">
         <div className="tools-group">
           <IconWithTip type="search" text="搜索定位" placement="right" />
         </div>
-        <div className="tools-group">
+        {/* <div className="tools-group">
           <IconWithTip type="select" text="选择" placement="right" />
-        </div>
+        </div> */}
       </div>
     </>
   );

src/map/MapEditor.ts

@@ -16,6 +16,7 @@ import { IMapOptions, IMapEditor } from "./type";
 import { PolygonOptions, PolylineOptions, SelectedOptions } from "./constants";
 
 import { EventTypes, OverlayTypes } from "../types/enum";
+import { Position } from "geojson";
 
 type AMapOverlayEditor =
   | AMap.RectangleEditor
@@ -82,6 +83,15 @@ export class MapEditor extends Emitter implements IMapEditor {
     ];
   }
 
+  getCenter() {
+    const { lng, lat } = this.map.getCenter();
+    return [lng, lat];
+  }
+
+  getZoom() {
+    return this.map.getZoom();
+  }
+
   getEditorByType(overlayType: OverlayTypes) {
     return this.overlayEditors.find(
       (editor) => editor.getType() === overlayType
@@ -96,6 +106,14 @@ export class MapEditor extends Emitter implements IMapEditor {
     const polylineEditor = this.getEditorByType(OverlayTypes.Polyline);
     const circleEditor = this.getEditorByType(OverlayTypes.Circle);
 
+    if (options.center) {
+      const [lng, lat] = options.center;
+      this.map.setCenter(new AMap.LngLat(lng, lat));
+    }
+    if (options.zoom != null) {
+      this.map.setZoom(options.zoom);
+    }
+
     const addOverlay = (
       id: string,
       target: AMap.MapOverlay,

src/map/type.ts

@@ -9,6 +9,8 @@ export interface IMapEditor {
   selectOverlays(ids?: string[]): void;
   deleteOverlays(): void;
   clearOverlays(): void;
+  getCenter(): GeoJSON.Position;
+  getZoom(): number;
 }
 
 export interface IOverlay {
@@ -25,4 +27,6 @@ export interface IMapOptions {
   circles: IOverlay[];
   rectangles: IOverlay[];
   selectedIds?: string[];
+  center?: GeoJSON.Position;
+  zoom?: number;
 }

src/store/actions/index.ts

@@ -49,8 +49,10 @@ export class EditorAction {
     }
 
     setInterval(() => {
-      sessionStorage.setItem("fine-geojson", JSON.stringify(this.mapOptions));
+      const { mapOptions } = this;
-      console.log("updated!");
+      mapOptions.center = this.mapEditor?.getCenter();
+      mapOptions.zoom = this.mapEditor?.getZoom();
+      sessionStorage.setItem("fine-geojson", JSON.stringify(mapOptions));
     }, 10000);
   }
   // ---------- public methods -------------