经纬志
首页 / Leaflet / 使用示例

聚合标记

700 个点在低缩放级别自动聚成簇,放大后逐级散开,也可以一键关掉聚合看原始分布。

Leaflet 1.9.4 · 更新 2026-10-27
源码与运行效果
运行效果

说明

点位围绕五个中心聚集,模拟门店、设备或采样点的真实分布。 标记用 divIcon 画 9 像素圆点,不加载任何图片资源; 聚合簇使用插件自带的 CSS 样式,颜色由数量分级。

选项取值作用
chunkedLoadingtrue分批加入标记,避免主线程一次阻塞几百毫秒
maxClusterRadius52聚合半径(像素),越大簇越少越粗
disableClusteringAtZoom16到该级别后不再聚合,直接显示点
showCoverageOnHoverfalse关闭悬停时显示簇的覆盖范围
spiderfyOnMaxZoomtrue最大级别下点击簇,散开重叠点

关闭聚合时切换到普通 L.layerGroup。两套图层使用各自创建的标记实例, 不共享同一个 Marker 对象——一个图层只能挂在一张地图上,共用实例会出现加入失败或位置错乱。

聚合只改变显示方式,不改变数据本身。导出、检索、统计仍应基于原始点集; 需要按视野查询时,用 map.getBounds() 过滤后再渲染。