在地图上画饼图(ol3)

最新推荐文章于 2024-11-25 09:18:27 发布

原创最新推荐文章于 2024-11-25 09:18:27 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

GIS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用OpenLayers在地图上动态展示GeoJSON数据，并通过饼图的形式表示数据属性。具体步骤包括数据加载、饼图绘制、实现饼图随地图缩放变化以及最终的地图显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'
});