http://blog.csdn.net/giser_whu/article/details/51485871

时下用的最多的开源二维webgis引擎应该是openlayers与leaflet了,leaflet因其轻量、灵活性得到了越来越多的应用。并且leaflet的插件也非常多,综合使用的话,可以很容易的实现数据的可视化分析与应用

1、leaflet-heat插件

leaflet-heatmap插件:https://github.com/Leaflet/Leaflet.heat
leaflet插件:http://leafletjs.com/plugins.html
leaflet Github上有详细的使用说明,就不做翻译搬运工了

2、leaflet-heat插件使用

和以前一样,使用requirejs引入leaflet-heat.js:

require.config({
waitSeconds : 0,
paths : {
//库文件
leaflet : '../lib/leaflet/dist/leaflet',
leafletheat : '../lib/leaflet/plugins/heatmap/leaflet-heat', //js文件
},
shim : {
'leafletheat' : {
deps : ['leaflet'],
exports : 'leafletheat'
}
}
});

构建洪涝点位数组[lat,lng],这里我没有使用intensity,封装一个绘制洪涝热力图方法:

    /**
* 绘制洪涝热力图
* @param heatmapData:洪涝点位数组
* @returns {*}:洪涝热力图图层
*/
Engine.prototype.drawFloodHeatLayer = function(heatmapData){
return L.heatLayer(heatmapData, {
minOpacity : 0.5,
radius : 12,
});
};

调用该方法创建一个洪涝热力图图层即可,另外leaflet-heat插件还提供了以下几个方法:

方法 说明
setOptions(options) 设置heatmap属性并重新绘制
addLatLng(latlng) 向heatmap动态添加数据并重新绘制
setLatLngs(latlngs) 重置heatmap数据并重新绘制
redraw() 重绘,刷新

使用以上方法可以很容易实现图层的更新:根据每次的查询结果,动态绘制不同时期的洪涝热力图。

3、实现效果

2016年以来洪涝热力图

2015年洪涝热力图

4、总结

热力图的可视化效果可以通过调整其配置参数以达到最佳的可视化效果。由热力图可以很直观的看出洪涝的地域分布情况,即使在新疆也会有洪涝,大多数可能是融雪性洪涝。

Leaflet绘制热力图【转】的更多相关文章

  1. R语言绘图:在地图上绘制热力图

    使用ggplot2在地图上绘制热力图 ######*****绘制热力图代码*****####### interval <- seq(0, 150000, 25000)[-2] #设置价格区间 n ...

  2. ArcGIS JS 3.x使用webgl绘制热力图

        ArcGIS Js Api 3.x 热力图在数据量达到三万左右的时候,绘制速度不尽人意,数据量再大些,缩放时候就会很卡,非常影响客户体验.     参考了一下网上webgl热力图,能达到更流畅 ...

  3. 使用leaflet绘制geoJson中国边界

    绘制中国边界 代码如下: function drawChina() { //设置样式 var myStyle = { "color": "#00f", &quo ...

  4. Leaflet绘制多边形

    drawPolygon = () => { let points = []; const polygon = new L.Polygon(points); this.map.addLayer(p ...

  5. matplotlib绘制热力图

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/jin_tmac/article/deta ...

  6. Python中绘制场景热力图

    我们在做诸如人群密集度等可视化的时候,可能会考虑使用热力图,在Python中能很方便地绘制热力图. 下面以识别图片中的行人,并绘制热力图为例进行讲解. 步骤1:首先识别图像中的人,得到bounding ...

  7. leaflet计算多边形面积

    上一篇介绍了使用leaflet绘制圆形,那如何计算圆形的面积呢? 1.使用数学公式计算,绘制好圆形后,获取中心点以及半径即可 2.使用第三方工具计算,如turf.js. 这里turf的area方法入参 ...

  8. ArcGIS API for Javascript之专题图的制作(四)热力图渲染(上)

    一 .热力图定义 热力图(heat map)也称热图,是以特殊颜色高亮区域的形式表示密度.温度.气压.频率等分布的不易理解和表达的数据. 二.HeatmapRenderer esri/renderer ...

  9. R语言绘制沈阳地铁线路图

    ##使用leaflet绘制地铁线路图,要求 ##(1)图中绘制地铁线路 library(dplyr) library(leaflet) library(data.table) stations< ...

随机推荐

  1. 2017-2018-1 20179202《Linux内核原理与分析》第八周作业

    一 .可执行程序的装载 1. 预处理.编译.链接 gcc –e –o hello.cpp hello.c //预处理 gcc -x cpp-output -S -o hello.s hello.cpp ...

  2. DHTML和HTML有什么区别?有什么不同

    DHTML和HTML有什么区别?有什么不同 首先Dynamic HTML是一种制作网页的方式,而不是一种网络技术(就像JavaScript和ActiveX):它也不是一个标记.一个插件或者是一个浏览器 ...

  3. zip函数实际应用

    一个需求,把两个列表要同时用for循环贴到模板上,用zip在后端组成  元祖组成的列表  这样在模板就可以用.0   .1的方式,类似python中 x[0]   x[1] 显示出来. html显示: ...

  4. Python Django 中的STATIC_URL 设置和使用解析

    使用Django静态设置时,遇到很多问题,经过艰苦的Baidu, stack overflow, Django原档阅读,终于把静态图片给搞出来了.特记录下来. 关键的概念:Django中,静态资源的存 ...

  5. 【BZOJ 1415】 1415: [Noi2005]聪聪和可可 (bfs+记忆化搜索+期望)

    1415: [Noi2005]聪聪和可可 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1640  Solved: 962 Description I ...

  6. 从DOS时代至移动互联网的技术路线回顾

    从DOS时代至移动互联网的技术路线回顾 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ ...

  7. Git 历险记

    Git历险记(一) 作为分布式版本控制系统的重要代表--Git已经为越来越多的人所认识,它相对于我们熟悉的CVS.SVN甚至同时分布式控制系统的Mercurial,有哪些优势和不足呢.这次InfoQ中 ...

  8. hdu 1514 记忆化搜索

    题意是给4堆(堆的高度小于等于40)有颜色(颜色的种类小于等于20)的物品,你有一个篮子最多能装5件物品,每次从这4堆物品里面任取一件物品放进篮子里,但是取每堆物品时,必须先取上面的物品,才能取下面的 ...

  9. bzoj 3262

    题意:给你一些三维上的点,对于每个点,统计三个坐标都小于等于该点的点数. 如果点的范围在300以内,可以用三维树状数组搞,但这题坐标范围太大. 考虑将所有点按照x坐标排序,从左到右,相当于在一个二维平 ...

  10. hihocoder #1015 KMP

    #include<stdio.h> #include<iostream> #include<math.h> #include<string.h> usi ...