你不知道的前端算法之热力图的实现

作者:TalkingData 李凤禄

本文为TalkingData原创,未经授权禁止转载。申请授权请在评论中留言联系!

inMap 是一款基于 canvas 的大数据可视化库,专注于大数据方向点线面的可视化效果展示。目前支持散点、围栏、热力、网格、聚合等方式;致力于让大数据可视化变得简单易用。

GitHub地址:https://github.com/TalkingData/inmap

热力图这个名字听起来很高大上,其实等同于我们常说的密度图:

如图表示,红色区域表示分析要素的密度大,而蓝色区域表示分析要素的密度小。只要点密集,就会形成聚类区域。 看到这么炫的效果,是不是自己也很想实现一把?接下来手把手实现一个热力(带你装逼带你飞、 哈哈),郑重声明:下面代码片段均来自 inMap。

准备数据

inMap 接收的是经纬度数据,需要把它映射到 canvas 的像素坐标,这就用到了墨卡托转换,墨卡托算法很复杂,以后我们会有单独的一篇文章来讲讲他的原理。经过转换,你得到的数据应该是这样的:

好了,我们得到转换后的像素坐标数据(x、y),就可以做下面的事情了。

创建 canvas 渐变填充

创建一个由黑到白的渐变圆

createRadialGradient() 创建线性的渐变对象

addColorStop() 定义一个渐变的颜色带

效果如图:

那么问题就来了,如果每个数据权重值 count 不一样,我们该如何表示呢?

设置 globalAlpha

根据不同的count值设置不同的Alpha,假设最大的count的Alpha等于1,最小的count的Alpha为0,那么我根据count求出Alpha。

然后代码如下:

效果跟上一个截图有很大区别,可以对比一下透明度的变化。

(这么黑乎乎的一团,跟热力差距好大啊)

重置 canvas 画布颜色

getImageData() 复制画布上指定矩形的像素数据

putImageData() 将图像数据放回画布:

getImageData()返回的数据格式如下:

返回的数据是一维数组,每四个元素表示一个像素(rgba)值。

实现热力原理:读取每个像素的alpha值(透明度),做一个颜色映射。

代码如下:

创建颜色映射,一个好的颜色映射决定最终效果。

inMap 创建一个长256px的调色面板:

inMap 默认颜色如下:

将gradient颜色设置到调色面板对象中:

返回调色面板的像素点数据:

创建出来的调色面板效果图如下:(看起来像一个渐变颜色条)

最终我们实现的热力图如下:

本文来自企鹅号 - TalkingData媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏周明礼的专栏

Threejs 快速入门

在什么都是3D,看电影3D,打游戏3D,估计3D打车,很快就会面世。那么作为前端开发的标准语言,JS和3D能不能也搞出点大新闻呢?刚好最近在做一个活动时,就遇到...

2.6K1
来自专栏逍遥剑客的游戏开发

简单的运动模糊效果实现

1724
来自专栏前端说吧

css - 评分效果的星星✨外衣

这种效果,如果遇到一分一个星,没有半星(或者有也可以,直接加一个半星的类名)的情况,还可以通过添加多个结构实现。

281
来自专栏python3

tkinter -- Label使用图像与文本

compound: 指定文本(text)与图像(bitmap(内置图)/image(自定义图片)是如何在Label上显示,当指定image/bitmap时,会显...

561
来自专栏Android机动车

Flutter 实战:撸半个知乎日报~HomePage

https://github.com/zhujian1989/ZhihuDailyPurifyByFlutter

802
来自专栏刘望舒

几条曲线构建Android表白程序

每年的情人节和七夕,甜蜜与痛苦的日子,做点什么好呢? 写诗画画送礼物,逛街吃饭看电影? 作为搬砖爱好者,写个表白脚本或者动画什么的吧。 想起之前看到的一段H5动...

693
来自专栏编程

你不知道的前端算法之热力图的实现

本文作者:TalkingData 可视化工程师李凤禄 编辑:Aresn inMap 是一款基于 canvas 的大数据可视化库,专注于大数据方向点线面的可视化效...

2159
来自专栏IMWeb前端团队

前端识别验证码思路分析

相信很多前端同学对于二维码识别、图像对比等这类高大上的图像识别技术望而生畏,觉得此类识别技术只能通过更加底仓的高级语言才能实现(诸如c等),本文试图从前端的角度...

1967
来自专栏24K纯开源

用Qt写软件系列五:一个安全防护软件的制作(2)

引言        在上一篇中讲述了主窗体的创建和设计。主窗体的无边框效果、阴影效果、拖动事件处理、窗体美化等工作在前面的博客中早就涉及,因此上篇博文中并未花费...

1.3K7
来自专栏WOLFRAM

可视化:标签、缩放和排除

1764

扫码关注云+社区