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

图层控制面板

自定义面板勾选四组覆盖物,带图层数量、全选与全不选,面板操作不会干扰地图拖拽。

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

说明

四类覆盖物(标记、圆、多边形、折线)各自装进一个 L.layerGroup。 勾选状态与图层显隐通过 map.hasLayer / addLayer / removeLayer 同步,面板只负责触发,不保存第二份状态。

图层组内容管理要点
标记6 个 divIcon 圆点,带弹窗图标不依赖图片资源
圆2 个半径分别为 1.2 km 与 800 m半径单位是米,缩放时自动变化
多边形2 个矩形区域填充透明度压低,避免遮挡底图
折线1 条虚线、1 条实线dashArray 区分类型

面板是地图容器的兄弟节点,绝对定位盖在地图上方,点击面板不会冒泡到地图, 所以不需要额外调用 disableClickPropagation。 如果改用 L.Control 承载面板,则必须补上这两个阻止方法。

图层少、只需简单开关时,用内置 L.control.layers 最省代码。 自定义面板的价值在数量统计、批量操作、分组折叠以及和业务字段联动。