摘要：目前支持散點(diǎn)圍欄熱力網(wǎng)格聚合等方式致力于讓大數(shù)據(jù)可視化變得簡(jiǎn)單易用。如圖表示，紅色區(qū)域表示分析要素的密度大，而藍(lán)色區(qū)域表示分析要素的密度小。實(shí)現(xiàn)熱力原理讀取每個(gè)像素的值透明度，做一個(gè)顏色映射。

本文作者：TalkingData 可視化工程師李鳳祿
編輯：Aresn
歡迎加入 QQ 群參與技術(shù)討論：618308202

inMap 是一款基于 canvas 的大數(shù)據(jù)可視化庫，專注于大數(shù)據(jù)方向點(diǎn)線面的可視化效果展示。目前支持散點(diǎn)、圍欄、熱力、網(wǎng)格、聚合等方式；致力于讓大數(shù)據(jù)可視化變得簡(jiǎn)單易用。

熱力圖這個(gè)名字聽起來很高大上，其實(shí)等同于我們常說的密度圖。

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

inMap 接收的是經(jīng)緯度數(shù)據(jù)，需要把它映射到 canvas 的像素坐標(biāo)，這就用到了墨卡托轉(zhuǎn)換，墨卡托算法很復(fù)雜，以后我們會(huì)有多帶帶的一篇文章來講講他的原理。經(jīng)過轉(zhuǎn)換，你得到的數(shù)據(jù)應(yīng)該是這樣的：

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

好了，我們得到轉(zhuǎn)換后的像素坐標(biāo)數(shù)據(jù)(x、y),就可以做下面的事情了。

創(chuàng)建一個(gè)由黑到白的漸變圓

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() 創(chuàng)建線性的漸變對(duì)象

addColorStop() 定義一個(gè)漸變的顏色帶

效果如圖：

那么問題就來了，如果每個(gè)數(shù)據(jù)權(quán)重值 count 不一樣，我們?cè)撊绾伪硎灸兀?/p> 設(shè)置 globalAlpha

根據(jù)不同的count值設(shè)置不同的Alpha，假設(shè)最大的count的Alpha等于1，最小的count的Alpha為0，那么我根據(jù)count求出Alpha。

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

然后我們代碼如下：

drawPoint(x, y, radius, alpha) {
    let ctx = this.ctx;
    ctx.globalAlpha = alpha; //設(shè)置 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();
}

效果跟上一個(gè)截圖有很大區(qū)別，可以對(duì)比一下透明度的變化。

（這么黑乎乎的一團(tuán)，跟熱力差距好大?。?/p>

getImageData() 復(fù)制畫布上指定矩形的像素?cái)?shù)據(jù)

putImageData() 將圖像數(shù)據(jù)放回畫布：

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

{
  "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
    ...

返回的數(shù)據(jù)是一維數(shù)組，每四個(gè)元素表示一個(gè)像素（rgba）值。

代碼如下：

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;
    //權(quán)重區(qū)間
    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];

        // 范圍區(qū)間
        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;
        }
    }
    //將設(shè)置后的像素?cái)?shù)據(jù)放回畫布
ctx.putImageData(img, 0, 0, 0, 0, container.width, container.height);

創(chuàng)建顏色映射，一個(gè)好的顏色映射決定最終效果。
inMap 創(chuàng)建一個(gè)長(zhǎng)256px的調(diào)色面板：

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 默認(rèn)顏色如下：

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

將gradient顏色設(shè)置到調(diào)色面板對(duì)象中

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

返回調(diào)色面板的像素點(diǎn)數(shù)據(jù)：

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

創(chuàng)建出來的調(diào)色面板效果圖如下：（看起來像一個(gè)漸變顏色條）

最終我們實(shí)現(xiàn)的熱力圖如下：

下一節(jié)，我們將重點(diǎn)介紹 inMap 文字避讓算法的實(shí)現(xiàn)。