借用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
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。