title: MarkerClusters in OpenLayer 6.3.1 with WMS as source
body: <p>I am using OpenLayer version 6.3.1 and would like to know how to do a MarkerClusters using WMS data source.</p>
  <p>My problem is that I don't know how to link the Cluster with WMS. the WMS source is a point.shp (geometrically)</p>
  <p>I tried to replace the cluster sources by the WMS one, but it doesn't work.</p>
  <p>Here is my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ImageWMS = new ImageWMS({  
    url: 'http://localhost:8080/geoserver/ACCESSOINSMADA/wms',  
       params: {'LAYERS': 'ACCESSOINSMADA:csb2-pub', 'TILED': true},
       serverType: 'geoserver',
       transition: 0,
     
  });
  var ImageLayers = new ImageLayer({
      source: ImageWMS,
  })
  
  var distance = document.getElementById('distance');
  
  var count = 20000;
  var features = new Array(count);
  var e = 3500000;
  for (var i = 0; i &lt; count; ++i) {
    var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
    features[i] = new Feature(new Point(coordinates));
  }
  
  var source = new VectorSource({
    features: features,
  });
  
  var clusterSource = new Cluster({
    distance: parseInt(distance.value, 10),
    source: source,
  });
  
  var styleCache = {};
  var clusters = new VectorLayer({
    source: clusterSource,
    style: function (feature) {
      var size = feature.get('features').length;
      var style = styleCache[size];
      if (!style) {
        style = new Style({
          image: new CircleStyle({
            radius: 10,
            stroke: new Stroke({
              color: '#fff',
            }),
            fill: new Fill({
              color: '#3399CC',
            }),
          }),
          text: new Text({
            text: size.toString(),
            fill: new Fill({
              color: '#fff',
            }),
          }),
        });
        styleCache[size] = style;
      }
      return style;
    },
  });</code></pre>
  </div>
  </div>
  </p>