openlayers5之聚合分析图层Cluster

        var map, view, clusterL;
        var styleCache = {};//保存样式
        $(function () {
            clusterL = new ol.layer.Vector({
                source: new ol.source.Cluster({//聚合source
                    distance: 20,
                    source: new ol.source.Vector({//矢量数据源source
                        url: '../data/kml/2012_Earthquakes_Mag5.kml',
                        format: new ol.format.KML({
                            extractStyles: false
                        })
                    })
                }),
                style: function (feature) {
                    //聚合的样式可以根据属性自定义
                    var features = feature.get('features');//当前聚合的所有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 ol.style.Fill({
                                    color: '#3399CC'
                                })
                            }),
                            text: new ol.style.Text({
                                text: size.toString(),
                                fill: new ol.style.Fill({
                                    color: '#fff'
                                })
                            })
                        });
                        styleCache[size] = style;
                    }
                    return style;
                }
            }),
            view = new ol.View({
                center: [0, 0],
                zoom: 2
            });
            map = new ol.Map({
                layers: [
                     new ol.layer.Tile({
                         source: new ol.source.OSM()
                     }),
                     clusterL
                ],
                target: 'map',
                view:view
            })
        })

注：有问题请留言

代码下载

链接:  https://pan.baidu.com/s/1nGGShcxoMlIyfSc2d2i1zA密码: pvxu