ECharts 百度地图热力图如何配置？

Question

在使用 ECharts 集成百度地图热力图时，常见的一个技术问题是：如何正确配置 `bmap` 组件与热力图层的叠加？开发者常遇到地图不显示、热力数据不渲染或坐标转换错误等问题。需要确保引入了正确的百度地图 JavaScript API，并在 ECharts 实例中正确配置 `bmap` 对象，包括设置 `center`、`zoom` 和 `mapStyle` 等参数。同时，热力图需使用 `series` 中的 `heatmap` 类型，并保证数据项为经纬度坐标格式 `[lng, lat, value]`。此外，还需注意开启 `bmap` 的 `enableScrollWheelZoom` 等交互功能以提升用户体验。

Answer 1

一、ECharts 集成百度地图热力图的基本原理

ECharts 是一个基于 JavaScript 的数据可视化库，支持丰富的图表类型和地理空间可视化。通过集成百度地图（Baidu Map）插件 `bmap` 组件，可以实现地理位置数据的叠加显示。热力图是其中一种重要的可视化形式，适用于展示数据在空间上的密度分布。

1.1 引入必要的资源

使用 ECharts + 百度地图热力图的前提是引入以下两个关键资源：

• ECharts 核心库：<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
• 百度地图扩展插件：<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

二、配置 `bmap` 组件：核心参数解析

`bmap` 是 ECharts 提供的一个组件，用于将百度地图嵌入到图表中。其配置直接影响地图的显示与交互行为。

2.1 基础配置项说明

参数名	作用	示例值
center	地图中心点坐标 [lng, lat]	[116.404, 39.915]
zoom	地图缩放级别	11
enableScrollWheelZoom	是否启用鼠标滚轮缩放	true
mapStyle	自定义地图样式	{ style : 'midnight' }

2.2 完整的 bmap 配置示例代码

option = {
    bmap: {
        center: [116.404, 39.915],
        zoom: 11,
        enableScrollWheelZoom: true,
        mapStyle: {
            styleJson: [
                {
                    featureType: 'all',
                    elementType: 'geometry',
                    stylers: { color: '#000000' }
                },
                {
                    featureType: 'road',
                    elementType: 'labels',
                    stylers: { visibility: 'off' }
                }
            ]
        }
    },
    series: []
};
    

三、热力图层的添加与数据格式要求

热力图通常使用 `series` 中的 `heatmap` 类型，并需确保数据格式为 `[lng, lat, value]`，即经度、纬度和数值三元组。

3.1 热力图数据格式示例

var data = [
    [116.418261, 39.920974, 10], // [lng, lat, value]
    [116.404, 39.915, 20],
    [116.412, 39.912, 15]
];
    

3.2 添加 heatmap 到 series 示例

option.series = [{
    type: 'heatmap',
    coordinateSystem: 'bmap',
    data: data,
    pointSize: 15,
    blurSize: 10
}];
    

四、常见问题分析与解决策略

开发者在使用过程中常遇到的问题包括地图不显示、热力图未渲染、坐标转换错误等。以下是常见问题及其排查思路：

4.1 地图未显示

• 检查是否正确引入了百度地图 API。
• 确认 HTML 容器设置了明确的高度（如 style="height: 500px"）。
• 查看浏览器控制台是否有报错信息。

4.2 热力图未渲染

• 确认 `coordinateSystem: 'bmap'` 设置正确。
• 检查数据是否包含正确的经纬度坐标。
• 尝试调整 `pointSize` 和 `blurSize` 参数以提高可见性。

4.3 坐标转换错误

百度地图默认使用 GCJ-02 坐标系，而某些数据源可能使用 WGS84 或其他坐标系统。需要进行坐标转换处理：

// 使用百度地图 SDK 转换坐标
var convertor = new BMap.Convertor();
convertor.translate(latLngArray, 1, 5, function(result) {
    if (result.status === 0) {
        console.log('转换成功', result.points);
    }
});
    

五、提升用户体验：交互功能优化

为了增强用户交互体验，建议开启如下功能：

• 滚动缩放：enableScrollWheelZoom: true
• 双击缩放：enableDoubleClickZoom: true
• 拖动地图：enableDragging: true

5.1 启用交互功能的配置片段

bmap: {
    center: [116.404, 39.915],
    zoom: 11,
    enableScrollWheelZoom: true,
    enableDoubleClickZoom: true,
    enableDragging: true
}
    

六、流程图：热力图叠加过程逻辑梳理

graph TD
    A[准备数据] --> B{检查坐标系}
    B -->|GCJ-02| C[直接使用]
    B -->|WGS84| D[调用百度API转换]
    D --> C
    C --> E[初始化 ECharts 实例]
    E --> F[配置 bmap 参数]
    F --> G[添加 heatmap 系列]
    G --> H[渲染图表]
    H --> I{是否正常显示？}
    I -->|否| J[排查控制台错误]
    I -->|是| K[完成]
    J --> L[调试坐标或 API 引入]
    L --> M[重新加载图表]