示例中心
功能在线体验
menu Created with Sketch. closed Created with Sketch.

高德 开发 数据可视化 JS API 教程 可视化实战 热力图

更新时间:2018年11月08日


在地理数据可视化中我们经常会用到「热力地图」进行数据展示。那么本篇就为大家介绍一下 Loca 所支持的热力图类型,以及如何在 Loca 中使用热力图。


热力分类

在地图中,热力图是一种将离散的地理位置数据聚合后,展现数据强弱大小分布趋势的可视化类型。

目前在 Loca 中我们支持3大类型热力图:

  1. 基本热力
  2. 网格(蜂窝/正四边形)热力
  3. 行政分级统计热力。

本次我们主要介绍基本类型和网格热力的使用。

数据准备

        首先热力图的输入数据本身就是地理位置离散的数据,因此坐标结构和点类型相同,数组结构 [经度, 维度]。同时每条数据还要提供用于计算“热度”的字段,数据要求为 number 类型。

结构如下:

var arr = [
    // pos 为位置坐标。
    // cnt 为该点的数据,数据要求为 number 类型。
    { pos: [112.1, 39.9], cnt: 10 },
    { pos: [136.3, 23.1], cnt: 20 },
    // ...
];


创建图层

接下我们创建一个 VisualLayer 图层,并且在构造函数中设置好热力类型(heatmap)和蜂窝形状(hexagon)

var visuallayer = Loca.visualLayer({
    type: 'heatmap',
    shape: 'hexagon',
    // loca 为 Loca 容器实例,构造过程见 Loca 容器章节
    container: loca
});


传入数据及样式配置

有了图层后,我们开始传入数据,并指定数据中关键的两个类型:「坐标」和「热度」所在的字段名。

visualLayer.setData(arr, {
    lnglat: 'pos',
    value: 'cnt'
});

接着传入的热力配置主要包括:「热力半径 radius」、「半径单位 unit」、「热力颜色 color」和「热力计算模式 mode」。

visualLayer.setOptions({
    // 热力半径单位为:米
    unit: 'meter',
   // 3D 热力棱柱的高度单位:米
    heightUnit: 'meter',
    // 聚合数据的计算模式为:加和
    mode: 'sum',
    style: {
        // 正六边形半径 2000米
        radius: 2000,
        // 3D 热力棱柱的区间,高度和网格热度进行映射
        height: [0, 10000],
        // 网格热力颜色格式为 Array,将数据从小到大映射至这7种颜色上。
        // 基本热力的颜色格式为 K-V 形式,具体格式请查看参考手册。
        color:  ['#ecda9a', '#efc47e', '#f3ad6a', '#f7945d', '#f97b57', '#f66356', '#ee4d5a']
    }
});


让我们来解释下几个重要的属性含义:

  1. radius:热力半径,设置热力图按照多大范围进行聚合。由于设置了「单位 unit」为米,因此这里就表示以半径为 2000 米的蜂窝范围进行点聚合,被这个范围内覆盖的定位点,都会被聚合至这个网格中。
  2. color:热力颜色,设置蜂窝网格的颜色。热力数据会从小到大的分别映射到这 7 种颜色上。
    需要说明:网格热力和基本热力的配置项略有不同,网格颜色为数组格式,基本热力为 K-V 形式。具体格式的差异请查看参考手册和对应示例。
  3. mode:热力数据的计算方式,设置对聚合后数据的计算方式,举个栗子,当前一个蜂窝由值为 10,20,60 三条数据聚合而成,那么 count 下当前热力权重为 3(数据个数),max 为 60,min 为 10,sum 为 90,mean 为 30,median 为 20。
  4. unit / heightUnit:设置聚合半径和棱柱高度的单位。通常我们建议设置成「米」以保证展示出来的效果和真实世界所应对。
  5. height:设置热力棱柱高度范围。每个网格的热度会和棱柱高度按照线性关系一一映射。

由于配置较多,更多完整配置项请查看 API 文档 示例中心


添加图例

一般热立体会配合图例来表示色块颜色与数据的关系,我们可以通过updatelegend事件获取热力图例数据,然后使用适合您的方式绘制出来。

这里我们只为您提供了网格热力的图例更新事件,其他形式的热力暂不提供。

// 事件 legendupdate: 图例数据更新完成回调此函数
layer.on('legendupdate', function (ev) {
    // 图例
    var colorLegend = ev.colorLegend;
    // 结构 [{color: '#rrggbb', range: [start, end]}]
});

参考示例

示例中心 功能
在线体验
常见问题