热力图heatmap.js使用中的思路解析

官网： https://www.patrick-wied.at/static/heatmapjs/

需求：使用heatmap.js制作热力图，反映人群分布情况

问题：热力图需要的数据：坐标 + 人数 + max人数， 从后台能拿到的数据总共只有12条，要怎么更加准确、效果更加地显示整个区域的人群分布呢？

壹解：用12条数据，12个坐标的话，每个点的半径就是超级超级大，人流分布无法详尽，效果很明显无法满足需求。×

贰解：整个区域分成12部分，每部分都有一个各自的总人数。而每部分根据实际人数占比划分为2-3小部分，如右图所示：

　　根据画图的点的数量：

　　　　第一区域area1 上下比例为3:7，top上部点数量为 6 的话，bottom下部点的数量就为 6/3*7 = 14，上下部分点的半径一致，并均匀分布，然后根据area1内的点总数，计算每个点的value，

　　以此类推。最后根据整区域的平均值（后台数据）除以 12个区域点的平均数 得到 max值，从而成功画出热力图。（因是后面整理的笔记，故无效果图）

　　后经过测试，与实际情况并不相符，差别甚大。×

叁解：改变方式，根据画图的点的值：

　　　　在第一区域area1内，均匀分布点的坐标（通过后面自我测试，发现横向两点间距最佳为半径的一半，纵向间距为半径距离），例如半径为50，area1点坐标为：（因背景底图上会有建筑物部分，热力图不能覆盖，故无法使用代码计算坐标）

　　　　　

　　area1总人数为m，area1上部分人数：m * 30%，下部分人数：m * 70% 。每个点的value为，上部分： m * 30%，下部分： m * 70% ， max：area1的平均值（后台数据）  ， 成功达到预期效果，与实际情况也是90%吻合

最终效果图：

　　

转载于:https://www.cnblogs.com/shenmissing/p/8877135.html