热力图入门指南(如何做热力图)

热力图是一种用颜色区分不同密度或强度的空间分布情况的可视化方法。它通过颜色的深浅来表示一组数据点在空间分布上的密集程度，从而使数据更加直观和易于理解。下面从多个方面详细介绍热力图相关的知识，包括热力图定义、类型、应用场景，以及如何使用JavaScript和Python实现热力图。

一、什么是热力图？

热力图是一种基于直方图的可视化方法，通过颜色和图形密度的变化来表示数据之间的空间分布情况。它适用于空间数据和分布非常复杂的数据集，能够更直观、易于理解地反映数据集的特性。

一般来说，热力图的数据点分布会通过颜色的深浅来表示密集程度，从而形成一张可视化的地图。热力图一般会配合其他的地图类型，如地图底图或点标记图层，使得数据的可视化更具有信息量，方便人们找到感兴趣的点。

二、热力图类型

在热力图的实现中，常见的类型有以下几种：

1. 基本热力图

基本热力图是一种通过颜色和密度来表示一组数据在空间上的分布情况的类型。它最常用于地图上，较为简单、易于实现，参考实现代码如下：

function initHeatMap() {
  var map = new AMap.Map('container', {
    zoom: 11,
    center: [116.405285, 39.904989]
  });

  var heatMap = new AMap.Heatmap(map, {
    radius: 25,
    opacity: [0, 0.8]
  });

  heatMap.setDataSet({
    data: [
      {lng: 116.418261, lat: 39.921984, count: 50},
      ...
      {lng: 116.418261, lat: 39.921984, count: 20}
    ],
    max: 100
  });
}

2. 热力图叠加图层

热力图叠加图层是一种在地图上叠加多个热力图的类型，用于展现不同数据集之间各自的分布情况。该类型的实现也比较简单，参考实现代码如下：

function initLayerHeatMap() {
  var map = new AMap.Map('container', {
    zoom: 11,
    center: [116.405285, 39.904989]
  });

  var heatmap1 = new AMap.Layer.Heatmap({
    map: map,
    zIndex: 100,
    zooms: [3, 18],
    opacity: [0, 0.8],
    radius: 25,
    gradient: {
      0.4: 'blue',
      0.6: 'cyan',
      0.7: 'lime',
      0.8: 'yellow',
      1.0: 'red'
    },
    dataSet: {
      max: 100,
      data: [
        {lng: 116.418261, lat: 39.921984, count: 50},
        ...
        {lng: 116.418261, lat: 39.921984, count: 20}
      ]
    }
  });

  var heatmap2 = new AMap.Layer.Heatmap({
    map: map,
    zIndex: 99,
    zooms: [3, 18],
    opacity: [0, 0.8],
    radius: 25,
    gradient: {
      0.4: 'blue',
      0.6: 'cyan',
      0.7: 'lime',
      0.8: 'yellow',
      1.0: 'red'
    },
    dataSet: {
      max: 100,
      data: [
        {lng: 116.418261, lat: 39.921984, count: 50},
        ...
        {lng: 116.418261, lat: 39.921984, count: 20}
      ]
    }
  });
}

3. 动态热力趋势图

动态热力趋势图是一种可以展示不同时间段内数据分布情况变化的类型。它能够反映出数据的动态演化过程，适用于展示交通浓度、航空轨迹等需要实时监控和分析的场合。

三、热力图应用场景

热力图的应用场景非常广泛，根据不同的需求和数据特点，可以应用于以下场景：

1. 人群流量密度分析

通过对人群流动轨迹的分析，可以根据不同时段的人员密度变化来了解人流变化趋势,制定合理的流量措施，对于商场、机场、景区等等地方是非常实用的工具。例如下图：

{
  radius: 15,
  minOpacity: .3,
  maxOpacity: 1,
  scaleRadius: !0,
  blur: .75,
  gradient: {
      .45: "rgb(000,000,255)",
      .55: "rgb(000,255,255)",
      .65: "rgb(000,255,000)",
      .95: "yellow",
      1: "rgb(255,000,000)"
  }
}

