---

1 -> 概述

1.1 -> 功能背景与版本支持

热力图是鸿蒙6.0（HarmonyOS 6.0.0(20)）Map Kit在地图能力方面新增的核心功能之一。6.0.0(20)作为HarmonyOS开发者的正式Release版本，随2025年9月25日官方发布一同上线，地图能力层面新增了矢量图层、流场图层、海量点图层和热力图层四项重要特性，同时支持通过自定义组件生成Marker图标。本文聚焦其中的热力图层功能展开详细解析。

1.2 -> 应用场景概述

从业务场景来看，热力图主要解决大规模数据在地图上的密度可视化问题。官方文档给出的典型用例包括：人流密度分布、车辆分布态势、事件热点区域等场景。这类场景的共同特点是数据量较大、分布具有区域聚集性，传统逐点标注的方式在大数据量下既难以承载全部数据又缺乏视觉焦点。热力图通过颜色渐变的方式，将原本离散的点数据转化为连续的区域密度表达，使分布规律一目了然。

1.3 -> 技术定位

与其他新增图层的定位差异在于：流场图层侧重方向流动的表达，海量点图层解决大批量Marker的渲染问题，矢量图层侧重几何要素的自定义绘制，而热力图层的核心价值在于将点数据的密度分布转化为可视化的颜色区域——不关注单个点的具体位置，而是以区域为单位呈现整体分布的疏密关系。这种定位决定了热力图的使用场景更多集中在宏观数据分析和趋势洞察层面，而非精准位置标注。

1.4 -> 本文结构

本文将围绕HeatmapParams参数结构逐一拆解，从id标识到data数据源再到radius半径和intensity权重映射，逐个说明每个参数的作用和配置要点，然后以完整的ArkTS代码示例展示从地图初始化到热力图添加的全流程实现路径。

2 -> 核心参数详解

添加热力图的核心接口是MapComponentController.addHeatmap()，方法接收一个HeatmapParams类型的参数对象。该参数对象的结构直接决定了热力图的最终渲染效果，需要重点理解以下几个字段：

2.1 -> id——热力图实例的唯一标识

id字段的作用是在后续需要对热力图进行更新或删除操作时，通过该标识定位到具体的图层实例，新增和删除的接口都依赖该id作为唯一凭证。id的取值没有格式限制，只要是唯一的字符串即可。

2.2 -> data——WeightedLatLng加权经纬度数组

data是热力图最核心的数据输入，类型为WeightedLatLng[]，即带有权重值的经纬度点数组。WeightedLatLng结构包含两个字段：point（经纬度坐标）和intensity（强度值，官方文档示例中intensity字段赋值为1）。intensity代表该点的权重——权重越高，该点对周围区域热力值的贡献越大，在最终渲染结果中表现为更偏向红暖色或更深的颜色。从官方代码示例来看，intensity的取值方式相当灵活：可以在传入data时直接为每个点赋予不同的intensity值，也可以统一赋值为1再通过intensity权重映射机制进行调整。

比较值得关注的是示例中生成500个随机坐标点的实现方式：使用Math.random()在南京周边经纬度范围内生成随机分布的点数据。这种随机数据生成方式在功能演示阶段很有用，但在真实业务场景中，data应当来自实际业务数据——例如从服务端获取的用户签到经纬度、车辆GPS轨迹点等。

2.3 -> radius——热力影响半径

radius用于控制单个数据点对周围区域的热力影响范围，单位是像素（px）。官方示例中radius取值为20。radius的大小直接影响热力图渲染的平滑程度：radius取值过小会导致每个点呈现为孤立的高亮斑点，热力图聚合效果不明显；radius取值过大则会使区域间的边界模糊化，可能掩盖局部的精细分布细节。实际开发中建议根据地图的缩放层级进行动态调整，或在业务层预留配置入口供用户调节。

2.4 -> intensity——强度权重映射表

intensity是HeatmapParams中最为精巧的一个设计。从数据结构来看，intensity的声明是{ 2: 1, 5: 5, 8: 10 }这种键值对形式的映射表。这种映射机制的原理是：热力图引擎在渲染时会综合计算每个数据点的权重贡献，映射表的键（左侧数值）代表某个强度区间或阈值，值（右侧数值）代表映射后的实际渲染权重。通过这种映射，开发者可以对热力图的颜色分布进行精细控制——例如让中高密度区域的梯度变化更加明显，或者抑制低密度区域的噪音点。

关于intensity映射表的设计建议：从示例数据来看，intensity映射表的键和值都建议使用整数类型以避免潜在的解析异常。此外，映射表应当覆盖预期的热度值范围，避免出现数据落在映射区间之外导致渲染不可预测的情况。

3 -> 实现流程与代码示例

以下以完整的ArkTS代码演示从地图初始化到热力图添加的全流程。

3.1 -> 第一步：导入所需模块

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

@kit.MapKit提供了地图相关的核心类：MapComponent是地图组件的UI入口，mapCommon包含热力图所需的数据类型定义（如WeightedLatLng和HeatmapParams），map模块则提供地图控制器等功能类。

