借用heatmap.js热力图实现



目的是在一个指定区域(场馆)内展示热力图,通过摄像头可以获取到人流量统计数据






条件:

1、  无法获取每一个人的坐标位置

2、  捕捉的摄像头可以进行提前规划,摄像头可以基本统计出视野内的人员数量

 

思路

 

1、  得到场馆的平面布局图

2、  规划摄像头的位置为A点到M点,已标注如上图

3、  使用网页进行展示,平面布局图在网页中展示时网页大小要固定,以能够测量出A到M点在网页中展示的X和Y坐标。

4、  通过采集A到M点摄像头内的人员数量,做为权重值,以进行热力绘制

5、  设A点有A个人,B点有B个人,一直到M有M个人,所以A到M点的人员总数为T1=A+B+C+…+M

6、  设图上I,C,E,G为出入口,需要统计出在场馆内的总人数T0=I入-C出-E出-G出。

7、  所以围绕在A到M点以外的人员还有T2=T0-T1。

8、  随机得到T2个人员的坐标位置X和Y,形成T2个点,每个人的权重为1

9、  将这T2个数据加入到热力图的展示中


代码:

<html>
<head>
	 <meta http-equiv="refresh" content="2">
  <style>
 	img{ width: 100%; height: auto;max-width: 100%; display: block; }  
</style>
</head>
<body>
	<div id="heatmap"
		style="width: 600px; height: 600px; border: 1px solid; border-color: grey;">
		
		<img alt="" src="123.jpg">
		
		
		</div>
		
 
</body>

<script src="heatmap.js">



</script>

<script type="text/javascript">
	
 
	 	 //单个数据点的添加方式 
	 	 function hello2()
	   {
		// 创建一个heatmap实例对象
		// “h337” 是heatmap.js全局对象的名称。可以使用它来创建热点图实例
		var heatmapInstance = h337.create({
			//这里直接指定热点图渲染的div了。
			//heatmap支持自定义的样式方案,具体可看官网api
			container : document.querySelector('#heatmap')
		});
	 var dataPointA = { 
	 x: 116,
	 y: 405,
	 value: 0.01*Math.floor(Math.random()*100)
	 };
	  var dataPointB = { 
	 x: 116,
	 y: 210,
	 value: 0.01*Math.floor(Math.random()*100)
	 };
	  var dataPointC = { 
	 x: 250,
	 y: 350,
	 value: 0.01*Math.floor(Math.random()*100)
	 };
	  var dataPointD = { 
	 x: 550,
	 y: 650,
	 value: 0.01*Math.floor(Math.random()*100)
	 };
	 
	  var dataPointM = { 
	 x: 318,
	 y: 147,
	 value: 0.01*Math.floor(Math.random()*100)
	 };
	  var dataPointL = { 
	 x: 318,
	 y: 213,
	 value: 0.01*Math.floor(Math.random()*100)
	 };
	  var dataPointK = { 
	 x: 318,
	 y: 279,
	 value: 0.01*Math.floor(Math.random()*100)
	 };
	  var dataPointJ = { 
	 x: 318,
	 y: 347,
	 value: 0.01*Math.floor(Math.random()*100)
	 };
	  
	  var dataPointI = { 
	 x: 318,
	 y: 419,
	 value: 0.01*Math.floor(Math.random()*100)
	 };
	 
	 var dataPoints = [dataPointA, dataPointB, dataPointC, dataPointD, dataPointM, dataPointK, dataPointJ, dataPointL, dataPointI];
	 heatmapInstance.addData(dataPoints);
	 //heatmapInstance.addData(dataPoint);
	}
   hello2();
	 

	 
</script>

</html>








参考:

http://blog.csdn.net/tuposky/article/details/44832377




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com