日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
基于HTML5實現(xiàn)的Heatmap熱圖3D應(yīng)用

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

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為凌源等服務(wù)建站，凌源等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為凌源企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

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

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

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

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

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

 
 
      
  
  1. MAX = 500;  
    2.   
  
  2. WIDTH = 1024;  
    3.   
  
  3. HEIGHT = 512;          
    4.   
  
  4. function init() {                             
    5.   
  
  5.     dataModel = new ht.DataModel();              
    6.   
  
  6.     g3d = new ht.graph3d.Graph3dView(dataModel);                              
    7.   
  
  7.     g3d.getMoveMode = function(e){ return 'xyz'; };                          
    8.   
  
  8.     view = g3d.getView();              
    9.   
  
  9.     view.className = 'main';  
    10.   
  
  10.     document.body.appendChild(view);      
    11.   
  
  11.     window.addEventListener('resize', function (e) { g3d.invalidate(); }, false);              
    12.   
  
  12.     heatmap = h337.create({ width: WIDTH, height: HEIGHT });                                     
    13.   
  
  13.     ht.Default.setImage('hm-bottom', heatmap._renderer.canvas);              
    14.   
  
  14.     var floor = new ht.Node();  
    15.   
  
  15.     floor.s3(WIDTH, 1, HEIGHT);  
    16.   
  
  16.     floor.s({  
    17.   
  
  17.         '3d.selectable': false,  
    18.   
  
  18.         'layoutable': false,  
    19.   
  
  19.         'all.visible': false,  
    20.   
  
  20.         'top.visible': true,  
    21.   
  
  21.         'top.image': 'hm-bottom',  
    22.   
  
  22.         'top.reverse.flip': true,  
    23.   
  
  23.         'bottom.visible': true,  
    24.   
  
  24.         'bottom.transparent': true,  
    25.   
  
  25.         'bottom.opacity': 0.5,  
    26.   
  
  26.         'bottom.reverse.flip': true                  
    27.   
  
  27.     });  
    28.   
  
  28.     dataModel.add(floor);              
    29.   
  
  29.     var root = createNode();                     
    30.   
  
  30.     for (var i = 0; i < 3; i++) {  
    31.   
  
  31.         var iNode = createNode();                         
    32.   
  
  32.         createEdge(root, iNode);  
    33.   
  
  33.         for (var j = 0; j < 3; j++) {  
    34.   
  
  34.             var jNode = createNode();                              
    35.   
  
  35.             createEdge(iNode, jNode);                                                           
    36.   
  
  36.         }  
    37.   
  
  37.     }                     
    38.   
  
  38.     forceLayout = new ht.layout.Force3dLayout(g3d);    
    39.   
  
  39.     forceLayout.start();  
    40.   
  
  40.     forceLayout.onRelaxed = function(){  
    41.   
  
  41.         var points = [];  
    42.   
  
  42.         dataModel.each(function(data){  
    43.   
  
  43.             if(data instanceof ht.Node && data !== floor){  
    44.   
  
  44.                 var p3 = data.p3();  
    45.   
  
  45.                 if(p3[1] > MAX){  
    46.   
  
  46.                     p3[1] = MAX;  
    47.   
  
  47.                     data.setElevation(MAX);  
    48.   
  
  48.                 }  
    49.   
  
  49.                 else if(p3[1] < -MAX){  
    50.   
  
  50.                     p3[1] = -MAX;  
    51.   
  
  51.                     data.setElevation(-MAX);  
    52.   
  
  52.                 }                          
    53.   
  
  53.                 points.push({  
    54.   
  
  54.                     x: p3[0] + WIDTH/2,  
    55.   
  
  55.                     y: p3[2] + HEIGHT/2,  
    56.   
  
  56.                     value: MAX - Math.abs(p3[1])  
    57.   
  
  57.                 });  
    58.   
  
  58.             }  
    59.   
  
  59.         });  
    60.   
  
  60.         heatmap.setData({data: points, min: 0, max: MAX});  
    61.   
  
  61.     };  
    62.   
  
  62. }  
    63.   
  
  63. function createNode(){  
    64.   
  
  64.     var node = new ht.Node();               
    65.   
  
  65.     node.s({  
    66.   
  
  66.         'shape3d': 'sphere',  
    67.   
  
  67.         'shape3d.color': '#E74C3C',  
    68.   
  
  68.         'shape3d.opacity': 0.8,  
    69.   
  
  69.         'shape3d.transparent': true,  
    70.   
  
  70.         'shape3d.reverse.cull': true 
    71.   
  
  71.     });  
    72.   
  
  72.     node.s3(20, 20, 20);  
    73.   
  
  73.     dataModel.add(node);  
    74.   
  
  74.     return node;  
    75.   
  
  75. }  
    76.   
  
  76. function createEdge(sourceNode, targetNode){  
    77.   
  
  77.     var edge = new ht.Edge(sourceNode, targetNode);  
    78.   
  
  78.     edge.s({  
    79.   
  
  79.         'edge.width': 3,  
    80.   
  
  80.         'edge.offset': 10,                  
    81.   
  
  81.         'shape3d': 'cylinder',  
    82.   
  
  82.         'shape3d.opacity': 0.7,  
    83.   
  
  83.         'shape3d.transparent': true,  
    84.   
  
  84.         'shape3d.reverse.cull': true 
    85.   
  
  85.     });  
    86.   
  
  86.     dataModel.add(edge);  
    87.   
  
  87.     return edge;  
    88.   
  
  88. } 
    89.

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


新聞名稱：基于HTML5實現(xiàn)的Heatmap熱圖3D應(yīng)用
URL鏈接：http://www.dlmjj.cn/article/djcpdch.html