首页 / Leaflet / 使用示例
聚合标记
700 个点在低缩放级别自动聚成簇,放大后逐级散开,也可以一键关掉聚合看原始分布。
源码与运行效果
说明
点位围绕五个中心聚集,模拟门店、设备或采样点的真实分布。
标记用 divIcon 画 9 像素圆点,不加载任何图片资源;
聚合簇使用插件自带的 CSS 样式,颜色由数量分级。
| 选项 | 取值 | 作用 |
|---|---|---|
chunkedLoading | true | 分批加入标记,避免主线程一次阻塞几百毫秒 |
maxClusterRadius | 52 | 聚合半径(像素),越大簇越少越粗 |
disableClusteringAtZoom | 16 | 到该级别后不再聚合,直接显示点 |
showCoverageOnHover | false | 关闭悬停时显示簇的覆盖范围 |
spiderfyOnMaxZoom | true | 最大级别下点击簇,散开重叠点 |
关闭聚合时切换到普通 L.layerGroup。两套图层使用各自创建的标记实例,
不共享同一个 Marker 对象——一个图层只能挂在一张地图上,共用实例会出现加入失败或位置错乱。
聚合只改变显示方式,不改变数据本身。导出、检索、统计仍应基于原始点集;
需要按视野查询时,用 map.getBounds() 过滤后再渲染。