3.2 -> 第二步：准备地图初始化参数

private mapOption?: mapCommon.MapOptions;

this.mapOption = {
    position: {
        target: {
            latitude: 31.000000,
            longitude: 118.000000
        },
        zoom: 11
    }
};

MapOptions中的position.target用于设置地图初始化时的中心点坐标，latitude和longitude分别对应纬度和经度。zoom参数控制地图的初始缩放级别，数值越大视图越精细。

3.3 -> 第三步：生成热力图数据并调用addHeatmap

this.callback = async (err, mapController) => {
    if (!err) {
        this.mapController = mapController;
        
        // 构建加权经纬度数组
        let data: mapCommon.WeightedLatLng[] = [];
        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}`);
        }
    }
};

这段代码的核心逻辑分为三层：数据准备层通过循环生成500个随机坐标点，每个点的强度初始设为1；参数配置层将数据、半径、强度映射封装为HeatmapParams对象；添加执行层通过mapController.addHeatmap异步方法将热力图添加到地图上。需要特别注意的是，所有调用mapController的操作都必须在mapCallback成功返回并获取到控制器实例之后执行，因为在地图初始化完成之前控制器是未就绪状态。

3.4 -> 第四步：在build方法中渲染MapComponent

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

MapComponent组件接收mapOptions和mapCallback两个入参。mapOptions用于地图初始化时的配置，mapCallback则是在地图加载完成后被调用的回调函数，调用时机恰好发生在热力图可以开始添加的时刻。

4 -> 热力图层的管理操作

除了新增热力图层外，Map Kit还提供了更新和删除热力图的接口能力，虽然是通用方法但需要正确使用方能生效：

• 更新热力图：updateHeatmap方法接收与原HeatmapParams相同结构的参数，通过id来匹配需要更新的热力图实例。当数据源发生变化时（如放缩时间范围、过滤低密度区域等），无需删除后再新增，直接调用更新接口即可完成数据刷新。
• 删除热力图：removeHeatmap方法接收需要删除的热力图id作为参数，用于从地图上移除指定的热力图层。

使用这两类方法时的注意事项与addHeatmap完全一致——必须确保mapCallback已经完成且mapController已经就位，否则调用会因控制器未初始化而失败。此外，更新和删除操作的参数id必须与新增时使用的id保持一致，这是图层管理的关联凭证。

5 -> 性能与使用建议

结合官方文档给出的示例和实际开发经验，使用热力图功能时有几点值得关注：

• 数据量控制：官方示例中生成的500个随机坐标点作为演示使用，这一体量的数据在大多数设备上性能表现良好。如果实际业务数据规模远超此量级（例如数千甚至上万个数据点），建议在客户端进行适当的降采样处理，或通过服务端聚合的方式降低数据密度——热力图本身追求的是区域密度分布的可视化而非每个数据点的精确展示，因此一定程度的采样损失是可以接受的。
• 半径参数的场景适配：radius的取值应结合地图的缩放级别进行合理配置。zoom值较大（地图放得较细）时，点的位置更为精确，可以使用相对较小的radius来体现局部细节；zoom值较小（地图缩得较广）时，区域聚合需求更强，适当增大radius有助于平滑呈现整体分布格局。
• intensity的设计逻辑：intensity映射表的设计不应随意取值，而是需要与实际业务数据的强度分布相匹配。例如，如果业务数据中多数点的强度值集中在1-5之间，那么映射表应重点覆盖这一区间；如果高强度点较为稀少，可以通过提高映射值的方式增强其在渲染中的视觉权重。
• 调试与错误处理：官方代码示例中使用了try-catch捕获addHeatmap可能抛出的异常，并在控制台输出了错误码和错误消息。实际开发时建议保持这一异常处理模式，因为地图功能严重依赖于网络状态和设备定位权限，不可控因素较多，稳健的错误处理机制能够有效提升用户体验。

6 -> 总结

HarmonyOS 6.0 Map Kit热力图层功能的加入，为鸿蒙开发者在地图数据可视化方向上提供了一个标准化的解决方案。从技术层面来看，HeatmapParams参数结构的设计兼顾了功能的灵活性和使用的简洁性——data字段负责数据输入，radius控制渲染粒度，intensity映射表提供视觉表达的调优空间。从实现路径来看，从模块导入到MapComponent渲染再到addHeatmap调用，整个开发流程与Map Kit现有的其他图层功能保持了一致的使用方式，学习曲线相对平滑。

对于有大数据密度可视化需求的场景——例如O2O业务中商户分布分析、城市交通项目中拥堵路段识别、线下活动运营中的参与热度追踪——热力图功能可以作为核心的可视化组件直接使用。相比开发者自己通过Canvas叠加图层或使用第三方可视化库，Map Kit提供的原生热力图方案在渲染性能上与地图引擎深度耦合，避免了坐标系转换和图层合成带来的额外开销，同时保持了与地图缩放、拖拽等手势交互的一致性体验。无论是业务驱动的应用开发，还是技术驱动的能力探索，热力图都是一个值得深入使用的功能组件。

---

感谢各位大佬支持！！！
互三啦！！！