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

import Emitter from "@finevis/emitter";
import "../types";
import { IMapState } from "@store";
import { RectangleEditor } from "./editors";

import "@amap/amap-jsapi-types";
import { registerHotkey } from "../utils/hotkeys";
import { EventTypes } from "../types/enum";

export class MapEditor extends Emitter {
  dom: HTMLDivElement;
  private _map: AMap.Map | undefined;
  private rectangleEditor: RectangleEditor | 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.PlaceSearch",
        "AMap.AutoComplete",
      ],
    });
    this._map = new AMap.Map(this.dom);
    this.initEditors();
    // Space的key是空字符串, 这就离谱.
    registerHotkey(" ", { callback: this.finishCreateOverlay.bind(this) });
  }

  update(state: IMapState) {
    if (state.status === "createOverlay") {
      this.rectangleEditor?.create();
    }
  }

  finishCreateOverlay() {
    this.rectangleEditor?.finish();
    this.emit(EventTypes.FinishCreateOverlay);
  }

  initEditors() {
    const { map } = this;
    this.rectangleEditor = new RectangleEditor(map);
  }
}