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

最新推荐文章于 2024-05-10 20:36:11 发布

Arviiin

最新推荐文章于 2024-05-10 20:36:11 发布

阅读量4.2k

点赞数 1

本文链接：https://blog.csdn.net/weixin_38450840/article/details/82767810

版权

本文分析了百度地图中点聚合功能的MarkerClusterer.js和TextIconOverlay.js源码，讲解了如何创建、清除及自定义聚合样式。 MarkerClusterer.js用于控制聚合，TextIconOverlay.js控制显示。通过BMapLib.MarkerClusterer实例化，传入地图对象和选项，并使用addMarkers方法添加标记。清除聚合点可使用clearMarkers方法。聚合样式可通过styles参数自定义，TextIconOverlay内部会根据点数量显示不同样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图中的点聚合主要有两个文件一个控制聚合即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

最低0.47元/天解锁文章