百度地图大量点聚合js源码分析

百度地图中的点聚合主要有两个文件一个控制聚合即MarkerClusterer.js,一个控制显示的样子TextIconOverlay.js,这里吐槽一下,官方给的文档并没有说明!!!

http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js(无格式压缩版)

http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js

http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js(无格式压缩版)

http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer.js

先看MarkerClusterer,一般创建聚合时的代码如下.这里的for循环实际上在随机的创建一些经纬度坐标,

var markers = [];
for(i=0; i < 10000; i++) {
	 pt = new BMap.Point(Math.random() * 5 + 75, Math.random() * 10 + 21);
	 markers.push(new BMap.Marker(pt));
}
var st = [ { url: "m4.png", size:new BMap.Size(92, 92) } ];
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers,styles:st});

对应到源码部分

/**
     *@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