Agrupación de marcadores de un archivo KML en openlayers

Question

¿Existe una forma de agrupar los marcadores dentro de los openlayers como se hace con los leaflets?

Tengo muchos marcadores que muestran los distintos edificios catalogados en Gales y me pregunto si puedo agruparlos y, a continuación, cuando el usuario hace zoom, los grupos se hacen más pequeños hasta que queda un marcador individual. Y luego, al alejar el zoom, los marcadores se reagrupan/agrupan mostrando un grupo con números, como por ejemplo, cuántos marcadores están dentro de una distancia determinada, digamos 10 millas o algo así.

¿Existe también una forma de asegurar que cuando el tamaño de un cluster esté en 1 pueda mostrar el LSMarker ¿es el estilo de la cruz original que se muestra en la imagen de abajo?

Enlace al proyecto actual para que puedas ver a qué me refiero con la necesidad de agrupar datos: https://ces-web2.southwales.ac.uk/students/18018815/mitchtut/giscw2/openlayer.htm

ACTUALIZACIÓN 1 (ESTE PROBLEMA SE HA RESUELTO)
Actualmente se obtiene el error código actual

Uncaught ha {mensaje: "La aserción ha fallado. Ver https://openlayers.org/en/v4.6.5/doc/errors/#58 para más detalles", code: 58, name: "AssertionError"}

ACTUALIZACIÓN 2 Error corregido pero los datos geográficos no se cargan en el área correcta

Código actual

var distance = document.getElementById('distance'); //getting the distance from the slider

<!-- var count = 1000; -->
<!-- var features = new Array(count); //creating an array to hold the amount of features for the cluster -->

<!-- var e = 4000; -->
<!-- for (var i = 0; i<count; i++){ -->
<!-- var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; -->
<!-- features [i] = new ol.Feature(new ol.geom.Point(coordinates)); -->
<!-- } -->

var clusterSource = new ol.source.Cluster({
        distance: parseInt(distance.value,10),
        source: new ol.source.Vector({
                url: 'geoJSON/LSB.kml',
                format: new ol.format.KML({
                extractStyles:false,
            }),
        })
    });

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 ol.style.Fill({
                        colo:'#3399CC'
                    })
                }),
                text: new ol.style.Text({
                    text: size.toString(),
                    fill: new ol.style.Fill({
                        color:'#fff'
                    })
                })
            });

            styleCache[size] = style;
        }
            return style;
    }
});

var raster = new ol.layer.Tile({
    source:new ol.source.OSM()
    });

distance.addEventListener('input', function(){
    clusterSource.setDistance(parseInt(distance.value));
});

//instantiation of the map within the div class 'mapspce'
var Omap = new ol.Map({
    layers:[raster, clusters],
    target:'mapspce',
    view: new ol.View({
        center: ol.proj.transform(cWales,'EPSG:4326','EPSG:3857'),
        zoom: 8
    })
});

Answer 1

Si su fuente KML no está trabajando con una fuente de cluster puede contener características que no son geometría de puntos. Puede añadir un geometryFunction a las opciones de origen de los clústeres para garantizar que sólo se utilicen características puntuales al agrupar:

var clusterSource = new ol.source.Cluster({
        distance: parseInt(distance.value,10),
        geometryFunction: function (feature) {
          var geometry = feature.getGeometry();
          if (geometry.getType() === "Point") {
            return geometry;
          } else if (geometry.getType() === "MultiPoint") {
            return geometry.getPoint(0);
          }
        },
        source: new ol.source.Vector({
                url: 'geoJSON/LSB.kml',
                format: new ol.format.KML({
                extractStyles:false,
            }),
        })
    });

Answer 2

La función de clustering ahora está completa, ya que los datos de coordenadas KML dentro del archivo aparecen como

<MultiGeometry><Point><coordinates>-3.08246357229187,53.2285595916199</coordinates></Point></MultiGeometry>

Con los datos de Multigeometría no se recogen por el folleto ya que debe ser un punto único

//clustering 2 Eletricboogaloo
var distance = document.getElementById('distance');      

var Source = new ol.source.Vector({
            url:'geoJSON/LSB.KML',
            format: new ol.format.KML({
                extractStyles:false
        })
});

var clusterSource = new ol.source.Cluster({
    distance: parseInt(distance.value,10),
    source: Source
});

vector = new ol.layer.Vector({
    source: clusterSource,
    style: LSMarker
});

var raster = new ol.layer.Tile({
    source:new ol.source.OSM()
    });

//instantiation of the map within the div class 'mapspce'
var Omap = new ol.Map({
    layers:[raster, vector],
    target:'mapspce',
    view: new ol.View({
        center: ol.proj.transform(cWales,'EPSG:4326','EPSG:3857'),
        zoom: 8
    })
});

distance.addEventListener('input',function() {
    clusterSource.setDistance(parseInt(distance.value,10));
});