绘制热力图最后更新时间: 2025年11月17日

绘制热力图

热力图功能提供将业务数据展示在地图上，可以给使用者直观描述一个区域的人员，车辆等事物的热度情况。

第一步，组织热力图数据

以下以本地模拟数据为例，简单说明 SDK 热力图需要的是经纬度点数组/列表数据。

示例代码如下：

// 第一步： 生成热力点坐标列表
let latlngs: LatLng[] = [];
let x = 39.904979;
let y = 116.40964;

for (let i = 0; i < 1; i++) {
  let x_ = 0;
  let y_ = 0;
  x_ = Math.random() * 0.5 - 0.25;
  y_ = Math.random() * 0.5 - 0.25;
  latlngs.push(new LatLng(x + x_, y + y_))
}

第二步，构建热力图 HeatmapTileProvider

HeatmapTileProvider 是生成热力图的核心类，一些基础用法可参考如下代码：

// 第二步： 构建热力图 TileProvider
let builder: HeatMapBuilder = new HeatMapBuilder();
builder.setData(latlngs);
// 设置热力图绘制的数据
builder.setGradient(HeatMapController.ALT_HEATMAP_GRADIENT); // 设置热力图渐变，有默认值 DEFAULT_GRADIENT，可不设置该接口
// Gradient 的设置可见参考手册
// 构造热力图对象
let heatmapTileProvider: HeatmapTileProvider | undefined = builder.build();

第三步，绘制热力图图层

通过 TileOverlay 绘制热力图，方法如下：

// 第三步： 构建热力图参数对象
let tileOverlayOptions: TileOverlayOptions = new TileOverlayOptions();
if (heatmapTileProvider) {
  tileOverlayOptions.tileProvider(heatmapTileProvider); // 设置瓦片图层的提供者
}
// 第四步： 添加热力图
this.tileOverlay = this.mAMap?.addTileOverlay(tileOverlayOptions);

效果图如下：

绘制蜂窝热力图

蜂窝热力图功能提供将业务数据展示在地图上，以蜂窝的形式给使用者直观展示热度情况。

第一步，组织蜂窝热力图数据

以下以本地模拟数据为例，简单说明 SDK 热力图需要的是经纬度点数组/列表数据。

示例代码如下：

// 第一步： 生成热力点坐标列表，数据格式（119.518251,35.683927,1159）
let heatMapStr = Utils.uint8ArrayToString(HoneycombHeatMapController.readFileContentsFromAssets(getContext(), "heatmap/heatmap_honey.data"));
let heatMapStrs = heatMapStr.split("\n");
let weightlatlngs = new ArrayList<WeightedLatLng>();
for (let str of heatMapStrs) {
  let dataItem = str.split(",");
  if (dataItem && dataItem.length == 3) {
    weightlatlngs.add(new WeightedLatLng(new LatLng(Number.parseFloat(dataItem[1]), Number.parseFloat(dataItem[0])), Number.parseFloat(dataItem[2])))
  }
}
let colors = [
  ColorUtil.colorStringToNumber("#ecda9a"),
  ColorUtil.colorStringToNumber("#efc47e"),
  ColorUtil.colorStringToNumber("#f3ad6a"),
  ColorUtil.colorStringToNumber("#f7945d"),
  ColorUtil.colorStringToNumber("#f97b57"),
  ColorUtil.colorStringToNumber("#f66356"),
  ColorUtil.colorStringToNumber("#ee4d5a")
];
let startPoints = new Array<number>(colors.length);
for(let i = 0;i < startPoints.length; i++) {
  startPoints[i] = i * 1.0 / startPoints.length
}

第二步，构建热力图 HeatMapLayerOptions

HeatMapLayerOptions 是生成热力图的核心类，一些基础用法可参考如下代码：

// 第二步： 构建蜂窝热力图 HeatMapLayerOptions
let heatMapLayerOptions = new HeatMapLayerOptions();

// 带权重的经纬度
heatMapLayerOptions.weightedData(weightlatlngs);

// 指定颜色和颜色变化索引
let gradient = new Gradient(colors, startPoints);
heatMapLayerOptions.gradient(gradient);
// heatMapLayerOptions.gradient(HeatMapLayerOptions.DEFAULT_GRADIENT);

// 大小和间隔
heatMapLayerOptions.size(6000);
heatMapLayerOptions.gap(300);

// 最大最小缩放级别
heatMapLayerOptions.setMinZoom(5);
heatMapLayerOptions.setMaxZoom(19);

// 整个覆盖物的透明度
heatMapLayerOptions.opacity(0.85);

// 热力图类型为蜂窝
heatMapLayerOptions.setType(HeatMapLayerOptions.TYPE_HEXAGON);

// 控制在底图文字的上面，默认底图文字级别是0
heatMapLayerOptions.setZIndex(1);

第三步，绘制蜂窝热力图图层

通过 HeatMapLayerOptions 绘制热力图，方法如下：

this.layer = this.mAMap?.addHeatMapLayer(heatMapLayerOptions);

第四步，注册地图点击事件，回调位置的热力情况

通过设置点击事件，获取经纬度信息，通过经纬度获取位置的热力情况，方法如下：

// 获取指定位置的热力情况
this.mAMap?.setOnMapClickListener((latLng: LatLng) => {
  if (this.layer && this.mAMap && latLng) {
    let item: HeatMapItem | undefined = this.layer.getHeatMapItem(latLng);
    if (item) {
      let stringBuffer = ""
      stringBuffer += "热力中心："
      stringBuffer += (item.getCenter() + "\n");
      stringBuffer += "热力值："
      stringBuffer +=  (item.getIntensity() + "\n");
      let indexes = "";
      for(let integer of item.getIndexes()) {
        indexes += integer + ",";
      }
      stringBuffer += ("热力索引：" + indexes + "\n");
      stringBuffer += ("数据数量：" + item.getIndexes().length);
      this.updateHeatItemTv(stringBuffer.toString());
    } else {
      this.updateHeatItemTv("未找到热力信息");
    }


  }
})