Openlayers 实现点位聚合

getMapData()
function getMapData(){
    RequestGet(SYSTEM_CONFIG.SERVER.LOCAL+'data/testData.json').then(res=>{
        if(res.success) {
            const plantMarkerList = res.data.items
            setTimeout(()=>{
                setCluster(plantMarkerList)
            },2000)
            mapRef.value.on('click',evt=>{
                // const coordinate = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
                let mouse = evt.coordinate // 鼠标点击的坐标位置
                const feature = mapRef.value.forEachFeatureAtPixel(evt.pixel, function(feature) {
                    return feature;
                });
                if (feature) {
                    console.log(feature, 'feature');
                    // 获取count属性
                    const count = feature.get('count');
                    // 聚合点--放大地图层级
                    if (count > 1) {
                        const czoom = mapRef.value.getView().getZoom();
                        mapRef.value.getView().animate({
                            center: evt.coordinate,
                            zoom: czoom + 1
                        });
                        // 具体点位
                    } else {
                        const custom = feature.get('features')[0].get('attribute');
                        if (custom) { // 如果是点击了坐标点
                            // 显示弹出窗口
                            popShow.value = true

                            const object={
                                '名称':custom.dwmc,
                                '年末职工人数':custom.zdmj,
                                '专业技术技能人员数':custom.zyjsjnrys,
                                '年末在院人数':custom.nmzyrs,
                                '机构管理人员数':custom.jgglrys,
                            }
                            dataDetail.value=object
                            detailXY.value=[Number(mouse[0].toFixed(2)),Number(mouse[1].toFixed(2))]
                        } else{
                            mapRef.value.getOverlays().clear()
                        }
                    }
                }
            });
        }
    })
}
// 聚合图层
function setCluster(list){
    // // 随机创建要素
    // var clusterSource = new ol.source.Vector();
    // debugger
    // for (var i = 1; i <= 10; i++) {
    //     var coordinates = [115.51949+ Math.random(), 35.33080 + Math.random()];
    //     console.log(coordinates)
    //     var feature = new ol.Feature(new ol.geom.Point(coordinates));
    //     clusterSource.addFeature(feature);
    // }
    // for (var i = 1; i <= 20; i++) {
    //     var coordinates = [115.53949 + Math.random(), 35.27080 + Math.random()];
    //     console.log(coordinates)
    //     var feature = new ol.Feature(new ol.geom.Point(coordinates));
    //     clusterSource.addFeature(feature);
    // }
    // console.log(clusterSource)
    const count = list.length;
    const features = new Array(count);
    for (let i = 0; i < count; i++) {
        const coordinate =new ol.format.WKT().readGeometry(list[i].xy).flatCoordinates;
        const attr = {
            lnglat: new ol.format.WKT().readGeometry(list[i].xy).flatCoordinates,
            town_name: list[i].gcwz,
        }

        features[i] = new ol.Feature({
            geometry: new ol.geom.Point(coordinate),
            attribute: attr,
        });
    }
    const clusterSource = new ol.source.Vector({
        features: features
    })
    // 聚合图层数
    // 据源
    const clusterSourceForLayer = new ol.source.Cluster({
        source: clusterSource,
        distance: 100
    })
// feature图片
    const base64Img = 'data:image/png;base64,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';
    const clusterLayer = new ol.layer.Vector({
        id:'ccccc',
        source: clusterSourceForLayer,
        style: function (feature) {
            var size = feature.get('features').length;
            if (size == 1) {
                return new ol.style.Style({
                    image: new ol.style.Icon({
                        scale: 0.8,
                        src: base64Img,
                        anchor: [0.48, 0.52]
                    }),
                    text: new ol.style.Text({
                        font: 'normal 12px 黑体',
                        // // 对其方式
                        textAlign: 'center',
                        // 基准线
                        textBaseline: 'middle',
                        offsetY: -35,
                        offsetX: 0,
                        backgroundFill: new ol.style.Stroke({
                            color: 'rgba(0,0,255,0.7)',
                        }),
                        // 文本填充样式
                        fill: new ol.style.Fill({
                            color: 'rgba(236,218,20,1)'
                        }),
                        padding: [5, 5, 5, 5],
                        // text: `霸道的程序猿`,
                    })
                });
            } else {
                return new ol.style.Style({
                    // image: new ol.style.Circle({
                    //     radius: 30,
                    //     stroke: new ol.style.Stroke({
                    //         color: 'white'
                    //     }),
                    //     fill: new ol.style.Fill({
                    //         color: 'blue'
                    //     })
                    // }),
                    image: new ol.style.Icon({
                        scale: 0.8,
                        src: base64Img,
                        anchor: [0.48, 0.52]
                    }),
                    text: new ol.style.Text({
                        text: size.toString(),
                        fill: new ol.style.Fill({
                            color: 'red'
                        })
                    })
                });
            }
        }
    });
    console.log(clusterLayer)
    mapRef.value.addLayer(clusterLayer);
    console.log(mapRef.value)
}