天天看点
返回

自定义饼图layer(ol3)

goog.provide('ol.layer.PieChart');

goog.require('goog.asserts');
goog.require('goog.events');
goog.require('goog.math');
goog.require('ol.Object');
goog.require('ol.dom');
goog.require('ol.layer.Vector');
goog.require('ol.render.EventType');
goog.require('ol.style.Icon');
goog.require('ol.style.Style');

/**
 *
 * @type {{COLORS: string, RADIUS: string}}
 * COLORS:颜色数组
 * RADIUS:饼图半径
 */
ol.layer.PieChartProperty = {
    COLORS: 'colors',
    RADIUS: 'radius'
};

ol.layer.PieChart = function(opt_options) {
    var options = goog.isDef(opt_options) ? opt_options : {};
    goog.base(this, /** @type {olx.layer.VectorOptions} */ (options));

    this.setColors(goog.isDef(options.colors) ?
        options.colors : ol.layer.PieChart.DEFAULT_COLORS);

    this.setRadius(goog.isDef(options.radius) ?
        options.radius : ol.layer.PieChart.DEFAULT_RADIUS);

    var clrs=this.getColors();
    var rdus=this.getRadius();

    this.setStyle(function(feature, resolution) {
        var colors=clrs;
        var wts=feature.get("weights");
        var radius=rdus;
        var ctx = ol.dom.createCanvasContext2D(radius*2,radius*2);
        var startPoint=0;
        for(var i=0;i<wts.length;i++){
            ctx.fillStyle = colors[i];
            ctx.beginPath();
            ctx.moveTo(radius,radius);
            ctx.arc(radius,radius,radius,startPoint,startPoint+Math.PI*2*(wts[i]/100),false);
            ctx.fill();
            startPoint+=Math.PI*2*(wts[i]/100);
        }
        return [new ol.style.Style({image:new ol.style.Icon({src:ctx.canvas.toDataURL()})})];
    });
};
goog.inherits(ol.layer.PieChart, ol.layer.Vector);

ol.layer.PieChart.DEFAULT_COLORS = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6","#A5CA64","#7C9158","#C8F874","#90E003","#F0E608"];

ol.layer.PieChart.DEFAULT_RADIUS = 30;

/*colors settings*/
ol.layer.PieChart.prototype.getColors = function() {
    return /** @type {Array.<string>} */ (
        this.get(ol.layer.PieChartProperty.COLORS));
};
goog.exportProperty(
    ol.layer.PieChart.prototype,
    'getColors',
    ol.layer.PieChart.prototype.getColors);

ol.layer.PieChart.prototype.setColors = function(colors) {
    this.set(ol.layer.PieChartProperty.COLORS, colors);
};
goog.exportProperty(
    ol.layer.PieChart.prototype,
    'setColors',
    ol.layer.PieChart.prototype.setColors);
/*colors settings*/

/*radius settings*/
ol.layer.PieChart.prototype.getRadius = function() {
    return /** @type {Array.<string>} */ (
        this.get(ol.layer.PieChartProperty.RADIUS));
};
goog.exportProperty(
    ol.layer.PieChart.prototype,
    'getRadius',
    ol.layer.PieChart.prototype.getRadius);


ol.layer.PieChart.prototype.setRadius = function(radius) {
    this.set(ol.layer.PieChartProperty.RADIUS, radius);
};
goog.exportProperty(
    ol.layer.PieChart.prototype,
    'setRadius',
    ol.layer.PieChart.prototype.setRadius);
/*radius settings*/

使用

<!DOCTYPE html>
<html>
<head >
    <meta charset="UTF-8">
    <link rel="stylesheet" href="ol3/ol.css" target="_blank" rel="external nofollow" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" target="_blank" rel="external nofollow" />
    <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="ol3/ol-whitespace.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //var f={"geometry": {'type': 'LineString','coordinates': [[4e6, -2e6], [5e6, -1e6]]}, "type": "Feature", "properties": {"weight": 1,"tips":"hello world"}};

            var f1={
                "geometry": {
                    "type": "Point",
                    "coordinates":  ol.proj.transform([116.249084, 40.092781], 'EPSG:4326', 'EPSG:3857')
                },
                "type": "Feature",
                "properties": {
                    "weights":[20,30,40,10]
                }
            };

            var f2={
                "geometry": {
                    "type": "Point",
                    "coordinates":  ol.proj.transform([116.442611, 39.960807], 'EPSG:4326', 'EPSG:3857')
                },
                "type": "Feature",
                "properties": {
                    "weights":[10,60,30]
                }
            };

            var f3={
                "geometry": {
                    "type": "Point",
                    "coordinates":  ol.proj.transform([116.321075, 39.928168], 'EPSG:4326', 'EPSG:3857')
                },
                "type": "Feature",
                "properties": {
                    "weights":[40,60]
                }
            };

            var f4={
                "geometry": {
                    "type": "Point",
                    "coordinates":  ol.proj.transform([116.406219, 39.891299], 'EPSG:4326', 'EPSG:3857')
                },
                "type": "Feature",
                "properties": {
                    "weights":[30,30,30,10]
                }
            };

            var GeoJson=new ol.format.GeoJSON();

            var source=new ol.source.GeoJSON({
                projection: 'EPSG:3857'
            });

            var feature=GeoJson.readFeature(JSON.stringify(f1));
            source.addFeature(feature);

            feature=GeoJson.readFeature(JSON.stringify(f2));
            source.addFeature(feature);

            feature=GeoJson.readFeature(JSON.stringify(f3));
            source.addFeature(feature);

            feature=GeoJson.readFeature(JSON.stringify(f4));
            source.addFeature(feature);

            var raster = new ol.layer.Tile({
                source: new ol.source.Stamen({
                    layer: 'toner'
                })
            });

            var layer=new ol.layer.PieChart({
                source: source,
                radius:30
            });

            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: 11
                }),
                target: 'mapdiv'
            });
        });
    </script>
</head>
<body>
    <div id="mapdiv"></div>
</body>
</html>

实现上参考ol.layer.HeatMap

前端
上一篇: mysql create procedure_MySQL创建存储过程（CREATE PROCEDURE）
下一篇: HMACSha1加密方法

继续阅读