热力图 最后更新时间: 2021年01月22日
在地理数据可视化中我们经常会用到「热力地图」进行数据展示。那么本篇就为大家介绍一下 Loca 所支持的热力图类型,以及如何在 Loca 中使用热力图。
热力分类
在地图中,热力图是一种将离散的地理位置数据聚合后,展现数据强弱大小分布趋势的可视化类型。
目前在 Loca 中我们支持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']
}
});
让我们来解释下几个重要的属性含义:
- radius:热力半径,设置热力图按照多大范围进行聚合。由于设置了「单位 unit」为米,因此这里就表示以半径为 2000 米的蜂窝范围进行点聚合,被这个范围内覆盖的定位点,都会被聚合至这个网格中。
- color:热力颜色,设置蜂窝网格的颜色。热力数据会从小到大的分别映射到这 7 种颜色上。
需要说明:网格热力和基本热力的配置项略有不同,网格颜色为数组格式,基本热力为 K-V 形式。具体格式的差异请查看参考手册和对应示例。 - mode:热力数据的计算方式,设置对聚合后数据的计算方式,举个栗子,当前一个蜂窝由值为 10,20,60 三条数据聚合而成,那么 count 下当前热力权重为 3(数据个数),max 为 60,min 为 10,sum 为 90,mean 为 30,median 为 20。
- unit / heightUnit:设置聚合半径和棱柱高度的单位。通常我们建议设置成「米」以保证展示出来的效果和真实世界所应对。
- height:设置热力棱柱高度范围。每个网格的热度会和棱柱高度按照线性关系一一映射。
由于配置较多,更多完整配置项请查看 API 文档 及 示例中心。
添加图例
一般热立体会配合图例来表示色块颜色与数据的关系,我们可以通过updatelegend
事件获取热力图例数据,然后使用适合您的方式绘制出来。
这里我们只为您提供了网格热力的图例更新事件,其他形式的热力暂不提供。
// 事件 legendupdate: 图例数据更新完成回调此函数
layer.on('legendupdate', function (ev) {
// 图例
var colorLegend = ev.colorLegend;
// 结构 [{color: '#rrggbb', range: [start, end]}]
});