1) 准备 Map与Controller

通过MapComponent的onReady获取mapController

2) 构建聚合 UI

用ClusterText+TextStyle设置文字用ClusterIcon+ImageEntity设置图标用ClusterTemplate.setClusterUI组合 UI

3) 创建聚合组并加入地图

newClusterGroup(template, opt)，再mapController.addOverlay(group)

4) 批量创建Marker并加入聚合组

每个Marker指定position: LatLng与icon: ImageEntity

import {
  MapComponent, MapController, MapOptions, MapStatus, LatLng,
  ClusterGroup, ClusterTemplate, ClusterText, ClusterIcon,
  TextStyle, ImageEntity, Marker
} from '@bdmap/map_walkride_search';

let mapController: MapController | null = null;

const mapOptions: MapOptions = new MapOptions({
  mapStatus: new MapStatus({
    center: new LatLng(39.94923, 116.397428),
    zoom: 13,
    overlook: 30
  })
});

// onReady 拿到 controller
// mapController = ...

function addCluster(): void {
  // 1) 准备 UI 组件
  const clusterIconImg: ImageEntity = new ImageEntity('rawfile://icon_cat.png');
  const markerIcon: ImageEntity = new ImageEntity('rawfile://poicity.png');

  const clusterText: ClusterText = new ClusterText(0);
  const clusterTextStyle: TextStyle = new TextStyle();
  clusterTextStyle.setTextSize(5);
  clusterText.build('test', clusterTextStyle);

  const clusterIcon: ClusterIcon = new ClusterIcon(1);
  clusterIcon.build(clusterIconImg);

  const template: ClusterTemplate = new ClusterTemplate();
  template.setClusterUI([clusterText, clusterIcon]);

  // 2) 创建聚合组并添加到地图
  const group: ClusterGroup = new ClusterGroup(template, {
    zIndex: 1,
    alpha: 0,
    visible: true,
    isClickable: false,
    startLevel: 4,
    endLevel: 22
  });
  mapController?.addOverlay(group);

  // 3) 批量创建 Marker 并加入聚合
  const startLat: number = 39.865397;
  const startLng: number = 115.826785;
  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      const mark: Marker = new Marker({
        position: new LatLng(startLat + j * 0.05, startLng + i * 0.05),
        icon: markerIcon
      });
      group.addMarker(mark);
    }
  }
}