某场景需求：需要在某地图上综合展示几千个marker，在地图层级比较低的情况，由于展示的数据点较多，会密密麻麻的堆叠在一起，比较影响用户体验（密集恐惧症患者恐怕要晕掉了）。
解决办法：为了让用户获得比较好的体验，在低层级地图下，将多个点聚合成为一个，在地图放大时再根据比例展示具体的数据，通过时空上的聚合提高用户体验。基于Leaflet扩展的markercluster插件可以满足以上的需求。本文将通过实战化编程，说明如何使用markercluster进行多点聚合展示，最后给出具体的交互示意。
Leaflet官方对插件的说明连接：https://leafletjs.com/2012/08/20/guest-post-markerclusterer-0-1-released.html
官方说明
一、基础环境需求
leaflet.js+leaflet.markercluster.js
二、插件引入
<linkrel="stylesheet"href="leaflet/leaflet.css"/><linkrel="stylesheet"href="css/screen.css"/><linkrel="stylesheet"href="css/dist/MarkerCluster.css"/><linkrel="stylesheet"href="css/dist/MarkerCluster.Default.css"/><scriptsrc="leaflet/leaflet.js?v=1.0.0"></script><scriptsrc="css/dist/leaflet.markercluster-src.js"></script><scriptsrc="css/dist/realworld.388.js"></script><scriptsrc="jquery/jquery.js"></script>
三、准备聚合数据，realworld.338.js(供参考)
//An extract of address points from the LINZ bulk extract: http://www.linz.govt.nz/survey-titles/landonline-data/landonline-bde//Should be this data set: http://data.linz.govt.nz/#/layer/779-nz-street-address-electoral/varaddressPoints= [ [28.234863, 112.944946, "长沙市"], [28.243103, 113.078156, "长沙县"], [28.109894, 112.988892, "天心区"], [28.361206, 112.81311, "望城区"], [28.185425, 113.032837, "芙蓉区"], [28.144226, 112.792511, "莲花镇"], [27.564697, 109.868774, "公坪镇"], [27.438354, 109.692993, "芷江侗族自治县"], [27.438354, 109.945679, "中方县"], [27.351837, 109.169769, "新晃侗族自治县"], [27.340851, 109.89212,"怀化市桐木镇"], [27.342224, 110.166779,"怀化市安江镇"], [27.634735, 110.120087,"怀化市芦阳镇"], [27.191162, 109.841309, "洪江市"], [26.872559, 109.736938, "会同县"], [27.905273, 110.582886, "溆浦县"], [30.596924, 114.299011, "武汉市"], [30.493927, 114.341583, "洪山区"], [30.371704, 114.318237, "江夏区"], [30.577698, 114.025726, "蔡甸区"], [30.528259, 114.728851, "华容区"], [23.127594, 113.262177,"广州市"], [23.102875, 113.457184,"广州市黄埔区"], [23.082275, 113.314362,"广州市海珠区"], [23.019104, 113.119354,"佛山市"], [29.53125, 106.556396,"重庆市"], [29.262085, 106.254272,"重庆市江津区"], [29.827881, 107.094727,"重庆市长寿区"], [31.230011, 121.473083, "上海市"], [31.216278, 121.540375, "上海市浦东新区"], [31.106415, 121.3797, "闵行区"], [31.368713, 121.264343, "宝山区"], [31.214905, 121.420898, "长宁区"], [30.912781, 121.47308, "奉贤区"], [30.739746, 121.338501,"金山区"], [31.25473, 121.525269,"杨浦区"], [31.144867, 121.127014,"青浦区"], [31.37146, 121.26297,"嘉定区"], [31.613159, 121.396179,"崇明区"], [31.199799, 121.304169,"新虹街道"], [31.030884, 121.131134,"小昆山镇"], [34.263611, 108.941803,"西安市"], [34.325409, 108.70285,"咸阳市"], [34.153748, 108.901978,"长安区"], [34.104309, 108.601227,"石井镇"], [34.113922, 109.224701,"前卫镇"], [34.367981, 109.209595,"临潼区"], [25.040588, 102.716675,"昆明市"], [25.518494, 102.403564,"武定县"], [26.647339, 106.644287,"贵阳市"], [27.685547, 106.929932,"遵义市"], [22.807617, 108.374634,"南宁市"], [22.631836, 110.181885,"玉林市"], [22.727966, 108.349915,"良庆区"], [26.06781, 119.295044,"福州市"], [25.438843, 119.006653,"莆田市"], [30.19043, 120.19043,"杭州市"], [36.5625, 117.04834,"济南市"], [31.904297, 118.762207,"南京市"], [34.672852, 113.686523,"郑州市"], [38.38623, 106.21582,"银川市"], [28.630371, 115.927734,"南昌市"], [37.858887, 112.565918,"太原市"], [35.925293, 103.842773,"兰州"], [37.902832, 114.587402,"石家庄市"], [39.001465, 117.246094,"天津市"], [36.540527, 101.799316,"西宁市"], [29.608154, 91.131592,"拉萨市"], [43.747559, 87.60498,"乌鲁木齐市"], [39.550781, 116.367188,"北京市"] ];
四、将点添加到地图中
varmarkers=L.markerClusterGroup(); for (vari=0; i<addressPoints.length; i++) { vara=addressPoints[i]; vartitle=a[2]; varmarker=L.marker(newL.LatLng(a[0], a[1]), { title: title }); marker.bindPopup(title); markers.addLayer(marker); } mymap.addLayer(markers);
五、综合展示效果
聚合综合展示1
聚合综合展示2
总结
通过以上示例完成了基于leaflet的多点聚合展示，提高用户体验。
