salary-management-oneself/src/lib/amap/index.ts

const AMAP_KEY = "2cc032a62120824fd454d1f35789ef32"; //https://console.amap.com/dev/key/app获取高德地图开发key
const pluginsList = [
  "AMap.PolyEditor",
  "AMap.CustomLayer",
  "AMap.ControlBar",
  "AMap.Heatmap",
  "Map3D",
  "AMap.GLCustomLayer",
  "AMap.Buildings",
  "AMap.Size",
  "AMap.LngLat",
  "AMap.3DTilesLayer",
  "AMap.PolyEditor",
  "AMap.PolylineEditor"
];
export default class Amap {
  public id: string;
  public amapDom!: HTMLElement;
  public map!: any;
  public normalMarker!: any;

  constructor(id: string) {
    this.id = id;
    this.initAmap();
  }

  private initAmap() {
    this.initAmapFile();
  }

  private initAmapFile() {
    if ((window as any).AMap && (window as any).Loca) {
      this.initMap();
    } else {
      const url = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}`;
      const jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
      jsapi.onload = () => {
        this.initMap();
      };
      jsapi.onerror = function () {
        console.log(new Error("地图API文件加载失败"));
      };
    }
  }

  private initMap() {
    // 获取画布dom
    this.amapDom = document.getElementById(this.id) as HTMLElement;
    this.map = new AMap.Map(this.amapDom, {
      zoom: 18,
      center: [118.794694, 32.434165],
      resizeEnable: true,
      viewMode: "3D",
      defaultCursor: "default",
      pitch: 42.0,
      mapStyle: "amap://styles/light" || "amap://styles/grey",
      expandZoomRange: true,
      rotation: 4.9,
      skyColor: "#c8edff",
      showBuildingBlock: false, // 不显示默认建筑物
      features: ["bg", "road", "point"], // 不显示默认建筑物
      mask: null
    });
    // 添加卫星地图
    const satelliteLayer = new AMap.TileLayer.Satellite();
    this.map.add([satelliteLayer]);

    this.map.on("click", (e: any) => {
      const { lng, lat } = e.lnglat;
      console.log(e);
      const marker = new AMap.Marker({
        map: this.map,
        position: [lng, lat],
        label: {
          content: `[${lng},${lat}]`,
          direction: "top"
        }
      });
      if (this.normalMarker) this.map.remove(this.normalMarker);
    });
    // 图层设置
    this.normalMarker = new AMap.Marker({ offset: [70, -15], zooms: [1, 22] });
  }

  public destoryMap() {
    if (this.map) {
      this.map.clearMap();
      this.map.destroy();
    }
  }
}