前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Echart在Openlayers的应用-热力图

Echart在Openlayers的应用-热力图

作者头像
lzugis
发布2018-10-23 12:04:02
2.6K0
发布2018-10-23 12:04:02
举报
文章被收录于专栏:跟牛老师一起学WEBGIS

概述

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

效果

全图效果

放大效果

实现

1、关键点

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

2、实现代码

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

代码语言:javascript
复制
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"
    }
);

前台调用的代码如下:

代码语言:javascript
复制
<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 onload="init()">
<div id="map">
</div>
</body>
</html>

其中,变量data的数据格式如下:

代码语言:javascript
复制
[
  {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},
  ……
]

查看示例

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016年07月25日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档