百度地图JSAPI THREE 热力图开发教程

原创

用户11921230

发布于 2025-11-27 23:09:10

2730

文章被收录于专栏：JSAPI THREEJSAPI THREE

百度地图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();