Echart在Openlayers的应用-热力图
生活随笔
收集整理的這篇文章主要介紹了
Echart在Openlayers的应用-热力图
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
概述
在前文中，有一篇文章講述了Openlayers2結(jié)合Echart實(shí)現(xiàn)地圖統(tǒng)計(jì)圖，還以一篇文章講述了結(jié)合heatmap.js實(shí)現(xiàn)Openlayers中熱力圖的展示。在本文，書(shū)接前文，講述Openlayers如何結(jié)合Echart實(shí)現(xiàn)熱力圖。
效果
全圖效果
放大效果
實(shí)現(xiàn)
1、關(guān)鍵點(diǎn)
echart實(shí)現(xiàn)heatmap的關(guān)鍵點(diǎn)在與屏幕坐標(biāo)，所以，在地圖中，應(yīng)通過(guò)地理坐標(biāo)到屏幕坐標(biāo)的轉(zhuǎn)換函數(shù)，將地理坐標(biāo)轉(zhuǎn)換為屏幕坐標(biāo)。
2、實(shí)現(xiàn)代碼
我將熱力圖擴(kuò)展成為了一個(gè)openlayers的layer擴(kuò)展，實(shí)現(xiàn)代碼如下：
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"} );前臺(tái)調(diào)用的代碼如下：<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的數(shù)據(jù)格式如下：[{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知識(shí) | 交流GIS經(jīng)驗(yàn) | 分享GIS價(jià)值 | 專(zhuān)注GIS發(fā)展
技術(shù)博客
http://blog.csdn.net/gisshixisheng
在線(xiàn)教程
http://edu.csdn.net/course/detail/799
Github
https://github.com/lzugis/
聯(lián)系方式
q ? ? ? q:1004740957
e-mail:niujp08@qq.com
公眾號(hào):lzugis15
Q Q 群:452117357(webgis)
? ? ? ? ? ? ?337469080(Android)
轉(zhuǎn)載于:https://www.cnblogs.com/lzugis/p/6539774.html
與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的Echart在Openlayers的应用-热力图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： struts 中的创建Action的三种
- 下一篇： 开发小技巧总结