你不知道的前端演算法之熱力圖的實現

本文作者：TalkingData 可視化工程師李鳳祿

編輯：Aresn

inMap 是一款基於 canvas 的大數據可視化庫，專註於大數據方向點線面的可視化效果展示。目前支持散點、圍欄、熱力、網格、聚合等方式；致力於讓大數據可視化變得簡單易用。

GitHub 地址：https://github.com/TalkingData/inmap (點個 Star 支持下作者吧！)

熱力圖這個名字聽起來很高大上，其實等同於我們常說的密度圖。

如圖表示，紅色區域表示分析要素的密度大，而藍色區域表示分析要素的密度小。只要點密集，就會形成聚類區域。 看到這麼炫的效果，是不是自己也很想實現一把？接下來手把手實現一個熱力（帶你裝逼帶你飛、 哈哈），鄭重聲明：下面代碼片段均來自 inMap。

準備數據

inMap 接收的是經緯度數據，需要把它映射到 canvas 的像素坐標，這就用到了墨卡托轉換，墨卡托演算法很複雜，以後我們會有單獨的一篇文章來講講他的原理。經過轉換，你得到的數據應該是這樣的：

[n {n "lng": "116.395645",n "lat": 39.929986,n "count": 6,n "pixel": { //像素坐標n "x": 689,n "y": 294n }n },n {n "lng": "121.487899",n "lat": 31.249162,n "count": 10,n "pixel": { //像素坐標n "x": 759,n "y": 439n }n },n ...n]n

好了，我們得到轉換後的像素坐標數據(x、y),就可以做下面的事情了。

創建 canvas 漸變填充

創建一個由黑到白的漸變圓

let gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);ngradient.addColorStop(0, rgba(0,0,0,1));ngradient.addColorStop(1, rgba(0,0,0,0));nctx.fillStyle = gradient;nctx.arc(x, y, radius, 0, Math.PI * 2, true);n

• createRadialGradient() 創建線性的漸變對象
• addColorStop() 定義一個漸變的顏色帶

效果如圖：

那麼問題就來了，如果每個數據權重值 count 不一樣，我們該如何表示呢？

設置 globalAlpha

根據不同的count值設置不同的Alpha，假設最大的count的Alpha等於1，最小的count的Alpha為0，那麼我根據count求出Alpha。

let alpha = (count - minValue) / (maxValue - minValue);n

然後我們代碼如下：

drawPoint(x, y, radius, alpha) {n let ctx = this.ctx;n ctx.globalAlpha = alpha; //設置 Alpha 透明度n ctx.beginPath();n let gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);n gradient.addColorStop(0, rgba(0,0,0,1));n gradient.addColorStop(1, rgba(0,0,0,0));n ctx.fillStyle = gradient;n ctx.arc(x, y, radius, 0, Math.PI * 2, true);n ctx.closePath();n ctx.fill();n}n

效果跟上一個截圖有很大區別，可以對比一下透明度的變化。

（這麼黑乎乎的一團，跟熱力差距好大啊）

重置 canvas 畫布顏色

• getImageData() 複製畫布上指定矩形的像素數據
• putImageData() 將圖像數據放回畫布：

getImageData()返回的數據格式如下：

{n "data": {n "0": 0, //Rn "1": 128, //Gn "2": 0, //Bn "3": 255, //Aplahn "4": 0, //Rn "5": 128, //Gn "6": 0, //Bn "7": 255, //Aplahn "8": 0,n "9": 128,n "10": 0,n "11": 255,n "12": 0,n "13": 128,n "14": 0,n "15": 255,n "16": 0,n "17": 128,n "18": 0,n "19": 255,n "20": 0,n "21": 128,n "22": 0n ...n

返回的數據是一維數組，每四個元素表示一個像素（rgba）值。

實現熱力原理：讀取每個像素的alpha值(透明度)，做一個顏色映射。

代碼如下：

let palette = this.getColorPaint(); //取色面板nlet img = ctx.getImageData(0, 0, container.width, container.height);n let imgData = img.data;n let max_opacity = normal.maxOpacity * 255;n let min_opacity = normal.minOpacity * 255;n //權重區間n let max_scope = (normal.maxScope > 1 ? 1 : normal.maxScope) * 255;n let min_scope = (normal.minScope < 0 ? 0 : normal.minScope) * 255;n let len = imgData.length;n for (let i = 3; i < len; i += 4) {n let alpha = imgData[i]; n let offset = alpha * 4;n if (!offset) {n continue;n }n //映射顏色n imgData[i - 3] = palette[offset];n imgData[i - 2] = palette[offset + 1];n imgData[i - 1] = palette[offset + 2];nn // 範圍區間n if (imgData[i] > max_scope) {n imgData[i] = 0;n }n if (imgData[i] < min_scope) {n imgData[i] = 0;n }nn // 透明度n if (imgData[i] > max_opacity) {n imgData[i] = max_opacity;n }n if (imgData[i] < min_opacity) {n imgData[i] = min_opacity;n }n }n //將設置後的像素數據放回畫布nctx.putImageData(img, 0, 0, 0, 0, container.width, container.height);n

創建顏色映射，一個好的顏色映射決定最終效果。 inMap 創建一個長256px的調色面板：

let paletteCanvas = document.createElement(canvas);nlet paletteCtx = paletteCanvas.getContext(2d);npaletteCanvas.width = 256;npaletteCanvas.height = 1;nlet gradient = paletteCtx.createLinearGradient(0, 0, 256, 1);n

inMap 默認顏色如下：

this.gradient = {n 0.25: rgb(0,0,255),n 0.55: rgb(0,255,0),n 0.85: yellow,n 1.0: rgb(255,0,0)n};n

將gradient顏色設置到調色面板對象中

for (let key in gradient) {n gradient.addColorStop(key, gradientConfig[key]);n}n

返回調色面板的像素點數據：

return paletteCtx.getImageData(0, 0, 256, 1).data;n

創建出來的調色面板效果圖如下：（看起來像一個漸變顏色條）

最終我們實現的熱力圖如下：

下節預告

下一節，我們將重點介紹 inMap 文字避讓演算法的實現。