目录

Heatmap

Use Cases

A heatmap layer can be added to display data distribution. The heatmap function visualizes the density and distribution of people or vehicles in a region with different colors. Heatmaps are well suited for visualizing data density in large-scale scenarios, such as pedestrian flow distribution and hotspot areas.

Starting from 6.0.0(20), the heatmap function is supported.

API Description

The heatmap functions are mainly provided by HeatmapParams, addHeatmap, and Heatmap. For more information about the APIs, please refer to API Reference.

API Description
HeatmapParams Heatmap parameters.
addHeatmap(params: mapCommon.HeatmapParams): Promise<Heatmap> Adds a heatmap.
Heatmap Heatmap. You can modify and delete heatmaps, for example, setting the heatmap color and opacity.

Development Procedure

  1. Import required modules.

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

  2. Add a heatmap.

    @Entry
@Component
struct HeatMapDemo {
  private TAG = "OHMapSDK_HeatMapDemo";
  private mapOption?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;

  aboutToAppear(): void {
    this.mapOption = {
      position: {
        target: {
          latitude: 31.000000,
          longitude: 118.000000
        },
        zoom: 11
      }
    }
    this.callback = async (err, mapController) => {
      console.info(this.TAG, "mapCallback err=" + JSON.stringify(err) +
        "; mapController=" + JSON.stringify(mapController));
      if (!err) {
        this.mapController = mapController;
        let data: mapCommon.WeightedLatLng[] = [];
        // Generate 500 random coordinate points for the heatmap data.
        for (let i = 0; i < 500; i++) {
          data.push({
            point: {
              longitude: 118.000000 + Math.random() * 1 - 0.25,
              latitude: 31.000000 + Math.random() * 1 - 0.25
            },
            intensity: 1
          });
        }
        let heatMapOptions: mapCommon.HeatmapParams = {
          id: 'heatmap0001',
          data:data,
          radius:20,
          intensity: {
            2: 1,
            5: 5,
            8: 10
          }
        }
        try {
          // Add a heatmap.
          await this.mapController?.addHeatmap(heatMapOptions);
        } catch (e) {
          console.error(this.TAG, `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.mapOption, mapCallback: this.callback })
          .width('100%')
          .height('100%');
      }.width('100%')
    }.height('100%')
  }
}