fine-geojson-editor/src/map/index.ts

import Emitter from "@finevis/emitter";
import "@amap/amap-jsapi-types";

import { IMapState } from "@store";
import {
  BaseOverlayEditor,
  RectangleEditor,
  PolygonEditor,
  PolylineEditor,
  CircleEditor,
} from "./editors";

import { registerHotkey } from "../utils/hotkeys";
import { EventTypes } from "../types/enum";

let uuid = 0;
const getUuid = () => ++uuid;

type AMapOverlayEditor =
  | AMap.RectangleEditor
  | AMap.PolygonEditor
  | AMap.PolylineEditor
  | AMap.CircleEditor;

export class MapEditor extends Emitter {
  dom: HTMLDivElement;
  private _map: AMap.Map | undefined;
  private overlayEditors: BaseOverlayEditor<AMapOverlayEditor>[] = [];
  private overlayMap: Record<number, AMap.MapOverlay> = {};
  private _currentOverlayEditor:
    | BaseOverlayEditor<AMapOverlayEditor>
    | undefined;
  constructor(dom: HTMLDivElement) {
    super();
    this.dom = dom;
  }

  get map() {
    return this._map!;
  }

  async init() {
    await AMapLoader.load({
      key: "a4171ad2d7df42823b4de7d25c8c35ee",
      version: "2.0",
      plugins: [
        "AMap.RectangleEditor",
        "AMap.PolylineEditor",
        "AMap.PolygonEditor",
        "AMap.CircleEditor",
        "AMap.PlaceSearch",
        "AMap.AutoComplete",
      ],
    });
    this._map = new AMap.Map(this.dom);
    this.initEditors();
    // Space的key是空字符串, 这就离谱.
    registerHotkey(" ", { callback: this.finishCreateOverlay.bind(this) });
  }

  update(mapState: IMapState) {
    const { status, overlayType } = mapState;
    if (status === "createOverlay") {
      this._currentOverlayEditor = this.overlayEditors.find(
        (editor) => editor.getType() === overlayType
      );
      this._currentOverlayEditor?.create();
    }
  }

  finishCreateOverlay() {
    if (this._currentOverlayEditor == null) return;
    const target = this._currentOverlayEditor.finish();
    let evt: any = null;
    if (target != null) {
      const id = getUuid();
      this.overlayMap[id] = target;
      evt = {
        id,
        type: this._currentOverlayEditor.getType(),
      };
    }
    this.emit(EventTypes.FinishCreateOverlay, evt);
  }

  initEditors() {
    const { map } = this;
    this.overlayEditors = [
      new RectangleEditor(map),
      new PolygonEditor(map),
      new PolylineEditor(map),
      new CircleEditor(map),
    ];
  }
}