目录

ClusterOverlay

Use Cases

This section describes how to implement clustering based on map data.

You can zoom to adapt the clustering effect. The clustering icon can be tapped. This function supports the following capabilities:

Starting from 5.0.3(15), the function of listening for ClusterOverlay tap events is supported.

API Description

The ClusterOverlay function is mainly provided by ClusterOverlayParams, addClusterOverlay, and ClusterOverlay. For more information about the APIs, please refer to API Reference.

API Description
ClusterOverlayParams ClusterOverlay parameters.
addClusterOverlay(params: mapCommon.ClusterOverlayParams): Promise<ClusterOverlay> Clustering API, which supports the ClusterOverlay capability.
ClusterOverlay ClusterOverlay. This API supports updating and querying ClusterOverlay attributes.

Development Procedure

  1. Import required modules.

    import { map, mapCommon, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

  2. Add a ClusterOverlay.

    @Entry
@Component
struct ClusterOverlayDemo {
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;

  aboutToAppear(): void {
    this.mapOptions = {
      position: {
        target: {
          latitude: 31.98,
          longitude: 118.7
        },
        zoom: 7
      }
    }

    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        // Generate items to be clustered.
        let clusterItem1: mapCommon.ClusterItem = {
          position: {
            latitude: 31.98,
            longitude: 118.7
          }
        };
        let clusterItem2: mapCommon.ClusterItem = {
          position: {
            latitude: 32.99,
            longitude: 118.9
          }
        };
        let clusterItem3: mapCommon.ClusterItem = {
          position: {
            latitude: 31.5,
            longitude: 118.7
          }
        };
        let clusterItem4: mapCommon.ClusterItem = {
          position: {
            latitude: 30,
            longitude: 118.7
          }
        };
        let clusterItem5: mapCommon.ClusterItem = {
          position: {
            latitude: 29.98,
            longitude: 117.7
          }
        };
        let clusterItem6: mapCommon.ClusterItem = {
          position: {
            latitude: 31.98,
            longitude: 120.7
          }
        };
        let clusterItem7: mapCommon.ClusterItem = {
          position: {
            latitude: 25.98,
            longitude: 119.7
          }
        };
        let clusterItem8: mapCommon.ClusterItem = {
          position: {
            latitude: 30.98,
            longitude: 110.7
          }
        };
        let clusterItem9: mapCommon.ClusterItem = {
          position: {
            latitude: 30.98,
            longitude: 115.7
          }
        };
        let clusterItem10: mapCommon.ClusterItem = {
          position: {
            latitude: 28.98,
            longitude: 122.7
          }
        };
        let array: Array<mapCommon.ClusterItem> = [
          clusterItem1,
          clusterItem2,
          clusterItem3,
          clusterItem4,
          clusterItem5,
          clusterItem6,
          clusterItem7,
          clusterItem8,
          clusterItem9,
          clusterItem10
        ]
        // To demonstrate the effect of clustering a large number of points, add 100 clusterItem1s and 10 clusterItem2s.
        for(let index = 0; index < 100; index++){
          array.push(clusterItem1)
        }
        for(let index = 0; index < 10; index++){
          array.push(clusterItem2)
        }
        // Generate the input parameters of the ClusterOverlay. Set the cluster distance to 100 vp.
        let clusterOverlayParams: mapCommon.ClusterOverlayParams = {
          distance: 100,
          clusterItems: array
        };
        try {
          // Call addClusterOverlay to generate a ClusterOverlay.
          let clusterOverlay = await this.mapController.addClusterOverlay(clusterOverlayParams);
        } catch (e) {
          console.error(`code:${e.code}, message:${e.message}`);
        }
      } else {
        console.error(`Failed to initialize the map. Code: ${err.code}; message: ${err.message}`);
      }
    }
  }

  build() {
    Stack() {
      Column() {
        MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
          .width('100%')
          .height('100%');
      }.width('100%')
    }.height('100%')
  }
}

  3. Listen for ClusterOverlay tap events.

    let callback1 = (markerClusterInfo: map.MarkerClusterInfo) => {
  console.info("markerClusterClick", `callback1 markerClusterInfo`);
};
// Add a listener.
clusterOverlay.on("markerClusterClick", callback1);
// Cancel the listener.
clusterOverlay.off("markerClusterClick", callback1);