概述:
在前文中讲到了在arcgis for js中统计图的实现,在本文,讲述在openlayers3中结合highcharts实现统计图。
实现:
在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++){>