国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

zhaochunqi / 1718人閱讀

摘要:目前支持散點圍欄熱力網格聚合等方式致力于讓大數據可視化變得簡單易用。如圖表示,紅色區域表示分析要素的密度大,而藍色區域表示分析要素的密度小。實現熱力原理讀取每個像素的值透明度,做一個顏色映射。

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

編輯:Aresn

歡迎加入 QQ 群參與技術討論:618308202

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

GitHub 地址:https://github.com/TalkingData/inmap (點個 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() 定義一個漸變的顏色帶

效果如圖:

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

設置 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();
}

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

(這么黑乎乎的一團,跟熱力差距好大?。?/p>

重置 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 文字避讓算法的實現。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90443.html

相關文章

  • 圓桌論壇實錄 | 從容器生態圈解析容器之熱現象

    摘要:容器跟虛擬化是解決不同問題的,從這一點來看與有相似之處,我認為虛擬化解決的一個重大問題是隔離和安全的問題,而容器則解決的是快速交付的問題。同時也可以應用一些虛擬化比較成熟的技術,包括容器的容器的熱遷移,現在也都具備一些初步的方案。 5月26日,數人云產品戰略發布會在北京萬達索菲特酒店舉行,發布會最后一個環節圓桌論壇可謂大咖云集,小數為大家在第一時間帶來了實錄分享,快來感受下容器生態圈的...

    happen 評論0 收藏0
  • 你不知道前端算法之文字避讓

    摘要:避讓算法采用的是四分位模型算法,接下來手把手教你寫避讓算法,老司機帶你裝逼帶你飛。創建四分位模型所謂四分位模型,每一個標記點都有上下左右四個放文字的位子,如果左邊放不下,那就放右邊試試,還不行就放到下面試試,以此類推,原理就這么簡單,哈哈。 本文作者:TalkingData 可視化工程師李鳳祿編輯:Aresn inMap 是一款基于 canvas 的大數據可視化庫,專注于大數據方向點線...

    yedf 評論0 收藏0
  • Hinton反思新作:我說反向傳播不好,但還是沒誰能顛覆它

    摘要:然而反向傳播自誕生起,也受到了無數質疑。主要是因為,反向傳播機制實在是不像大腦。他集結了來自和多倫多大學的強大力量,對這些替代品進行了一次評估。號選手,目標差傳播,。其中來自多倫多大學和,一作和來自,來自多倫多大學。 32年前,人工智能、機器學習界的泰斗Hinton提出反向傳播理念,如今反向傳播已經成為推動深度學習爆發的核心技術。然而反向傳播自誕生起,也受到了無數質疑。這些質疑來自各路科學家...

    gplane 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<