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

import "@amap/amap-jsapi-types";
import "../types";
import { IMapState } from "@store";
import { RectangleEditor } from "./editors";

export class MapEditor {
  dom: HTMLDivElement;
  private _map: AMap.Map | undefined;
  private rectangleEditor: RectangleEditor | undefined;
  constructor(dom: HTMLDivElement) {
    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();
  }

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

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