資料視覺化：淺談熱力圖如何在前端實現

當我們需要用更直觀有效的形式來展現各類大資料資訊時，熱力圖無疑是一種很好的方式。作為一種密度圖，熱力圖 一般使用具備顯著顏色差異的方式來呈現資料效果， 熱力圖中亮色一般代表事件發生頻率較高或事物分佈密度較大，暗色 則 反之。 值得一提的是， 熱力圖最終效果常常優於離散點的直接顯示，可以在二維平面或者地圖上直觀地展現空間資料的疏密程度或頻率高低。

那麼製作一張完整的熱力圖，需要前端做哪些工作呢？接下來，我將基於自己在工作過程中的實踐，為大家詳細解析熱力圖在前端的實現過程。

首先給大家看一張完整的熱力圖實現效果圖：

 

關於熱力圖的實現原理：

一般 可 大致歸納為以下幾個步驟：

1.為每個資料點設定 一個 從中心向外灰度漸變的圓；

2.利用灰度可以疊加的原理，計算每個畫素點資料交叉疊加得到的灰度值；

3.根據每個畫素計算得到的灰度值，在一條彩色色帶中進行顏色對映，最後對影像進行著色，得到熱力圖。

當熱力圖基於前端技術的具體實現時，又可分為以下四個步驟，接下來為大家詳細解析：

1. 準備 熱力圖資料格式

由於熱力圖使用場景一般為地圖， 所以， 資料來源需要提供經緯度作為位置資訊，以及 count作為資料點的權重值。 具體 資料格式示例如下：

 

2. 在地圖上填充資料

基於 canvas繪製熱力圖 時 ，熱力圖 中 每個資料點的半徑大小會直接影響到熱力圖 的 展現效果， 所以 一般要結合使用地圖的縮放級別以及資料精度來進行設定，本 文 示例預設設為 15 px。

 

透過 上述步驟畫出的點的樣式如下圖 所示 ，是一個由內向外放射漸變的灰色圓：

 

所有點疊加在地圖上的效果如下圖所示：

 

3.疊加顯示，權重（密度）演算法

上面的繪製結果 中 ， 因為 沒有使用到權重值， 所以 每個資料點圓 的 中心點灰度值都是 1，不能直接用於顏色對映 ，需要 根據離散點緩衝區的疊加來確定熱力分佈密度。每一個熱點都有一個位置和權重，權重越大，則該點越顯著，也就代表其漸變的一個衰變因素 ，此時， 我們需要根據不同的 count設定出不同的alpha值。本文 主要 根據 count最小值對應alpha0，最大值對應1的對映計算方式，求得每個資料點 ，從而 繪製 出 alpha：

 

結合上一步驟，在 canvas中完整 的 繪製 方法 如下：

 

 

具體 繪製 出的 效果如下 圖 所示，從例項圖的對比 中 可以看出 ， 一個好的權重對映方法對熱力圖的顯示效果 起到非常 重要 的 作用。

 

4.顏色對映

根據 畫布上每個畫素點累計得到的灰度值， 可以 從彩色對映色帶中得到對應位置的顏色。

那麼 如何得到畫布上每個畫素點 的 資訊 呢 ？可以使用 canvas提供的getImageData()方法，返回 ImageData 物件，該物件複製了畫布指定矩形的畫素資料。 需要注意的是， ImageData物件中的每個畫素，都包含RGBA四項資訊：

 

 

根據 canvas提供的putImageData()方法， 可以 將畫素級的資料放回到畫布中。

在熱力圖繪製過程中，利用這兩個方法，可以從上一步驟繪製得到的熱力圖中 獲得 每個畫素點疊加得到的 alpha通道的灰度值(0~255)，再建立一條長度為256px 的 彩色色帶，從中對映得到該畫素點對應 的 顏色 RGB值。

建立一條長度為 256px彩虹條的過程如下 圖 所示：

 

自定義顏色得到的彩色條 示例 ：

 

從彩虹條中對映顏色的過程如下所示：

 

經過以上步驟 ，我們 可以得到的熱力圖效果如下：

 

最後， 為大家 提供 一個 熱力圖的效能最佳化方法，由於熱力圖一次性載入 的 點 過多 ， 所以容易 出現卡頓問題 ，而 前端在渲染熱力圖時，可以進行熱力圖的點聚合最佳化。 關於 點聚合 最佳化 的 實施方法： 將視窗劃分成為網格進行 操作 ， 由此 判斷熱力圖資料點在網格中所處的位置，如果同時幾個點處於一個網格，則合併這幾個點，以此降低渲染成本。

可以這樣 判斷每個點在網格中 的 分佈位置：

 

 

網格劃分以及點聚合方法如下：

 

透過上述分享後，關於熱力圖的前端實踐過程，想必大家已有所瞭解！

關於熱力圖的應用：

前端完成一個完整的熱力圖後，可應用於多項業務當中。拿 個推熱力圖來說，能夠幫助景區做人流分佈狀況檢測，透過不同顏色區塊的疊加，展示景區不同區域的人口密度，協助景區做好智慧管理。此外，個推熱力圖還能為災害救援提供支援，有效指導人群疏散，為 政府部門的災後救援工作提供重大幫助。