Angular项目中使用高德API实现点聚合点标记

import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { MapService } from './map.service';
import { MapResData } from '../../domain/map-resData.domain';
declare var AMap: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css'],
})
export class MapComponent implements OnInit {
  constructor(
    private mapService: MapService,
    private message: NzMessageService
  ) {}

  // 返回数据
  resDataObj: MapResData = {
    ingNum: '',
    stopNum: '',
    highNum: '',
    workerNum: '',
    carNum: '',
    fields: [],
  };
  // 项目列表
  fieldsList = [];

  ngOnInit(): void {
    this.getStatistic();
  }

  // 请求数据
  getStatistic(): void {
    this.mapService.getStatistic({}, (body) => {
      if (body.data.msg !== 'success') {
        this.message.create('error', '获取数据失败！');
        return;
      }
      this.resDataObj = body.data.data;
      this.fieldsList = body.data.data.fields;
    });
  }

  // 转中文
  chinese(type: any) {
    switch (type) {
      case 'high':
        return '高';
      case 'mid':
        return '中';
      case 'low':
        return '低';
      case 'normal':
        return '可接受';
      case 'ready':
        return '未开工';
      case 'ing':
        return '开工';
      case 'pause':
        return '间断';
      case 'stop':
        return '停工';
      case 'done':
        return '完成';
    }
  }

  // 创建标记(点聚合)
  creatMarkers(fieldsList, map): void {
    // 点数组、点群组数组
    var cluster = [];
    var markers = [];
    // 循环创建点标记
    for (let i = 0; i < fieldsList.length; i++) {
      const item = fieldsList[i];
      let marker = new AMap.Marker({
        position: [item['longitude'], item['latitude']],
        content:
          '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;text-align: center;">1</div>',
        title: item.projectName,
        offset: new AMap.Pixel(-15, -15),
      });
      // 放进markers数组
      markers.push(marker);
      // 转中文
      let state = this.chinese(item.state);
      let riskLevel = this.chinese(item.riskLevel);
      // 给点标记绑定点击事件
      AMap.event.addListener(marker, 'click', function () {
        // 定义显示内容
        var info = [];
        info.push(
          "<span class='data-title' style='font-size: 14px;color: #198adb;'>项目名称：</span>" +
            item.projectName
        );
        info.push('<br/>');
        info.push(
          "<span class='data-title' style='font-size: 14px;color: #198adb;'>现场负责人：</span>" +
            item.siteManager
        );
        info.push('<br/>');
        info.push(
          "<span class='data-title' style='font-size: 14px;color: #198adb;'>施工状态：</span>" +
            state
        );
        info.push('<br/>');
        info.push(
          "<span class='data-title' style='font-size: 14px;color: #198adb;'>开始时间：</span>" +
            item.startDate
        );
        info.push('<br/>');
        info.push(
          "<span class='data-title' style='font-size: 14px;color: #198adb;'>结束时间：</span>" +
            item.endDate
        );
        info.push('<br/>');
        info.push(
          "<span class='data-title' style='font-size: 14px;color: #198adb;'>风险等级：</span>" +
            riskLevel
        );
        // 创建 infoWindow
        let infoWindow = new AMap.InfoWindow({
          content: info.join(''),
          offset: new AMap.Pixel(0, -35),
        });
        // 打开信息窗体
        infoWindow.open(map, marker.getPosition());
      });
    }
    // 显示点标记
    map.plugin(['AMap.MarkerClusterer'], function () {
      cluster = new AMap.MarkerClusterer(map, markers, { gridSize: 80 });
    });
  }

  ngAfterViewInit(): void {
    setTimeout(() => {
      // 创建地图
      var map: any = new AMap.Map('map', {
        resizeEnable: true,
        zoom: 11, // 级别
        center: [113.06, 23.02], // 中心点坐标
        viewMode: '3D', //使用3D视图
        layers: [
          // 使用多个图层    Satellite--卫星图   RoadNet---路况图
          // new AMap.TileLayer.Satellite(),
          new AMap.TileLayer.RoadNet(),
        ],
      });

      // 判断是否有项目
      if (this.fieldsList.length !== 0) {
        // 调用创建标记
        this.creatMarkers(this.fieldsList, map);
      }
    }, 100);
  }
}