MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » 基于HTML5实现的Heat地图热图3D应用

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

www.MyException.Cn  网友分享于:2014-09-18  浏览:0次
基于HTML5实现的Heatmap热图3D应用

Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。

Viz Libero heat map

已有众多文章分享了生成Heatmap热图原理,可参考《How to make heat maps》和《How to make heat maps in Flex》,本文将介绍基于HTML5技术的实现方式,主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用,先上最终例子实现的界面效果和操作视频:

IMG_1036

<iframe src="http://player.youku.com/embed/XNzc5ODYxNjY4" frameborder="0" width="510" height="498"></iframe>
实现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;
}   

 

文章评论

亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
如何成为一名黑客
如何成为一名黑客
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
鲜为人知的编程真相
鲜为人知的编程真相
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
那些争议最大的编程观点
那些争议最大的编程观点
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
10个调试和排错的小建议
10个调试和排错的小建议
中美印日四国程序员比较
中美印日四国程序员比较
 程序员的样子
程序员的样子
一个程序员的时间管理
一个程序员的时间管理
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员的鄙视链
程序员的鄙视链
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员应该关注的一些事儿
程序员应该关注的一些事儿
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
每天工作4小时的程序员
每天工作4小时的程序员
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员都该阅读的书
程序员都该阅读的书
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
我的丈夫是个程序员
我的丈夫是个程序员
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
为什么程序员都是夜猫子
为什么程序员都是夜猫子
漫画:程序员的工作
漫画:程序员的工作
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
总结2014中国互联网十大段子
总结2014中国互联网十大段子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
代码女神横空出世
代码女神横空出世
程序员和编码员之间的区别
程序员和编码员之间的区别
旅行,写作,编程
旅行,写作,编程
编程语言是女人
编程语言是女人
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
Java程序员必看电影
Java程序员必看电影
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有