xml地图|网站地图|网站标签 [设为首页] [加入收藏]

基于HTML5实现的Heatmap热图3D应用

来源:http://www.ccidsi.com 作者:最新解决方案 人气:158 发布时间:2019-08-07
摘要:回来大家要落实的事例,作者将动用heatmapjs在内部存款和储蓄器中实时运算出热图,结合hightopo的HTforWeb的3D引擎,以一批节点连线关系的3D的网络拓扑图,在那之中节点代表热源,其越

回来大家要落实的事例,作者将动用heatmapjs在内部存款和储蓄器中实时运算出热图,结合hightopo的HT for Web的3D引擎,以一批节点连线关系的3D的网络拓扑图,在那之中节点代表热源,其越周边地面则地面温度越高,那样各种节点的xz面坐标新闻作为要传播给heatmapjs的点xy二维坐标新闻,三维节点的elevation相当于y轴音信,则作为离本土的偏离新闻,距离越大转成要传播heatmapjs的value值越小,最终运维HT for Web的三个维度拓扑自动布局弹力算法,那样可直观的观看图元节点在差别的长空地点动态变化时地板的热度热图变化意义。

皇家88平台 1

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

代码宗旨就在重载forceLayout.onRelaxed函数,在历次活动布局进程将装有热源节点的消息营产生heatmap需求的数额,同一时间通过ht.Default.setImage(‘hm-bottom’, heatmap._renderer.canvas);将热图的canvas注册成HT的图纸,而floor的地板图元绑定了挂号的’hm-bottom’图片,那样就实现了内部存款和储蓄器绘制canvas,然后通过HT for Web的3D引擎将Cavnas作为贴图音讯动态显示到3D场景的功效。

整套完毕代码如下不到百行,你也可以动用 的WebGL方式来促成,那样正是3D到2D再到3D的风趣进程,那就是HTML5才具可无缝融合各个方案的吸引力!

heatmapjs 选用的Canvas的2D绘制格局贯彻,这种基于CPU的绘图格局对于几百几千的点还聚焦,但一旦急需实时运算数不清节点效果的,照旧得依赖并发性更庞大的GPU形式,选取HTML5的话只好是WebGL方案,幸好FlorianBoesch在《High Performance JSheatmaps》博客中提供了依附WebGL完毕的heatmap格局,并将其开源在  上,那四个开源库品质都还不易,一个依照Canvas达成,三个根据WebGL达成,后面一个性能高点,但必要辅助WebGL的浏览器,heatmapjs 的文书档案例子相比周全,但相互接口都非常轻易易学,代码也都就几百行,你一丝一毫能够依靠项目意况采用照旧实行代码改变优化。

贯彻Heatmap的开源js库比较盛名的就是 heatmapjs ,该框架发展了2年多,笔者帕Terry克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. ),希望此文也能帮小编在国内起源宣传成效。

皇家88平台,已有非常的多篇章分享了生成Heatmap热图原理,可参考《How to make heat maps》和《How to make heat maps in Flex》,本文将介绍基于HTML5手艺的落到实处方式,首要依赖Cavans和WebGL那三种HTML5的2D和3D本事的应用,先上最后例子完毕的分界面效果和操作录像:

皇家88平台 2

Heatmap热图通过重重数分局音信,汇集成直观可视化颜色效果,热图已遍布被使用于气象预先报告、医疗成像、机房温度监察和控制等行业,以致利用于竞技体育领域的数目分析。

 

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:基于HTML5实现的Heatmap热图3D应用

关键词: 68399皇家赌场

最火资讯