2. 大型数据采集和分析

热力图是一个清晰、直观的方式，方便数据分析人员对大量数据的相关性和高峰期的趋势进行分析。例如谷歌的搜索热力图，可以展示哪些区域、国家甚至全球的人们在什么时间段搜索了哪些关键词，从而为商业决策提供参考。

maxzoom: 18, 
radius: 2, 
blur: .5, 
opacity: .7, 
gradient: { 
  .25: "rgb(0,0,255)", 
  .4: "rgb(0,255,255)", 
  .55: "rgb(0,255,0)", 
  .7: "yellow", 
  1: "rgb(255,0,0)" 
}

3. 设备分布密度分析

热力图可以帮助我们对设备分布情况进行合理分析，从而提高资源利用效率。例如下图展示了美国境内有效的空气合成派送服务网络的分布情况，提示了相关政策和规划的启示。

gradient: {
  0.45: "rgb(000,000,255)",
  0.55: "rgb(000,255,255)",
  0.65: "rgb(000,255,000)",
  0.95: "yellow",
  1.0: "rgb(255,000,000)"
},
radius: 7, 
maxOpacity: .8, 
scaleRadius: 1, 
useLocalExtrema: 0, 
opacity: .5

四、使用 JavaScript 实现热力图

热力图的实现可以使用 JavaScript 库，最常见的是使用 Google Map API 或者百度地图 API 进行实现。下面分别介绍一下如何使用这两个API实现热力图。

1. Google Map API

使用 Google Map API 实现热力图的方法基本相同，只需要在 API 的基础上增加一些必要的属性和参数即可。具体实现方法如下：

var mapOptions = {
  zoom: 10,
  center: new google.maps.LatLng(37.775, -122.434),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var heatmap = new google.maps.visualization.HeatmapLayer({
  data: getPoints(),
  map: map
});
function getPoints() {
  return [
    new google.maps.LatLng(37.782551, -122.445368),
    new google.maps.LatLng(37.782745, -122.444586),
    ...
    new google.maps.LatLng(37.782745, -122.444586)
  ];
}

2. 百度地图 API

使用百度地图 API 实现热力图的方法比较复杂，需要定义 Map、 Heatmap 类等一系列的 JavaScript 类。下面是具体实现方法的代码：

//创建地图
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.4035,39.915), 18);
map.enableScrollWheelZoom();
// 添加带权重的点
var points =[
	new BMap.Point(116.418261, 39.921984,7),
	new BMap.Point(116.423332, 39.916532,5),
	...
	new BMap.Point(116.418261, 39.921984,1)
];
// 权重
var options = {
	 size: BMAP_POINT_SIZE_SMALL,
	 shape: BMAP_POINT_SHAPE_STAR,
	 color: '#d340c3'
};
//初始化heatmap
heatmapOverlay = new BMapLib.HeatmapOverlay(options);
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({ data:points });
heatmapOverlay.show();

五、使用 Python 实现热力图

在 Python 中实现热力图可以使用很多第三方库，比如 Matplotlib、Folium 和 Seaborn 等，功能都非常强大。这里我们以 Folium 库为例，讲解如何在 Python 中实现热力图。

import pandas as pd
import folium
from folium.plugins import HeatMap
# 读取数据
data = pd.read_csv("data.csv")
# 创建地图对象
map_osm = folium.Map(location=[30.58, 114.30], zoom_start=13)
# 将坐标转换为[y,x]的形式
heat_data = [[row['lat'], row['lng']] for index, row in data.iterrows()]
# 绘制热力图
HeatMap(heat_data).add_to(map_osm)
# 保存地图为 html 文件
map_osm.save('osm.html')

六、总结

热力图是一种非常有用的数据可视化工具，通过它我们可以更直观、清晰地展现数据的分布情况，加深对数据的理解和认识。本文从介绍热力图类型、应用场景以及如何使用JavaScript和Python实现热力图等多个方面进行了详细阐述。相信读者经过学习，对热力图的概念和实现方法已经有了全面而

Published by

风君子

独自遨游何稽首 揭天掀地慰生平