百度地圖點聚合

對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;