基于HTML5實現的Heatmap熱圖3D應用

Heatmap熱圖通過眾多數據點信息，匯聚成直觀可視化顏色效果，熱圖已廣泛被應用于氣象預報、醫療成像、機房溫度監控等行業，甚至應用于競技體育領域的數據分析。

已有眾多文章分享了生成Heatmap熱圖原理，可參考《How to make heat maps》和《How to make heat maps in Flex》，本文將介紹基于HTML5技術的實現方式，主要基于Cavans和WebGL這兩種HTML5的2D和3D技術的應用，先上最終例子實現的界面效果和操作視頻：

實現Heatmap的開源js庫比較出名的就是 heatmapjs ，該框架發展了2年多，作者Patrick Wied最近決定在保持開源的基礎上，提供有償的商業支持服務，這是好事，地球上絕大部分開源項目作者搞個barely可用的初級版本后，就多年不見更新了，而真正能實際上線使用的產品哪有不需要持續完善、增強可擴展性以及提供特殊定制服務的，考慮到作者這兩年已無償投了這么多（Over the last 2 years, I devoted more than 500 hours of work to improving heatmap.js to make it a truly great library. ），希望此文也能幫作者在國內起點宣傳作用。

heatmapjs 采用的Canvas的2D繪制方式實現，這種基于CPU的繪制方式對于幾百幾千的點還湊合，但如果需要實時運算成千上萬節點效果的，還是得依靠并發性更強大的GPU方式，采用HTML5的話只能是WebGL方案，還好Florian Boesch在《High Performance JS heatmaps》博客中提供了基于WebGL實現的heatmap方式，并將其開源在https://github.com/pyalot/webgl-heatmap  上，這兩個開源庫質量都還不錯，一個基于Canvas實現，一個基于WebGL實現，后者性能高點，但需要支持WebGL的瀏覽器，heatmapjs 的文檔例子比較全面，但兩者接口都非常簡單易學，代碼也都就幾百行，你完全可以根據項目情況選擇甚至進行代碼改造優化。

回到我們要實現的例子，我將采用heatmapjs在內存中實時運算出熱圖，結合hightopo的HT for Web的3D引擎，以一堆節點連線關系的3D的網絡拓撲圖，其中節點代表熱源，其越接近地面則地面溫度越高，這樣每個節點的xz面坐標信息作為要傳入給heatmapjs的點xy二維坐標信息，三維節點的elevation也就是y軸信息，則作為離地面的距離信息，距離越大轉成要傳入heatmapjs的value值越小，最后啟動HT for Web的三維拓撲自動布局彈力算法，這樣可直觀的觀察圖元節點在不同的空間位置動態變化時地板的溫度熱圖變化效果。

代碼核心就在重載forceLayout.onRelaxed函數，在每次自動布局過程將所有熱源節點的信息構建成heatmap需要的數據，同時通過ht.Default.setImage(‘hm-bottom’, heatmap._renderer.canvas);將熱圖的canvas注冊成HT的圖片，而floor的地板圖元綁定了注冊的’hm-bottom’圖片，這樣就實現了內存繪制canvas，然后通過HT for Web的3D引擎將Cavnas作為貼圖信息動態呈現到3D場景的效果。

整個實現代碼如下不到百行，你也可以采用https://github.com/pyalot/webgl-heatmap 的WebGL方式來實現，這樣就是3D到2D再到3D的有趣過程，這就是HTML5技術可無縫融合各種方案的魅力！

MAX = 500;
WIDTH = 1024;
HEIGHT = 512;        
function init() {                           
    dataModel = new ht.DataModel();            
    g3d = new ht.graph3d.Graph3dView(dataModel);                            
    g3d.getMoveMode = function(e){ return 'xyz'; };                        
    view = g3d.getView();            
    view.className = 'main';
    document.body.appendChild(view);    
    window.addEventListener('resize', function (e) { g3d.invalidate(); }, false);            
    heatmap = h337.create({ width: WIDTH, height: HEIGHT });                                   
    ht.Default.setImage('hm-bottom', heatmap._renderer.canvas);            
    var floor = new ht.Node();
    floor.s3(WIDTH, 1, HEIGHT);
    floor.s({
        '3d.selectable': false,
        'layoutable': false,
        'all.visible': false,
        'top.visible': true,
        'top.image': 'hm-bottom',
        'top.reverse.flip': true,
        'bottom.visible': true,
        'bottom.transparent': true,
        'bottom.opacity': 0.5,
        'bottom.reverse.flip': true                
    });
    dataModel.add(floor);            
    var root = createNode();                   
    for (var i = 0; i < 3; i++) {
        var iNode = createNode();                       
        createEdge(root, iNode);
        for (var j = 0; j < 3; j++) {
            var jNode = createNode();                            
            createEdge(iNode, jNode);                                                         
        }
    }                   
    forceLayout = new ht.layout.Force3dLayout(g3d);  
    forceLayout.start();
    forceLayout.onRelaxed = function(){
        var points = [];
        dataModel.each(function(data){
            if(data instanceof ht.Node && data !== floor){
                var p3 = data.p3();
                if(p3[1] > MAX){
                    p3[1] = MAX;
                    data.setElevation(MAX);
                }
                else if(p3[1] < -MAX){
                    p3[1] = -MAX;
                    data.setElevation(-MAX);
                }                        
                points.push({
                    x: p3[0] + WIDTH/2,
                    y: p3[2] + HEIGHT/2,
                    value: MAX - Math.abs(p3[1])
                });
            }
        });
        heatmap.setData({data: points, min: 0, max: MAX});
    };
}
function createNode(){
    var node = new ht.Node();             
    node.s({
        'shape3d': 'sphere',
        'shape3d.color': '#E74C3C',
        'shape3d.opacity': 0.8,
        'shape3d.transparent': true,
        'shape3d.reverse.cull': true
    });
    node.s3(20, 20, 20);
    dataModel.add(node);
    return node;
}
function createEdge(sourceNode, targetNode){
    var edge = new ht.Edge(sourceNode, targetNode);
    edge.s({
        'edge.width': 3,
        'edge.offset': 10,                
        'shape3d': 'cylinder',
        'shape3d.opacity': 0.7,
        'shape3d.transparent': true,
        'shape3d.reverse.cull': true
    });
    dataModel.add(edge);
    return edge;
}

 來自：http://my.oschina.net/xhload3d/blog/312648