当前位置:   article > 正文

Echart在Openlayers的应用-热力图_openlayers echarts 热力图

openlayers echarts 热力图

概述

在前文中,有一篇文章讲述了Openlayers2结合Echart实现地图统计图,还以一篇文章讲述了结合heatmap.js实现Openlayers中热力图的展示。在本文,书接前文,讲述Openlayers如何结合Echart实现热力图。


效果


全图效果


放大效果

实现

1、关键点

echart实现heatmap的关键点在与屏幕坐标,所以,在地图中,应通过地理坐标到屏幕坐标的转换函数,将地理坐标转换为屏幕坐标。


2、实现代码

我将热力图扩展成为了一个openlayers的layer扩展,实现代码如下:

  1. OpenLayers.Layer.EchartHeatmap = OpenLayers.Class(OpenLayers.Layer,
  2. {
  3. isBaseLayer : false,
  4. heatmap : null,
  5. mapLayer : null,
  6. heatdata : [],
  7. initialize : function (name, map, options)
  8. {
  9. var scope = this, heatdiv = document.createElement("div"), handler;
  10. OpenLayers.Layer.prototype.initialize.apply(this, [name, options]);
  11. heatdiv.style.cssText = "position:absolute;width:" + map.size.w + "px;height:"
  12. + map.size.h + "px;";
  13. this.div.appendChild(heatdiv);
  14. this.map = map;
  15. this.heatdiv = heatdiv;
  16. this.heatdata = options.heatdata;
  17. this.opacity = options.opacity;
  18. handler = function (e)
  19. {
  20. if (scope.heatdata.length > 0)
  21. {
  22. scope.updateLayer(e);
  23. }
  24. };
  25. handler();
  26. map.events.register("zoomend", this, handler);
  27. map.events.register("moveend", this, handler);
  28. },
  29. updateLayer : function (e)
  30. {
  31. var scope = this;
  32. require(
  33. [
  34. 'echarts',
  35. 'echarts/chart/heatmap'
  36. ],
  37. function (ec)
  38. {
  39. var myChart = ec.init(scope.heatdiv);
  40. var heatD = [];
  41. var data = scope.heatdata;
  42. var orgXy, w, h;
  43. if(e){
  44. orgXy = e.object.layerContainerOriginPx;
  45. }
  46. else{
  47. orgXy={x:0,y:0};
  48. }
  49. w = scope.map.size.w;
  50. h = scope.map.size.h;
  51. scope.heatdiv.style.cssText = "position:absolute;top:"+(-orgXy.y)+"px;left:"+(-orgXy.x)+
  52. "px;width:" + w + "px;height:" + h + "px;";
  53. for (var i = 0; i < data.length; ++i)
  54. {
  55. var d = data[i];
  56. var scrPt = scope.map.getPixelFromLonLat(new OpenLayers.LonLat(d.lon, d.lat));
  57. var x = scrPt.x,
  58. y = scrPt.y;
  59. heatD.push([
  60. x,
  61. y,
  62. d.count
  63. ]);
  64. }
  65. var option =
  66. {
  67. series : [
  68. {
  69. type : 'heatmap',
  70. data : heatD,
  71. opacity:scope.opacity,
  72. gradientColors : [
  73. {
  74. offset : 0.4,
  75. color : 'green'
  76. },
  77. {
  78. offset : 0.5,
  79. color : 'yellow'
  80. },
  81. {
  82. offset : 0.8,
  83. color : 'orange'
  84. },
  85. {
  86. offset : 1,
  87. color : 'red'
  88. }
  89. ],
  90. minAlpha : 0.2,
  91. valueScale : 2
  92. }
  93. ]
  94. };
  95. myChart.setOption(option);
  96. });
  97. },
  98. destroy : function ()
  99. {
  100. OpenLayers.Layer.Grid.prototype.destroy.apply(this, arguments);
  101. },
  102. CLASS_NAME : "OpenLayers.Layer.EchartHeatmap"
  103. }
  104. );
前台调用的代码如下:

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>heatmap.js OpenLayers Heatmap Layer</title>
  5. <link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
  6. <style>
  7. html, body, #map,#chart{
  8. padding:0;
  9. margin:0;
  10. height:100%;
  11. width:100%;
  12. overflow: hidden;
  13. }
  14. #chart{
  15. position: absolute;
  16. top: 0px;
  17. left: 0px;
  18. z-index: 900;
  19. }
  20. </style>
  21. <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
  22. <script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
  23. <script src="../../../plugin/echart/build/dist/echarts.js"></script>
  24. <script src="extend/echartheatlayer.js"></script>
  25. <script type="text/javascript">
  26. require.config({
  27. paths: {
  28. echarts: '../../../plugin/echart/build/dist'
  29. }
  30. });
  31. var map;
  32. function init(){
  33. var format = 'image/png';
  34. var bounds = new OpenLayers.Bounds(
  35. 73.45100463562233, 18.16324718764174,
  36. 134.97679764650596, 53.531943152223576
  37. );
  38. var options = {
  39. controls: [],
  40. maxExtent: bounds,
  41. maxResolution: 0.2403351289487642,
  42. projection: "EPSG:4326",
  43. units: 'degrees'
  44. };
  45. map = new OpenLayers.Map('map', options);
  46. var wms1 = new OpenLayers.Layer.WMS("base_map",
  47. "http://localhost:8088/geoserver/lzugis/wms",
  48. {
  49. layers: "province",
  50. transparent: true
  51. }, {
  52. isBaseLayer: true,
  53. singleTile: true
  54. });
  55. map.addControl(new OpenLayers.Control.Zoom());
  56. map.addControl(new OpenLayers.Control.Navigation());
  57. var heatmap = new OpenLayers.Layer.EchartHeatmap("heatmap",map,{
  58. heatdata:data,
  59. opacity:0.8
  60. });
  61. var wms2 = new OpenLayers.Layer.WMS("base_map",
  62. "http://localhost:8088/geoserver/lzugis/wms",
  63. {
  64. layers: "county",
  65. transparent: true
  66. }, {
  67. isBaseLayer: false,
  68. singleTile: true,
  69. opacity:0.2
  70. });
  71. map.addLayers([wms1,heatmap,wms2]);
  72. map.zoomToExtent(bounds);
  73. }
  74. </script>
  75. </head>
  76. <body οnlοad="init()">
  77. <div id="map">
  78. </div>
  79. </body>
  80. </html>
其中,变量data的数据格式如下:

[
  {name:"东方市",lon:108.633357,lat:19.097025,count:30},
  {name:"临高县",lon:109.686515,lat:19.91785,count:47},
  {name:"儋州市",lon:109.575851,lat:19.518256,count:43},
  {name:"昌江黎族自治县",lon:109.048657,lat:19.258351,count:71},
  {name:"白沙黎族自治县",lon:109.448097,lat:19.235657,count:70},
  ……
]


查看示例


传播GIS知识 | 交流GIS经验 | 分享GIS价值 | 专注GIS发展

技术博客

http://blog.csdn.net/gisshixisheng

在线教程

http://edu.csdn.net/course/detail/799
Github

https://github.com/lzugis/

联系方式

q       q:1004740957

e-mail:niujp08@qq.com

公众号:lzugis15

Q Q 群:452117357(webgis)
             337469080(Android)






声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/728199
推荐阅读
相关标签
  

闽ICP备14008679号