如何在openlayers 6中集群不同类型的几何图形？

var vectorSource = new ol.source.Vector();

var point = new ol.geom.Point([0, 0]);
var pointFeature = new ol.Feature(point);

var line = new ol.geom.LineString([[1, 1], [2, 2], [3, 3]]);
var lineFeature = new ol.Feature(line);

vectorSource.addFeatures([pointFeature, lineFeature]);

var clusterSource = new ol.source.Cluster({
  distance: 20, // 聚类的距离
  source: vectorSource // 数据源
});

var styleCache = {}; // 样式缓存

var clusterLayer = 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,
          fill: new ol.style.Fill({
            color: '#ff0000'
          })
        }),
        text: new ol.style.Text({
          text: size.toString(),
          fill: new ol.style.Fill({
            color: '#ffffff'
          })
        })
      });
      styleCache[size] = style;
    }
    return style;
  }
});

// 将聚类图层添加到地图中
map.addLayer(clusterLayer);