OpenLayers的点聚合

import Map from 'ol/Map'
import View from 'ol/View'
import Feature from 'ol/Feature'
import TileLayer from 'ol/layer/Tile'
import Point from 'ol/geom/Point'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import Style from 'ol/style/Style'
import FillStyle from 'ol/style/Fill'
import StrokeStyle from 'ol/style/Stroke'
import CircleStyle from 'ol/style/Circle'
import Cluster from 'ol/source/Cluster'
import Text from 'ol/style/Text'
import Icon from 'ol/style/Icon'
initMap() {
      const self = this
      var url = process.env.VUE_APP_MAP_SERVER
      /*var attribution =
        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> "*/
      map = new Map({
        target: 'amap',
        //        controls: control.defaults({ attributionOptions: { collapsed: false } }).extend([new Logo()]),
        view: new View({
          center: [103, 30],
          zoom: 4,
          projection: 'EPSG:4326'
        })
      })

      var layer = new TileLayer({
        className: 'blueLayer',
        source: new TileSuperMapRest({
          url: url,
          wrapX: true
        }),
        projection: 'EPSG:4326'
      })
      map.addLayer(layer)
      
     // 下面的双引号自己去掉下

      // clusterSource = new Cluster({
      //   distance: 40,
      //   source: new VectorSource(),
      //   wrapX: false
      // })

      // const clusters = new VectorLayer({
      //   source: clusterSource,
      //   animationDuration: 700,
      //   zoom: 6,
      //   style: getStyle
      // })
      // map.addLayer(clusters)

      // function getStyle(feature) {
      //   var styleCache = {}
      //   var size = feature.get('features').length
      //   var style = styleCache[size]
      //   if (!style) {
      //     var color = size > 25 ? '192,0,0' : size > 8 ? '255,128,0' : '0,128,0'
      //     var radius = Math.max(8, Math.min(size * 0.75, 20))
      //     var dash = (2 * Math.PI * radius) / 6
      //     dash = [0, dash, dash, dash, dash, dash, dash]
      //     if (size !== 1) {
      //       style = styleCache[size] = [
      //         new Style({
      //           image: new CircleStyle({
      //             radius: radius,
      //             stroke: new StrokeStyle({
      //               color: 'rgba(' + color + ',0.5)',
      //               width: 15,
      //               lineDash: dash,
      //               lineCap: 'butt'
      //             }),
      //             fill: new FillStyle({
      //               color: 'rgba(' + color + ',1)'
      //             })
      //           }),
      //           text: new Text({
      //             text: size.toString(),
      //             fill: new FillStyle({
      //               color: '#fff'
      //             })
      //           })
      //         })
      //       ]
      //     } else {
      //       const data = feature.get('features')?.[0]?.get('data')
      //       const type = data?.['type']
      //       const code = data?.['code']
      //       const currItem = _.find(self.list, (item) => item.stationCode == code)
      //       const type2 = currItem?.type || 0
      //       style = styleCache[1] = [
      //         new Style({
      //           image: new Icon({
      //             src: require(`./_imgs/type${type}${type2}.png`), // 图标的路径
                scale: 1 // 图标缩放
              })
              })
           ]
         }
      }
       return style
       }
   
      this.fetMapStaion()

    
      map.on('click', (event) => {
        var feature = map.forEachFeatureAtPixel(event.pixel, function (feature) {
          return feature
        })

        if (feature?.values_?.features?.length === 1) {
          const data = feature?.values_?.features?.[0]?.get('data')
          self.$refs.view?.openDialog(data)
        }

        // if (feature) {
        //   popup.setPosition(event.coordinate)
        // }
      })
    },
    
     this.$get('/server/station/getSimpleList', this.query).then(({ data }) => {
        this.stationData = data
        if (data.length === 0) return
        let features = _.map(data, (item) => {
          let marker = new Feature({
            geometry: new Point([Number(item?.longitude), Number(item?.latitude)])
          })
          marker.setId(item.id)
          marker.set('data', item)

          const type = item?.type
          const code = item?.code

          const currItem = _.find(this.list, (item) => item.stationCode == code)

          const type2 = currItem?.type || 0

          marker.setStyle(
            new Style({
              //形状
              image: new Icon({
                src: require(`./_imgs/type${type}${type2}.png`), // 图标的路径
                scale: 1 // 图标缩放
              })
            })
          )
          return marker
        })
        const list = _.filter(
          features,
          (item) => _.isNumber(Number(item.longitude)) && _.isNumber(Number(item.latitude))
        )

        clusterSource.getSource().clear()
        clusterSource.getSource().addFeatures(list)
      })
    
    ```