1.5.3.2.18.2 聚点图

AnimatedCluster 是一个提供动态标识聚类功能的 OpenLayers 插件。

下载 AnimatedCluster 插件

1.进入 github 下载 AnimatedCluster，下载地址为：

https://github.com/Viglino/OL3-AnimatedCluster

2.&ltscript&gt标签引入:

<script src="animatedCluster.js"></script>;

var clusterSource = new ol.source.Cluster({
    //聚合点之间的最小距离
    distance: 40,
    source: new ol.source.Vector(),
    //水平不平铺
    wrapX: false
});
//实例化AnimatedCluster插件对象图层类
var clusterLayer = new ol.layer.AnimatedCluster({
    name: 'Cluster',
    source: clusterSource,
    //动画持续时间
    animationDuration: 700,
    //传入下方getStyle函数作为style属性
    style: getStyle
});
map.addLayer(clusterLayer);
//为聚合对象添加要素
function addFeatures(nb) {
    var features = [];
    var xmax = 130, xmin = 80, ymax = 50, ymin = 20;
    for (var i = 0; i < nb; ++i) {
        features[i] = new ol.Feature(new ol.geom.Point([Math.floor(Math.random() * (xmax - xmin + 1) + xmin), Math.floor(Math.random() * (ymax - ymin + 1) + ymin)]));
        features[i].set('id', i);
    }
    clusterSource.getSource().clear();
    clusterSource.getSource().addFeatures(features);
}
addFeatures(2000);
});

根据要素的长度来确定绘制聚点的样式。

function getStyle(feature) {
var styleCache = {};
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
    var color = size > 25 ? "192,0,0" : size > 8 ? "255,128,0" : "0,128,0";
    var radius = Math.max(8, Math.min(size * 0.75, 20));
    var dash = 2 * Math.PI * radius / 6;
    dash = [0, dash, dash, dash, dash, dash, dash];
    style = styleCache[size] = [new ol.style.Style({
        image: new ol.style.Circle({
            radius: radius,
            stroke: new ol.style.Stroke({
                color: "rgba(" + color + ",0.5)",
                width: 15,
                lineDash: dash,
                lineCap: "butt"
            }),
            fill: new ol.style.Fill({
                color: "rgba(" + color + ",1)"
            })
        }),
        text: new ol.style.Text({
            text: size.toString(),
            fill: new ol.style.Fill({
                color: '#fff'
            })
        })
    })
    ];
}
return style;
}

查看完整示例代码