概述：
前天有網友提到了這樣的需求：1、地圖的統計圖展示；2、統計圖的聚類。統計圖的展示非常好理解，但是什麼是統計圖的聚類的？所謂統計圖的聚類是按照地圖等級與數據等級，實現統計圖的分級展示。鑑於此，趁着這個霾天，早起來給這位網友解下惑，並在此marker一下，有相同需求的筒子可以看過來^_^
實現思路：
1、數據組織
因爲是分級，所以，經過一番思考，覺得數據通過樹形的方式來組織是比較方便使用的。
2、地圖展示
地圖展示其實是很簡單的，例如在0-1級，展示第一級數據；在2-4級展示第二級數據；5級以上展示第三級數據，等等。這個分級規則可以按照地圖的世紀情況來確定。
備註：參照代碼理解。
實現效果：
實現代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>openlayers map</title>
<link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
<style>
html, body, #map{
padding:0;
margin:0;
height:100%;
width:100%;
overflow: hidden;
}
.tool{
position: absolute;
top:10pt;
right: 10pt;
padding: 5px;
background: #fff;
border: 1px solid #ff5500;
z-index: 1000;
}
</style>
<script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
<script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
<script src="../../../plugin/highcharts/highcharts.js"></script>
<script>
var chartData = [{name:"中國",x:103.584297498,y:36.1190864503,data:[
{
name: '男',
y: 164.0,
color:"#5ab1ef"
},{
name: '女',
y: 236.0,
color:"#d87a80"
}
],
children:[
{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;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
$(window).load(function() {
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 time = new Date();
time = time.getTime();
var tiled = new OpenLayers.Layer.WMS(
"province", "http://localhost:8088/geoserver/lzugis/wms",
{
"LAYERS": 'province',
"STYLES": '',
format: 'image/png'
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
map.addLayers([tiled]);
map.addControl(new OpenLayers.Control.Navigation());
map.zoomToExtent(bounds);
$("#addchart").on("click",function(){
addMapChart();
map.events.register("zoomend", map, function(){
addMapChart();
});
});
});
function addMapChart(){
$(".olPopup").remove();
var zoom = map.getZoom();
var data = zoom>2?chartData[0].children:chartData;
for(var i=0;i<data.length;i++){
var d = data[i];
var size=120+zoom*8;
var domid = "chart"+i;
var content = "<div class='mapChart' id='"+domid+"' ></div>";
var popup = new OpenLayers.Popup(domid,
new OpenLayers.LonLat(d.x,d.y),
new OpenLayers.Size(size,size),
content,
false);
popup.setBackgroundColor("transparent");
popup.setBorder("0px #0066ff solid");
popup.keepInMap = false;
map.addPopup(popup,false);
addChart(domid,d,size);
}
var pops = $(map.div).find(".olPopup");
for(var i=0;i<pops.length;i++){
var pop = $(pops[i]);
var top = pop.position().top,
left = pop.position().left;
pop.css("top",(top-size/2)+"px").css("left",(left-size/2)+"px");
}
}
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: '<b>{point.percentage:.1f}%</b>'
},
credits:{
enabled:false
},
title: {
text: ''
},
plotOptions:{
pie: {
dataLabels: {
enabled: false
}
}
},
series: [{
type: 'pie',
name: data.name,
data: data.data
}]
});
}
</script>
</head>
<body>
<div id="map">
<div class="tool">
<button id="addchart">添加統計圖</button>
</div>
<div style="display: none;" id="chart">
</div>
</div>
</body>
</html>