本文作者：TalkingData 視覺化工程師李鳳祿
編輯：Aresn
歡迎加入 QQ 群參與技術討論：618308202
inMap 是一款基於 canvas 的大資料視覺化庫，專注於大資料方向點線面的視覺化效果展示。目前支援散點、圍欄、熱力、網格、聚合等方式；致力於讓大資料視覺化變得簡單易用。
GitHub 地址：github.com/TalkingData… (點個 Star 支援下作者吧！)
熱力圖這個名字聽起來很高大上，其實等同於我們常說的密度圖。
如圖表示，紅色區域表示分析要素的密度大，而藍色區域表示分析要素的密度小。只要點密集，就會形成聚類區域。 看到這麼炫的效果，是不是自己也很想實現一把？接下來手把手實現一個熱力（帶你裝逼帶你飛、 哈哈），鄭重宣告：下面程式碼片段均來自 inMap。
準備資料
inMap 接收的是經緯度資料，需要把它對映到 canvas 的畫素座標，這就用到了墨卡託轉換，墨卡託演算法很複雜，以後我們會有單獨的一篇文章來講講他的原理。經過轉換，你得到的資料應該是這樣的：
[
{
"lng": "116.395645",
"lat": 39.929986,
"count": 6,
"pixel": { //畫素座標
"x": 689,
"y": 294
}
},
{
"lng": "121.487899",
"lat": 31.249162,
"count": 10,
"pixel": { //畫素座標
"x": 759,
"y": 439
}
},
...
]
複製程式碼好了，我們得到轉換後的畫素座標資料(x、y),就可以做下面的事情了。
建立 canvas 漸變填充
建立一個由黑到白的漸變圓
let gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0, 'rgba(0,0,0,1)');
gradient.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = gradient;
ctx.arc(x, y, radius, 0, Math.PI * 2, true);
複製程式碼- createRadialGradient() 建立線性的漸變物件
- addColorStop() 定義一個漸變的顏色帶
效果如圖：
設定 globalAlpha
根據不同的count值設定不同的Alpha，假設最大的count的Alpha等於1，最小的count的Alpha為0，那麼我根據count求出Alpha。
let alpha = (count - minValue) / (maxValue - minValue);
複製程式碼然後我們程式碼如下：
drawPoint(x, y, radius, alpha) {
let ctx = this.ctx;
ctx.globalAlpha = alpha; //設定 Alpha 透明度
ctx.beginPath();
let gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0, 'rgba(0,0,0,1)');
gradient.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = gradient;
ctx.arc(x, y, radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
複製程式碼效果跟上一個截圖有很大區別，可以對比一下透明度的變化。
重置 canvas 畫布顏色
- getImageData() 複製畫布上指定矩形的畫素資料
- putImageData() 將影像資料放回畫布：
getImageData()返回的資料格式如下：
{
"data": {
"0": 0, //R
"1": 128, //G
"2": 0, //B
"3": 255, //Aplah
"4": 0, //R
"5": 128, //G
"6": 0, //B
"7": 255, //Aplah
"8": 0,
"9": 128,
"10": 0,
"11": 255,
"12": 0,
"13": 128,
"14": 0,
"15": 255,
"16": 0,
"17": 128,
"18": 0,
"19": 255,
"20": 0,
"21": 128,
"22": 0
...
複製程式碼返回的資料是一維陣列，每四個元素表示一個畫素（rgba）值。
實現熱力原理：讀取每個畫素的alpha值(透明度)，做一個顏色對映。
程式碼如下：
let palette = this.getColorPaint(); //取色皮膚
let img = ctx.getImageData(0, 0, container.width, container.height);
let imgData = img.data;
let max_opacity = normal.maxOpacity * 255;
let min_opacity = normal.minOpacity * 255;
//權重區間
let max_scope = (normal.maxScope > 1 ? 1 : normal.maxScope) * 255;
let min_scope = (normal.minScope < 0 ? 0 : normal.minScope) * 255;
let len = imgData.length;
for (let i = 3; i < len; i += 4) {
let alpha = imgData[i];
let offset = alpha * 4;
if (!offset) {
continue;
}
//對映顏色
imgData[i - 3] = palette[offset];
imgData[i - 2] = palette[offset + 1];
imgData[i - 1] = palette[offset + 2];
// 範圍區間
if (imgData[i] > max_scope) {
imgData[i] = 0;
}
if (imgData[i] < min_scope) {
imgData[i] = 0;
}
// 透明度
if (imgData[i] > max_opacity) {
imgData[i] = max_opacity;
}
if (imgData[i] < min_opacity) {
imgData[i] = min_opacity;
}
}
//將設定後的畫素資料放回畫布
ctx.putImageData(img, 0, 0, 0, 0, container.width, container.height);
複製程式碼建立顏色對映，一個好的顏色對映決定最終效果。 inMap 建立一個長256px的調色皮膚：
let paletteCanvas = document.createElement('canvas');
let paletteCtx = paletteCanvas.getContext('2d');
paletteCanvas.width = 256;
paletteCanvas.height = 1;
let gradient = paletteCtx.createLinearGradient(0, 0, 256, 1);
複製程式碼inMap 預設顏色如下：
this.gradient = {
0.25: 'rgb(0,0,255)',
0.55: 'rgb(0,255,0)',
0.85: 'yellow',
1.0: 'rgb(255,0,0)'
};
複製程式碼將gradient顏色設定到調色皮膚物件中
for (let key in gradient) {
gradient.addColorStop(key, gradientConfig[key]);
}
複製程式碼返回撥色皮膚的畫素點資料：
return paletteCtx.getImageData(0, 0, 256, 1).data;
複製程式碼建立出來的調色皮膚效果圖如下：（看起來像一個漸變顏色條）
最終我們實現的熱力圖如下：
下節預告
下一節，我們將重點介紹 inMap 文字避讓演算法的實現。