# 热力图

#### 场景介绍

新增热力图层，用于展示数据的分布情况。通过热力图功能，将数据用不同颜色的区块在地图上展示，可以直观地描述在地图上某个区域内人群或车辆的密度和分布情况。热力图适用于大数据密度可视化场景，如人流分布，热点区域等。

6.0.0(20)开始，支持热力图功能。

#### 接口说明

热力图功能主要由HeatmapParams、addHeatmap和Heatmap提供，更多接口及使用方法请参见接口文档。

| 接口名 | 描述 |
| --- | --- |
| HeatmapParams | 热力图参数。 |
| addHeatmap(params: mapCommon.HeatmapParams): Promise<Heatmap> | 新增热力图。 |
| Heatmap | 热力图，支持修改和删除热力图，例如：支持设置颜色、设置透明度等。 |

#### 开发步骤

1.  导入相关模块。
    
    ```
    import { map, mapCommon, MapComponent } from '@kit.MapKit';
    import { AsyncCallback } from '@kit.BasicServicesKit';
    ```
    
2.  增加热力图。
    
    ```
    @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[] = [];
            // 生成500个随机坐标点，用于热力图数据
            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 {
              // 添加热力图
              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 is：${err.code}, message is ${err.message}`);
          }
        }
      }
      build() {
        Stack() {
          Column() {
            MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback })
              .width('100%')
              .height('100%');
          }.width('100%')
        }.height('100%')
      }
    }
    ```