百度地图JSAPI THREE 热力图开发教程：从 2D 到 3D 的完整实践
热力图是一种常见的数据可视化方式，通过颜色深浅来展示数据的密度分布。在 MapVThree 中，提供了两种热力图组件：Heatmap（2D 热力图）和 Heatmap3D（3D 热力图）。
一、环境准备
在使用热力图之前，需要先创建一个 MapVThree 引擎实例。这是所有地图可视化功能的基础容器。
import * as mapvthree from '@baidu/mapv-three';
// 创建引擎实例
const engine = new mapvthree.Engine(document.getElementById('map_container'), {
rendering: {
enableAnimationLoop: false, // 禁用自动渲染循环，手动控制渲染
},
});
// 设置地图中心点和缩放级别
const center = [116.414, 39.915];
engine.map.setCenter(center);
engine.map.setZoom(16);
在这一点上，我们通过 Engine 构造函数创建了地图引擎，并配置了基本的渲染选项。enableAnimationLoop: false 表示禁用自动渲染循环，这样可以更精确地控制渲染时机，提升性能。
二、2D 热力图（Heatmap）基础使用
2.1 创建热力图实例
2D 热力图是最常用的热力图类型，适合展示平面上的数据密度分布。
const heatmap = engine.add(new mapvthree.Heatmap({
radius: 30, // 热力点的影响半径
keepSize: true, // 保持热力点大小不随地图缩放变化
maxValue: 10, // 热力值的最大值
attenuateMValueFactor: 0.9, // 衰减因子，控制热力值的衰减速度
}));
这里的关键参数包括：
- radius：控制每个数据点的影响范围，数值越大，热力影响范围越广
- keepSize：设置为
true时，热力点的大小不会随地图缩放级别变化 - maxValue：定义热力值的上限，用于归一化数据
- attenuateMValueFactor：衰减因子，影响热力值从中心向外的衰减速度
2.2 设置数据源
热力图需要数据源来提供位置信息和数值。MapVThree 支持通过 GeoJSONDataSource 来加载数据。
// 从 GeoJSON 数据创建数据源
const geoJsonData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [116.414, 39.915]
},
properties: {
count: 5
}
},
// ... 更多数据点
]
};
const dataSource = mapvthree.GeoJSONDataSource.fromGeoJSON(geoJsonData);
// 定义数据属性
dataSource.defineAttribute('count');
// 将数据源绑定到热力图
heatmap.dataSource = dataSource;
为了实现这个目标，我们首先创建了 GeoJSON 格式的数据，然后通过 GeoJSONDataSource.fromGeoJSON() 方法转换为数据源。defineAttribute('count') 定义了数据中的 count 属性，这个属性将作为热力值的依据。
通过 addPrepareRenderListener 可以监听渲染前的回调，在这里可以根据当前地图状态调整热力图参数。注释中的代码展示了如何根据缩放级别动态调整半径。
2.3 自定义渐变色
热力图支持自定义渐变色方案，可以更好地匹配你的设计需求。
// 设置自定义渐变色
heatmap.gradient = {
0: 'blue', // 最小值对应的颜色
0.5: 'cyan', // 中间值对应的颜色
1: 'red' // 最大值对应的颜色
};
渐变色的键值对表示从 0 到 1 的归一化值，对应的颜色值可以是 CSS 颜色字符串或十六进制颜色码。
三、3D 热力图（Heatmap3D）进阶应用
3D 热力图在 2D 热力图的基础上增加了高度维度，可以更直观地展示数据强度。
3.1 创建 3D 热力图
const heatmap3D = engine.add(new mapvthree.Heatmap3D({
radius: 100, // 热力点的影响半径
maxValue: 2, // 热力值的最大值
heightRatio: 1200, // 高度比例，控制 3D 柱状图的高度
}));
3D 热力图的参数与 2D 版本类似，但增加了 heightRatio 参数：
- heightRatio：控制 3D 柱状图的高度比例，数值越大，高度差异越明显
3.2 数据源设置
3D 热力图的数据源设置方式与 2D 版本完全相同。
const dataSource = mapvthree.GeoJSONDataSource.fromGeoJSON(geoJsonData);
heatmap3D.dataSource = dataSource;
四、性能优化建议
在实际项目中，热力图可能包含大量数据点，因此性能优化至关重要。
4.1 控制渲染时机
对于不需要实时更新的场景，可以禁用自动渲染循环，手动控制渲染时机。
const engine = new mapvthree.Engine(container, {
rendering: {
enableAnimationLoop: false,
},
});
// 在数据更新后手动触发渲染
const requestRender = () => engine.requestRender();
五、常见应用场景
5.1 人口密度分布
使用热力图展示城市人口密度分布，帮助城市规划者了解人口聚集区域。
5.2 交通流量分析
通过热力图展示道路上的交通流量，颜色越深表示流量越大。
5.3 用户行为分析
在电商或社交应用中，使用热力图展示用户点击、浏览等行为的分布情况。
5.4 环境监测
展示温度、湿度、空气质量等环境监测数据，通过颜色变化直观反映环境状况。
六、总结
MapVThree 提供了强大而灵活的热力图功能，无论是 2D 还是 3D 版本，都能满足不同场景下的数据可视化需求。通过合理配置参数、优化数据源和性能，可以创建出既美观又高效的热力图可视化效果。
在实际开发中，建议：
- 根据数据特点选择合适的热力图类型（2D 或 3D）
- 通过调整
radius、maxValue等参数优化视觉效果 - 注意性能优化，特别是处理大量数据时
- 利用自定义渐变色匹配项目设计风格
希望本文能帮助你快速上手 MapVThree 的热力图功能，在实际项目中发挥数据可视化的价值。
