目的是在一個指定區域(場館)內展示熱力圖,通過攝像頭可以獲取到人流量統計數據
條件:
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
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。