借用heatmap.js热力图实现

来源：互联网发布：rabin c语言编辑：程序博客网时间：2024/05/19 17:47

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

条件：

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支持自定义的样式方案，具体可看官网apicontainer : 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

阅读全文

0 0