Openlayers 5.0 discrete aggregation points

import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Fill, RegularShape, Stroke, Style} from 'ol/style.js';
import Icon from 'ol/style/Icon.js'
import Vectorlayer from 'ol/layer/Vector.js'
import Feature from 'ol/Feature.js'
import Vector from "ol/source/Vector";
import Cluster from "ol/source/Cluster";
import Circle from "ol/style/Circle";
import Text from "ol/style/Text";
    /* Discrete aggregation point 1*/
static createLayer(){
    webgissource.clusterpointdate = new Vector();
    webgissource.clusterSource  = new Cluster({
      distance:40,
      source: webgissource.clusterpointdate
    });
    var styleCache = {};
    webgissource.clusterVectorLayer  = new Vectorlayer({
      source: webgissource.clusterSource,
      zIndex:999,
      style: function (feature, resolution) {
        // The feature size of the current aggregate dimension data source 
        var size = parseInt(feature.get('features').length);
        // Definition of style 
        var style = styleCache[size];
        // Create if the current style does not exist 
        // if(0<size && size<=5){
        //   var src="static/img/ld1.png"
        // }else if(5<size && size<=10){
        //   var src="static/img/ld2.png"
        // }else if(10<size && size<=15){
        //   var src="static/img/ld3.png"
        // }else if(15<size && size<=20){
        //   var src="static/img/ld4.png"
        // }else if(20<size ){
        //   var src="static/img/ld5.png"
        // }
        if(map.getView().getZoom()==17){
          style = [
            // Initialize style 
            new Style({
              // Point style 
              fill: new Fill({
                color: 'rgba(0,225,255,0.1)'
              }),
              stroke: new Stroke({
                color: '#00e1ff',
                width: 3
              }),
              image: new Circle({
                radius: 6,
                fill: new Fill({
                  color: '#4271ff'
                })
              }),
              // image: new Circle({
              //   radius: 8,
              //   fill: new Fill({
              //     color: 'rgb(0,155,29)'
              //   })
              // })
            })
          ];
          styleCache[size] = style;
        }else{
          //if (!style) {
          style = [
            // Initialize style 
            new Style({
              // Point style 
              fill: new Fill({
                color: 'rgba(0,225,255,0.1)'
              }),
              stroke: new Stroke({
                color: '#00e1ff',
                width: 3
              }),
              image: new Circle({
                radius: size==1?6:14,
                fill: new Fill({
                  color: '#4863ff'
                })
              }),
              // Text style 
              text: new Text({
                // Text content 
                text: size==1?"":size.toString(),
                // fill 
                font: '14px',
                fill: new Fill({
                  color: 'rgb(255,255,255)'
                }),
                offsetY: 0,

              })
            })
          ];
          styleCache[size] = style;
          //}
        }
        return style;
      }
    });
    map.addLayer(webgissource.clusterVectorLayer)
  }
  static clusterVectorLayer(data){
    var points=new Point([x,y]);
    var iconFeature = new Feature({
      geometry:points,
      attributions:data
    })
   webgissource.clusterpointdate.addFeature(iconFeature)
 }