1、数据加载
数据格式为GeoJSON:
var f={
"geometry": {
"type": "Point",
"coordinates": ol.proj.transform([116.249084, 40.092781], 'EPSG:4326', 'EPSG:3857')
},
"type": "Feature",
"properties": {
"wt1": 20,
"wt2": 50,
"wt3": 30
}
};
基于以上数据构造一个feature,然后将这个feature加载到GeoJSON数据源上
var GeoJson=new ol.format.GeoJSON();
var feature=GeoJson.readFeature(JSON.stringify(f));
var source=new ol.source.GeoJSON({
projection: 'EPSG:3857'
});
source.addFeature(feature);
2、画饼图
var layer=new ol.layer.Vector({
source: source,
style:function(feature, resolution) {
var color = ["#27255F","#2F368F","#3666B0"];
var data = [feature.get("wt1"),feature.get("wt2"),feature.get("wt3")];
var ctx = ol.dom.createCanvasContext2D(60,60);
var startPoint=0;
for(var i=0;i<data.length;i++){
ctx.fillStyle = color[i];
ctx.beginPath();
ctx.moveTo(30,30);
ctx.arc(30,30,30,startPoint,startPoint+Math.PI*2*(data[i]/100),false);
ctx.fill();
startPoint+=Math.PI*2*(data[i]/100);
}
return [new ol.style.Style({image:new ol.style.Icon({src:ctx.canvas.toDataURL()})})];
}
});
ol.dom.createCanvasContext2D(60,60)中的60是指画布的大小,后面的ctx.moveTo(30,30)是相对这个画布来说的,(30,30)就是60X60画布的中心点。
3、饼图随地图缩放
map.on('postrender', function(event) {
var zoom=event.map.getView().getZoom();
if(zoom!=current_zoom){
current_zoom=zoom;
layer.setStyle(function(feature, resolution) {
var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"];
var data = [feature.get("wt1"),feature.get("wt2"),feature.get("wt3")];
var size=current_zoom*7;
var ctx = ol.dom.createCanvasContext2D(size,size);
var startPoint=0;
for(var i=0;i<data.length;i++){
ctx.fillStyle = color[i];
ctx.beginPath();
var center=size/2;
var radius=center;
ctx.moveTo(center,center);
ctx.arc(center,center,radius,startPoint,startPoint+Math.PI*2*(data[i]/100),false);
ctx.fill();
startPoint+=Math.PI*2*(data[i]/100);
}
return [new ol.style.Style({image:new ol.style.Icon({src:ctx.canvas.toDataURL()})})];
});
}
});
4、显示
var raster = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'toner'
})
});
var map=new ol.Map({
layers:[raster,layer],
controls : [new ol.control.ScaleLine()],
view: new ol.View({
center: ol.proj.transform([116.249084, 40.092781], 'EPSG:4326', 'EPSG:3857'),
zoom: 9
}),
target: 'mapdiv'
});
5、参考
- Styling Vector Layers:http://ol3js.org/ol3-workshop/vector-style/style.html
- HTML5绘制饼图实例:http://www.cnblogs.com/happily/archive/2011/11/21/2256826.html