Echart在Openlayers的应用-热力图
生活随笔
收集整理的這篇文章主要介紹了
Echart在Openlayers的应用-热力图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
概述
在前文中，有一篇文章講述了Openlayers2結合Echart實現地圖統計圖，還以一篇文章講述了結合heatmap.js實現Openlayers中熱力圖的展示。在本文，書接前文，講述Openlayers如何結合Echart實現熱力圖。
效果
全圖效果
放大效果
實現
1、關鍵點
echart實現heatmap的關鍵點在與屏幕坐標，所以，在地圖中，應通過地理坐標到屏幕坐標的轉換函數，將地理坐標轉換為屏幕坐標。
2、實現代碼
我將熱力圖擴展成為了一個openlayers的layer擴展，實現代碼如下：
OpenLayers.Layer.EchartHeatmap = OpenLayers.Class(OpenLayers.Layer,{isBaseLayer : false,heatmap : null,mapLayer : null,heatdata : [],initialize : function (name, map, options){var scope = this, heatdiv = document.createElement("div"), handler;OpenLayers.Layer.prototype.initialize.apply(this, [name, options]);heatdiv.style.cssText = "position:absolute;width:" + map.size.w + "px;height:" + map.size.h + "px;";this.div.appendChild(heatdiv);this.map = map;this.heatdiv = heatdiv;this.heatdata = options.heatdata;this.opacity = options.opacity;handler = function (e){if (scope.heatdata.length > 0){scope.updateLayer(e);}};handler();map.events.register("zoomend", this, handler);map.events.register("moveend", this, handler);},updateLayer : function (e){var scope = this;require(['echarts','echarts/chart/heatmap'],function (ec){var myChart = ec.init(scope.heatdiv);var heatD = [];var data = scope.heatdata;var orgXy, w, h;if(e){orgXy = e.object.layerContainerOriginPx;}else{orgXy={x:0,y:0};}w = scope.map.size.w;h = scope.map.size.h;scope.heatdiv.style.cssText = "position:absolute;top:"+(-orgXy.y)+"px;left:"+(-orgXy.x)+"px;width:" + w + "px;height:" + h + "px;";for (var i = 0; i < data.length; ++i){var d = data[i];var scrPt = scope.map.getPixelFromLonLat(new OpenLayers.LonLat(d.lon, d.lat));var x = scrPt.x,y = scrPt.y;heatD.push([x,y,d.count]);}var option ={series : [{type : 'heatmap',data : heatD,opacity:scope.opacity,gradientColors : [{offset : 0.4,color : 'green'},{offset : 0.5,color : 'yellow'},{offset : 0.8,color : 'orange'},{offset : 1,color : 'red'}],minAlpha : 0.2,valueScale : 2}]};myChart.setOption(option);});},destroy : function (){OpenLayers.Layer.Grid.prototype.destroy.apply(this, arguments);},CLASS_NAME : "OpenLayers.Layer.EchartHeatmap"} );前臺調用的代碼如下：<html> <head><meta charset="UTF-8"><title>heatmap.js OpenLayers Heatmap Layer</title><link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css"><style>html, body, #map,#chart{padding:0;margin:0;height:100%;width:100%;overflow: hidden;}#chart{position: absolute;top: 0px;left: 0px;z-index: 900;}</style><script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script><script src="../../../plugin/jquery/jquery-1.8.3.js"></script><script src="../../../plugin/echart/build/dist/echarts.js"></script><script src="extend/echartheatlayer.js"></script><script type="text/javascript">require.config({paths: {echarts: '../../../plugin/echart/build/dist'}});var map;function init(){ var format = 'image/png';var bounds = new OpenLayers.Bounds(73.45100463562233, 18.16324718764174,134.97679764650596, 53.531943152223576);var options = {controls: [],maxExtent: bounds,maxResolution: 0.2403351289487642,projection: "EPSG:4326",units: 'degrees'};map = new OpenLayers.Map('map', options);var wms1 = new OpenLayers.Layer.WMS("base_map","http://localhost:8088/geoserver/lzugis/wms",{layers: "province",transparent: true}, {isBaseLayer: true,singleTile: true});map.addControl(new OpenLayers.Control.Zoom());map.addControl(new OpenLayers.Control.Navigation());var heatmap = new OpenLayers.Layer.EchartHeatmap("heatmap",map,{heatdata:data,opacity:0.8});var wms2 = new OpenLayers.Layer.WMS("base_map","http://localhost:8088/geoserver/lzugis/wms",{layers: "county",transparent: true}, {isBaseLayer: false,singleTile: true,opacity:0.2});map.addLayers([wms1,heatmap,wms2]);map.zoomToExtent(bounds);}</script> </head> <body οnlοad="init()"> <div id="map"> </div> </body> </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)
轉載于:https://www.cnblogs.com/lzugis/p/6539774.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的Echart在Openlayers的应用-热力图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： struts 中的创建Action的三种
- 下一篇： 开发小技巧总结