·················································二更······························································
始终觉得百度的聚合插件很卡，后来发现点多了之后相当吃内存。所以最终还是放弃百度地图插件，将里面核心的东西提出来，重新写了个简版的。

/** 
 * @namespace BMap的所有library类均放在BMapLib命名空间下
 */
var BMapLib = window.BMapLib = BMapLib || {};
(function() {
    var rootMap;
    var rootGridSize;
    var rootMinClusterSize;
    var rootMapOverlays = [];
    var rootIsAverageCenter;
    /**
     * 获取一个扩展的视图范围，把上下左右都扩大一样的像素值。
     * @param {Map} map BMap.Map的实例化对象
     * @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
     * @param {Number} gridSize 要扩大的像素值
     *
     * @return {BMap.Bounds} 返回扩大后的视图范围。
     */
    var getExtendedBounds = function(bounds) {
        bounds = cutBoundsInRange(bounds);
        var pixelNE = rootMap.pointToPixel(bounds.getNorthEast());
        var pixelSW = rootMap.pointToPixel(bounds.getSouthWest());
        pixelNE.x += rootGridSize;
        pixelNE.y -= rootGridSize;
        pixelSW.x -= rootGridSize;
        pixelSW.y += rootGridSize;
        var newNE = rootMap.pixelToPoint(pixelNE);
        var newSW = rootMap.pixelToPoint(pixelSW);
        return new BMap.Bounds(newSW, newNE);
    };

    /**
     * 按照百度地图支持的世界范围对bounds进行边界处理
     * @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
     *
     * @return {BMap.Bounds} 返回不越界的视图范围
     */
    var cutBoundsInRange = function(bounds) {
        var minX = getRange(bounds[0], -180, 180);
        var maxX = getRange(bounds[1], -180, 180);
        var minY = getRange(bounds[2], -74, 74);
        var maxY = getRange(bounds[3], -74, 74);

        return new BMap.Bounds(new BMap.Point(minX, minY), new BMap.Point(maxX, maxY));
    };
    /**
     * 紫 红 橙 黄 蓝 绿  单个
     */
    var getStylesBylength = function(len) {
        var style = {
            'cursor': 'pointer',
            'padding': 0,
            'max-width': 'inherit',
            'margin-bottom': 0,
            'border': 0,
            'color': '#fff',
            'font-size': '0.8em',
            'border-radius': '50%',
            'text-align': 'center',
            'box-shadow': '0 0 8px 2px RGBa(135, 185, 255, 0.5), 0 0 8px 2px RGBa(135, 185, 255, 0.5) inset',
        };
        var color = '';
        var size = '';
        if (len == 1) {} else if (len < 100) {
            color = 'rgba(24,150,3, 0.6)';
            size = '28px';
        } else if (len < 500) {
            color = 'rgba(13, 141, 181, 0.6)';
            size = '28px';
        } else if (len < 1000) {
            color = 'rgba(255,255,0, 0.6)';
            size = '28px';
        } else if (len < 5000) {
            color = 'rgba(255, 165,0, 0.6)';
            size = '35px';
        } else if (len < 50000) {
            color = 'rgba(247, 9, 9, 0.6)';
            size = '40px';
        } else {
            color = 'rgba(183,0,255, 0.6)';
            size = '40px';
        }
        style['background-color'] = color;
        style['width'] = size;
        style['height'] = size;
        style['line-height'] = size;
        return style;
    };

    /**
     * 对单个值进行边界处理。
     * @param {Number} i 要处理的数值
     * @param {Number} min 下边界值
     * @param {Number} max 上边界值
     * 
     * @return {Number} 返回不越界的数值
     */
    var getRange = function(i, mix, max) {
        mix && (i = Math.max(i, mix));
        max && (i = Math.min(i, max));
        return i;
    };
    /**
     *@exports MarkerClusterer as BMapLib.MarkerClusterer
     */
    var MarkerClusterer =
        /**
         * MarkerClusterer
         * @class 用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能
         * @constructor
         * @param {Map} map 地图的一个实例。
         * @param {Json Object} options 可选参数，可选项包括：<br />
         *    markers {Array<Marker>} 要聚合的标记数组<br />
         *    girdSize {Number} 聚合计算时网格的像素大小，默认60<br />
         *    maxZoom {Number} 最大的聚合级别，大于该级别就不进行相应的聚合<br />
         *    minClusterSize {Number} 最小的聚合数量，小于该数量的不能成为一个聚合，默认为2<br />
         *    isAverangeCenter {Boolean} 聚合点的落脚位置是否是所有聚合在内点的平均值，默认为否，落脚在聚合内的第一个点<br />
         *    styles {Array<IconStyle>} 自定义聚合后的图标风格，请参考TextIconOverlay类<br />
         */
        BMapLib.MarkerClusterer = function(map, options) {
            if (!map) {
                return;
            }
            rootMap = map;
            this._markers = [];
            this._clusters = [];

            var opts = options || {};
            rootGridSize = opts["gridSize"] || 2000 / map.getZoom();
            rootMinClusterSize = opts["minClusterSize"] || 2;
            rootIsAverageCenter = true;
            if (opts['isAverageCenter'] != undefined) {
                rootIsAverageCenter = opts['isAverageCenter'];
            }
            this._styles = opts["styles"] || [];
            var that = this;
            var mkrs = opts["markers"];
            rootMap.addEventListener("zoomend", function(lv) {
                let lvl = lv.target.getZoom();
                rootGridSize = 2000 / lvl;
                that._redraw2();
            });
            rootMap.addEventListener("moveend", function() {
                that._redraw2();
            });
            this._markers = mkrs;
            this.addMarkers2();
        };


    MarkerClusterer.prototype.addMarkers2 = function() {
        var mapBounds = rootMap.getBounds();
        var x_min = mapBounds.Le,
            x_max = mapBounds.Ge,
            y_min = mapBounds.Wd,
            y_max = mapBounds.Ud;
        //遍历排除不在屏幕范围的点
        let tMks = [];
        for (let index = 0, mk; mk = this._markers[index]; index++) {
            if (mk) {
                if (mk[0] <= x_max && mk[0] >= x_min && mk[1] >= y_min && mk[1] <= y_max)
                    tMks.push(mk);
            }
        }
        for (var j = 0, mk; mk = tMks[j]; j++) {
            this._addToClosestCluster2(mk)
        }
        //开始渲染  
        for (var i = 0, cls; cls = this._clusters[i]; i++) {
            if (cls) {
                cls.render();
            }
        }
    }
    MarkerClusterer.prototype._addToClosestCluster2 = function(mk) {
        var dis2 = 32400,
            d1 = 0,
            d2 = 0,
            d = 0;
        var cluster = null;
        for (let i = 0, clus; clus = this._clusters[i]; i++) {
            var c = clus.center; //[lng,lat]
            d1 = c[0] - mk[0];
            d2 = c[1] - mk[1];
            d = d1 * d1 + d2 * d2;
            if (d < dis2) {
                dis2 = d;
                cluster = clus;
            }
        }
        if (cluster && cluster.isMarkerInClusterBounds(mk)) {
            cluster.addMk(mk)
        } else {
            var clustera = new Cluster2(this);
            clustera.addMk(mk);
            this._clusters.push(clustera);
        }
    };
    MarkerClusterer.prototype._redraw2 = function() {
        this.clear();
        this.addMarkers2();
    };
    MarkerClusterer.prototype.clear = function() {
        rootMapOverlays.forEach(ol => {
            rootMap.removeOverlay(ol);
        })
        for (var i = 0, cluster; cluster = this._clusters[i]; i++) {
            cluster.mks = [];
            cluster.center = null;
            cluster._gridBounds = [];
        }
        this._clusters = []; //置空Cluster数组
    };

    function Cluster2() {
        this.center = null; //聚合图标的落脚点 ，目前是假的center
        this.mks = [];
        this._gridBounds = [];
    }
    Cluster2.prototype.render = function() {
        var len = this.mks.length;
        if (len < rootMinClusterSize) {
            for (var j = 0; j < len; j++) {
                let pt = new BMap.Point(this.mks[j][0], this.mks[j][1]);
                let marker = new BMap.Marker(pt);
                rootMap.addOverlay(marker);
                rootMapOverlays.push(marker);
            }
        } else {
            if (rootIsAverageCenter) {
                var lngLat = this.mks.reduce((s, i) => {
                    s[0] = s[0] + i[0];
                    s[1] = s[1] + i[1];
                    return s;
                }, [0, 0]);
                var lng = lngLat[0] / len;
                var lat = lngLat[1] / len;
                this.center = [lng, lat];
                this.updateGridBounds(this.center);
            }
            var clusterMarker = new BMap.Label(len, {
                position: new BMap.Point(this.center[0], this.center[1]), // 指定文本标注所在的地理位置
                offset: new BMap.Size(0, -3) //设置文本偏移量
            }); // 创建文本标注对象
            clusterMarker.setStyle(getStylesBylength(len));
            rootMap.addOverlay(clusterMarker);
            rootMapOverlays.push(clusterMarker);
            var that = this;
            clusterMarker.addEventListener('click', (a) => {
                var b = that._gridBounds;
                rootMap.setViewport(b);
            });
        }
    };
    Cluster2.prototype.addMk = function(mk) {
        if (!this.center) {
            //处理第一个点的情况
            this.center = mk;
            this.updateGridBounds(mk); //
        } else {
            // if (rootIsAverageCenter) {
            //     var l = this.mks.length + 1;
            //     var lat = (this.center[1] * (l - 1) + mk[1]) / l;
            //     var lng = (this.center[0] * (l - 1) + mk[0]) / l;
            //     this.center = [lng, lat];
            //     this.updateGridBounds(this.center);
            // }
        }
        this.mks.push(mk);
    }
    Cluster2.prototype.updateGridBounds = function(mk) {
        this._gridBounds = getExtendedBounds([mk[0], mk[0], mk[1], mk[1]]);
    }
    Cluster2.prototype.isMarkerInClusterBounds = function(mk) {
        return mk[0] <= this._gridBounds.Ge && mk[0] >= this._gridBounds.Le &&
            mk[1] >= this._gridBounds.Wd && mk[1] <= this._gridBounds.Ud;
    };
})();

效果还是可以比较快。

image.png