借用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-2020 ITdaan.com