1.利用L.markerClusterGroup插件实现数据点聚合
作用:在不同地图缩放层级下,是一定范围内的marker点实现聚合或展示,达到地图页面不会因数据点过多造成视觉杂乱问题。
官方插件地址:https://github.com/Leaflet/Leaflet.markercluster
实现效果图:
官方使用示例:
var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map)));
... Add more layers ...
map.addLayer(markers);
要注意的是,官方示例中,聚合默认的样式是已范围内聚合数据点个数的不同,改变聚合之后marker的背景颜色,来达到区分作用,但是在实际项目中,我们需要再地图上加载多个类型的数据,例如景点,公园,学校,然后聚合需要不同的icon来表示,这时候就需要对源码进行适当的修改,来实现分类聚合效果,具体效果图如下:人代表公园,文代表景点
使用方法:
首先我们先引入必要的css与js文件
<link href="leaflet/leaflet.markercluster/MarkerCluster.Default.css" rel="stylesheet" />
<script src="leaflet/leaflet.markercluster/MarkerCluster.js"></script>
<script src="leaflet/leaflet.markercluster/MarkerCluster.QuickHull.js"></script>
<script src="leaflet/leaflet.markercluster/DistanceGrid.js"></script>
<script src="leaflet/leaflet.markercluster/leaflet.markercluster-src.js"></script>
然后创建图层并添加数据
<