Openlayers3中统计图的实现

概述：

在前文中讲到了在arcgis for js中统计图的实现，在本文，讲述在openlayers3中结合highcharts实现统计图。

实现：

在openlayers3中实现统计图比较方便，通过ol.overlay即可。首先，了解下overlay。在ol3的借口文档中，overlay的描述如下：

an element to be displayed over the map and attached to a single map location。

大概意思就是一个有空间位置的可以在地图上展示的要素。

关键代码：

 

			$("#addchart").on("click",function(){
				for(var i=0;i

		function addchart(domid,data,size){
			$('#'+domid).highcharts({
				chart: {
					backgroundcolor: 'rgba(255, 255, 255, 0)',
					plotbordercolor: null,
					plotbackgroundcolor: null,
					plotbackgroundimage: null,
					plotborderwidth: null,
					plotshadow: false,
					width: size,
					height: size
				},
				tooltip: {
					pointformat: '{point.percentage:.1f}%'
				},
				credits:{
					enabled:false
				},
				title: {
					text: ''
				},
				plotoptions:{
					pie: {
						datalabels: {
							enabled: false
						}
					}
				},
				series: [{
					type: 'pie',
					name: data.name,
					data: data.data
				}]
			});
		}

上述代码运行后的效果如下：

 

上述示例的完整代码如下：

 

<script type="text/javascript" src="../../../plugin/ol3/build/ol-debug.js"></script><script type="text/javascript" src="../../../plugin/jquery/jquery-1.8.3.js"></script><script src="../../../plugin/highcharts/highcharts.js"></script><script type="text/javascript"> var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,data:[ { name: '男', y: 40.0, color:"#5ab1ef" },{ name: '女', y: 60.0, color:"#d87a80" } ]}, {name:"拉萨",x:91.1629975040,y:29.7104204643,data:[ { name: '男', y: 45.0, color:"#5ab1ef" },{ name: '女', y: 55.0, color:"#d87a80" } ]}, {name:"北京",x:116.4575803581078,y:40.04054437977018,data:[ { name: '男', y: 35.0, color:"#5ab1ef" },{ name: '女', y: 65.0, color:"#d87a80" } ]}, {name:"兰州",x:103.584297498,y:36.1190864503,data:[ { name: '男', y: 44.0, color:"#5ab1ef" },{ name: '女', y: 56.0, color:"#d87a80" } ]}]; var map; function init(){ var format = 'image/png'; var bounds = [73.4510046356223, 18.1632471876417, 134.976797646506, 53.5319431522236]; var tiled = new ol.layer.tile({ visible: true, source: new ol.source.tilewms({ url: 'https://localhost:8088/geoserver/lzugis/wms', params: {'format': format, 'version': '1.1.1', tiled: true, layers: 'lzugis:province', styles: '' } }) }); var projection = new ol.proj.projection({ code: 'epsg:4326', units: 'degrees' }); map = new ol.map({ controls: ol.control.defaults({ attribution: false }), target: 'map', layers: [ tiled ], view: new ol.view({ projection: projection }) }); map.getview().fitextent(bounds, map.getsize()); var view =map.getview(); $("#addchart").on("click",function(){ for(var i=0;i;i++){>

"); var chart=new ol.overlay({ position: pt, positioning: ol.overlaypositioning.center_center, element: document.getelementbyid(domid) }); map.addoverlay(chart); addchart(domid,d,100); } }); } function addchart(domid,data,size){ $('#'+domid).highcharts({ chart: { backgroundcolor: 'rgba(255, 255, 255, 0)', plotbordercolor: null, plotbackgroundcolor: null, plotbackgroundimage: null, plotborderwidth: null, plotshadow: false, width: size, height: size }, tooltip: { pointformat: '{point.percentage:.1f}%' }, credits:{ enabled:false }, title: { text: '' }, plotoptions:{ pie: { datalabels: { enabled: false } } }, series: [{ type: 'pie', name: data.name, data: data.data }] }); } </script>

添加统计图

 

;i++){>