百度地图点聚合

对MarkerClusterer进行封装，在不修改源码的基础上，实现聚合点的点击事件，取消默认行为.阅读源码后，发现聚合的渲染主要再updateClusterMarker中实现，因此只要再每次聚合完成之后再次进行对应处理，即可实现自定义的效果。

/*
 * 自定义的聚合，实现聚合点的点击事件
 */
class MarkerClusterManager {
    constructor(map, option = {}) {
        // 因为需要对markers进行特殊处理，所以从参数中提取出来
        const {markers = [], ...extra} = option;
        // 添加默认的聚合样式
        extra.styles = option.styles || [
            {
                url: "http://api.map.baidu.com/library/TextIconOverlay/1.2/src/images/m2.png",
                size: new BMap.Size(53, 53)
            }
        ];
        this.instance = new BMapLib.MarkerClusterer(map, extra);
        const that = this;
        this._map = map;
        map.addEventListener('zoomend', function() {
            that.adjustCluster();
        });
        map.addEventListener('moveend', function() {
            that.adjustCluster();
        });
        if (markers.length > 0) this.reAddMarkers(markers);
    }

    __initState(markers) {
        this.instance.clearMarkers();
        this._markers = markers;
        this._markerLabels = markers.map(marker => marker.getLabel());
    }

    __firstLayout() {
        const markers = this._markers;
        this.instance.addMarkers(markers);
        this.adjustCluster();
        // 第一次添加点
        this._map.setViewport(markers.map(m=>m.getPosition()))
    }

    __showLable(markers) {
        markers.forEach(marker => {
            const index = this._markers.indexOf(marker);
            // 判断是否存在label
            const label = this._markerLabels[index];
            if (label) marker.setLabel(label);
        })
    }

    adjustCluster() {
        /**
         * 调整源文件的updateClusterMarker方式， 实现更新
         */
        /**
         * 这里不需要再次聚合，因为执行到这里，聚合已经完成
         * const markers = this._markers;
         * this.instance.addMarkers(markers);
         */
        // 聚合完成之后处理聚合点
        const clusters = this.instance._clusters;
        console.log(clusters.length);
        // console.log(clusters.length);
        clusters.forEach((cluster) => {
            /**
             * 默认的聚合marker的点击事件和项目冲突，所以重新创建一个TextIconOverlay
             * 聚合点_clusterMarker是一个TextIconOverlay
             */
            cluster._map.removeOverlay(cluster._clusterMarker);
            cluster._clusterMarker = new BMapLib.TextIconOverlay(cluster._center, cluster._markers.length, {"styles":cluster._markerClusterer.getStyles()});
            cluster._map.addOverlay(cluster._clusterMarker);
            if (cluster._map.getZoom() > cluster._markerClusterer.getMaxZoom()) {
                // 地图缩放级别大于聚合最大级别， 显示marker, 因为label会被清空，所以取缓存，重新绘制
                cluster._clusterMarker && cluster._map.removeOverlay(cluster._clusterMarker);
                this.__showLable(cluster._markers);
                return;
            }
    
            if (cluster._markers.length < cluster._minClusterSize) {
                // 小于最小聚合数量的时候，隐藏聚合marker
                cluster._clusterMarker.hide();
                this.__showLable(cluster._markers);
                return;
            }
    
            cluster._clusterMarker.setPosition(cluster._center);
            cluster._clusterMarker.setText(cluster._markers.length);
            // 聚合点实现聚合点的特定事件
            cluster._clusterMarker.addEventListener('click', function() {
                console.log(cluster._markers.length);
            })
        })
    }

    reAddMarkers(markers) {
        this.__initState(markers);
        this.__firstLayout();
    }
}

export default MarkerClusterManager;