热力图

场景介绍

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

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%')
     }
   }