熱力圖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%吻合

最終效果圖:

  


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com