HeatMap 和 GIS

原创 2015年11月19日 05:17:41

1、啥是HeatMap

       从字面来理解就是热图,或者称为热区图,热力图等,可以非常直观的呈现一些原本不易理解或表达的数据,比如密度、频率、温度等,改用区域和颜色这种更容易被人理解的方式来呈现。这个东西很早就有了,作为一个GIS爱好者,我都一直都没太关注,就知道拿他来展示数据很炫,很酷!!!再加上后面有一个Map的单词,哇塞,地图,果不其然,把他与GIS结合,很多有趣的事情就发生了。

《历史地震震源位置热力图》
不好意思,图有点大!!!!!!!!!!!!
============================================================================
2、HeatMap原理
        先来简单看个例子吧!
        案例:鼠标点击热力图

       顾名思义,就是用来展示用户鼠标在屏幕上的点击次数的区域分布图,红色的代表点击次数最多,紫色最少,空白就是没有被点击。
       注意问题来了:你会发现它是渐变的,渐变的,渐变的!!!!!!!!!!难道你点击鼠标是连续的吗?肯定不是的,看来问题没那么简单了,这里面有一个小小的扩散融合算法。
       既然这样,那就来看看具体的算法吧!这是js写的:heatmapjs其生成的原理简单概括为四个步骤:
(1)为离散点设定一个半径,创建一个缓冲区;
(2)对每个离散点的缓冲区,使用渐进的灰度带(完整的灰度带是0~255)从内而外,由浅至深地填充;
(3)由于灰度值可以叠加(值越大颜色越亮,在灰度带中则显得越白。在实际中,可以选择ARGB模型中任一通道作为叠加灰度值),从而对于有缓冲区交叉的区域,可以叠加灰度值,因而缓冲区交叉的越多,灰度值越大,这块区域也就越“热”;
(4)以叠加后的灰度值为索引,从一条有256种颜色的色带中(例如彩虹色)映射颜色,并对图像重新着色,从而实现热点图。
HeatMap既然是用点来生成的,那我们就先看下一个点是什么情况:
(1)单点热力显示

单点热力图
        单热点的显示,至少要确定它的中心灰度值、半径,当然还有xy和色带。中心灰度值默认设为50(太小显示效果不好)。根据半径的大小(一般是25,屏幕坐标),由中心(50)到边界(0)渐进地填充灰度。我使用黑色(任何颜色都可以)的Alpha通道来进行灰度值的累加,填充后中心位置的ARGB值是(50,0,0,0),边界处是(0,0,0,0),这样就能得到上图左边的灰度图了。最后根据灰度值映射色带得到彩虹带中对应位置的颜色。50的灰度值,只能映射到彩虹带的前1/5处,因而上图右边单热点的颜色以蓝色为主,略带青色。

       每个单一热点有一个Weight,默认设为1,目前暂时没有用到(ArcGIS Flex的热图实现中,Weight用来在地图缩小时累加多个离散点聚合后中心灰度值的大小。我没去实现地图缩放的功能,但我觉得Weight会有别的用处,现在还没完全考虑好,以后有机会再说)。Weight不是类似通常二维空间数据中的第三维属性数据,热图只能表现离散点空间上的频率,而不能表现其属性在空间上的分布。例如地震震源的热图,并不能表示其震级大小的空间分布,而只能表现地震次数的多少。
       (2)多热点叠加显示


        叠加显示,点位置及权重是随机给的,半径是指定的。图中有422个点,半径是50。点越密集的的区域,叠加的灰度也就越多,映射后也显得比较“热”。
版权声明:每天进步一点点,你会发现,离成功越来越远……【GeoWin: 本文为博主原创文章,未经博主允许不得转载】

羽化效果的HeatMap

用采样点制作热力图是个非常常见的需求。热力图可以给地图的阅读者直观的信息,下面就看看如何在 ArcGIS Pro 中做一个漂亮的HeatMap。1.准备好采样点数据,当然是量大更优。我这里用了全球地震...
  • kikitaMoon
  • kikitaMoon
  • 2015年06月09日 11:07
  • 8544

Heatmap 热图 ArcGIS JavaScript API

  • 2015年04月08日 09:55
  • 110KB
  • 下载

ArcGIS API for Javascript热区图

有个项目需要用热区图,经研究发现,热区图渲染HeatmapRenderer在ArcGIS js API出现在3.11以后的版本(Added at v3.11),需求是要在GraphicsLayer里实...
  • liyan_gis
  • liyan_gis
  • 2015年12月24日 15:19
  • 8511

js使用heatmap热力图的一些操作

因为项目的需要,用到热力图heatmap。现在很多像购物网站,都用到heatmap分析顾客在网站上哪些地方点击量比较大。heatmap的详细介绍在http://www.patrick-wied.at/...
  • fanzhang1990
  • fanzhang1990
  • 2014年01月09日 16:09
  • 14342

arcgis api for js入门开发系列九热力图效果

热力图效果实现的思路:1.map.js初始化函数调用聚合效果的js接口,map.heatmap.js实现聚合核心效果的js文件;2.map.heatmap.js实现热力图核心思路: 调用地图Featu...
  • liguoweioo
  • liguoweioo
  • 2017年02月27日 10:41
  • 3207

深度学习入门;图像的heatMap

深度学习入门;图像的heatMap            图像的heatMap是什么,一副图片的heatmap可以帮助我们在上面检测到想要的object,如下左图所示:         ...
  • liyaohhh
  • liyaohhh
  • 2016年03月27日 12:12
  • 5294

Cesium热力图实现

生成热力图的算法我是用的一个热力图插件 heatmap.js。 heatmap中热力图生成原理: heatmap中首先会根据输入的渐进色参数,在内部生成一个0-255色值的调色板。 ...
  • u013929284
  • u013929284
  • 2017年05月14日 10:01
  • 3281

GeoServer发布Heatmap

百度等热力图是使用开源的heatmap.js做的,但是这种jiejuefangan
  • freeland1
  • freeland1
  • 2014年11月12日 17:10
  • 3973

JavaScript实现的Heatmap效果

纯客户端,采用HTML5的Canvas元素来绘制热图,示例地址:http://tmappsevents.esri.com/website/heatmap/index.html...
  • mYp_maY
  • mYp_maY
  • 2012年09月28日 15:18
  • 527

基于HTML5实现3D热图Heatmap应用

我将采用heatmapjs在内存中实时运算出热图,结合hightopo(http://www.hightopo.com/)的HT for Web的3D引擎,以一堆节点连线关系的3D的网络拓扑图,其中节...
  • u013161495
  • u013161495
  • 2015年10月14日 00:12
  • 1634
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HeatMap 和 GIS
举报原因:
原因补充:

(最多只允许输入30个字)