热力图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

热力图heatmap.js使用中的思路解析相关推荐

heatmap.js来绘制热力图
Heatmap.js 一.简介二.使用 2.1 上手 2.2 设置点的半径 2.3 添加底图 2.4 更多三.高级用法 3.1 动态热力图 3.2 鼠标跟随热力图 3.3 显示数值一.简介 He ...
heatmap.js调用百度地图api做热力图
做热力图使用heatmap.js模块然后就是来挑用百度地图api是他展现在百度地图上面一首先你要申请一个百度地图api接口的密钥申请网址申请密钥之后,先登录上自己的账号然后创建应用三就是来取一 ...
heatmap.js如何制作热力图？
前几天接了个业务,两百块钱. 帮助同校的学妹做前端设计. 其中一个问题是如何用HeatMap.js做热力图呢,我参考了csdn上的数据,得出这个demo ----------------------- ...
uniapp + renderjs + heatmap.js 实现热力图
uniapp + renderjs + heatmap.js 实现热力图 app项目中需要热力图展示,第一次用uniapp的renderjs操作dom,遇到了一些坑,包括引入组件,请求传参啥的项目安 ...
CesiumHeat.js+heatmap.js加载热力图
加载热力图在项目中需要根据具体的经纬度点生成热力图,所以只能使用整数数据的heatmap.js就不能使用了.在使用Cesiumheatmap.js加载热力图的过程,直接使用组件中的Cesiumhea ...
html在线热点工具,Heatmap.js 强大的 HTML5 画布 WEB 网页在线热点图插件 - 资源分享...
Heatmap.js 可以用来生成基于用户自定义数据上的 Web 热点图,使用内嵌的 HTML5 Canvas 画布元素,heatmap.js 可以使用 Canvas 画出来一张漂亮的 heatmap ...
天地图热力图_arcgis js 3.x使用webgl绘制热力图
ArcGIS Js Api 3.x 热力图在数据量达到三万左右的时候,绘制速度不尽人意,数据量再大些,缩放时候就会很卡,非常影响客户体验. 参考了一下网上webgl热力图,能达到更流畅 ...
c++ _int64转字符串_C语言仿JS的eval函数解析字符串
C语言利用后缀表达式解析字符串(符合c98标准,很容易移植到计算器上) 最近用98标准的C语言写了个解析字符串,类似于JavaScript中的eval函数,感觉挺实用(移植到了计算器上,可以画F(X ...
JS 调试分析 + 字体解析（汽车之家）
JS 调试分析 + 字体解析(汽车之家) 当你看到这篇文章,讲一堆理论和基础,你一定会很烦..直接开始,上图!!(需要使用一个工具:FontCreator..如何下载,自己搜!) 惊不惊 ...
Heatmap.js 一个强大简易的web动态热图
Heatmap.js 一个强大简易的web动态热图最近在做热力图效果,背景图上绘制热力图,最开始使用的事Echarts,但是Echarts绘制是基于map,还其他一些第三方的库也很多基于map,还要 ...

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

热力图heatmap.js使用中的思路解析相关推荐

最新文章

热门文章