首页 / Leaflet / 使用示例
图层控制面板
自定义面板勾选四组覆盖物,带图层数量、全选与全不选,面板操作不会干扰地图拖拽。
源码与运行效果
说明
四类覆盖物(标记、圆、多边形、折线)各自装进一个 L.layerGroup。
勾选状态与图层显隐通过 map.hasLayer / addLayer /
removeLayer 同步,面板只负责触发,不保存第二份状态。
| 图层组 | 内容 | 管理要点 |
|---|---|---|
| 标记 | 6 个 divIcon 圆点,带弹窗 | 图标不依赖图片资源 |
| 圆 | 2 个半径分别为 1.2 km 与 800 m | 半径单位是米,缩放时自动变化 |
| 多边形 | 2 个矩形区域 | 填充透明度压低,避免遮挡底图 |
| 折线 | 1 条虚线、1 条实线 | dashArray 区分类型 |
面板是地图容器的兄弟节点,绝对定位盖在地图上方,点击面板不会冒泡到地图,
所以不需要额外调用 disableClickPropagation。
如果改用 L.Control 承载面板,则必须补上这两个阻止方法。
图层少、只需简单开关时,用内置 L.control.layers 最省代码。
自定义面板的价值在数量统计、批量操作、分组折叠以及和业务字段联动。