Leaflet自定义控制层按钮：如何通过复选框控制网格线开关

AI 小北

2026-9-27

解决方法

你只需要把所有生成的网格线统一放入Leaflet的LayerGroup容器中，再将该容器注册到overlay图层控制面板，即可实现批量开关控制，修改后的代码如下：

// 网格线生成逻辑
// 1. 初始化专属图层组收纳所有网格线
var gridLines = L.layerGroup();
var hold = 0
for (let i = 0; i <17; i++) {
    // 生成竖线
    var pointA = map.unproject([hold, 0], map.getMaxZoom());
    var pointB = map.unproject([hold, 8192], map.getMaxZoom());
    var pointList = [pointA, pointB];
    var firstpolyline = new L.Polyline(pointList, {
        color: 'grey',
        weight: 4,
        opacity: 0.8,
        smoothFactor: 1
    });
    // 不直接添加到地图，先加入图层组
    firstpolyline.addTo(gridLines);

    // 生成横线
    var pointA = map.unproject([0, hold], map.getMaxZoom());
    var pointB = map.unproject([8192, hold], map.getMaxZoom());
    var pointList = [pointA, pointB];
    var firstpolyline = new L.Polyline(pointList, {
        color: 'grey',
        weight: 4,
        opacity: 0.8,
        smoothFactor: 1
    });
    firstpolyline.addTo(gridLines);

    hold = hold + 512
}

// 2. 注册到图层控制面板
var baseLayers = {
  // 如果你有自定义底图可放在此处，没有就留空
};
var overlays = {
  "显示网格线": gridLines
};
// 实例化图层控制组件添加到地图
L.control.layers(baseLayers, overlays).addTo(map);

// 如果需要默认显示网格线保留此行，不需要可删除
gridLines.addTo(map);