Openlayers根据geojson格式数据渲染聚合图

Openlayers根据geojson格式数据渲染聚合图

Openlayers官网给出两个聚合图的样例：

1. 根据随机生成坐标点展示成为聚合图
2. 根据kml地震数据熏染成聚合图，可以在地图上点击交互

geojson作为webGIS较常用的数据格式，没有给定如何将geojson格式渲染为聚合图的示例，因此本文将Openlayers官网提供的geojson格式数据加载示例与聚合图渲染示例结合，形成根据geojson格式数据渲染聚合图的示例。

聚合图图层结构

var source = new ol.source.Vector({
     //聚合图内层源
	features: features //聚合的要素
});

var clusterSource = new ol.source.Cluster({
    //聚合图源
    distance: parseInt(distance.value, 10), // 设置聚合圆间的最小距离. 默认20.
    source: source
});

var styleCache = {
   };
var clusters = new ol.layer.Vector({
    
	source: clusterSource,
    style: function(feature) {
    //图层样式
        var size = feature.get('features').length; // 获取当前要素所在的要素集合长度
        var style = styleCache[size];
        if (!style) {
   
            style = new ol.style.Style({
   
                image: new ol.style.Circle({
    // 聚合圆样式设置
                	radius: 10,
                    stroke: new ol.style.Stroke({
   
                        color: '#fff'
                    }),
                    fill: new