Layer Group

<!--
  示例：图层组批量控制
  要点：同组图层存入数组，父级开关遍历调用 setVisible，子项状态用 some 回推
  依赖：OpenLayers 10.3.1 · jsDelivr CDN
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图层组批量控制</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.3.1/ol.css">
<style>
  html,body{height:100%;margin:0}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif}
  .bar{flex:0 0 auto;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
       display:flex;gap:14px;align-items:center;font-size:12px;color:#58606e;flex-wrap:wrap}
  .bar label{display:flex;gap:5px;align-items:center;cursor:pointer}
  .bar .sub{padding-left:14px;color:#8a919d}
  #map{flex:1 1 auto;min-height:0;background:#eef0f3}
</style>
</head>
<body>
<div class="bar">
  <label><input type="checkbox" id="groupAll" checked> POI 图层组</label>
  <label class="sub"><input type="checkbox" class="sub-box" data-kind="park" checked> 公园</label>
  <label class="sub"><input type="checkbox" class="sub-box" data-kind="station" checked> 地铁站</label>
  <label class="sub"><input type="checkbox" class="sub-box" data-kind="mall" checked> 商场</label>
  <span id="info">—</span>
</div>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/ol@10.3.1/dist/ol.js"></script>
<script>
(function () {
  'use strict';

  if (typeof ol === 'undefined') {
    document.getElementById('map').innerHTML =
      '<div style="padding:20px;color:#b42318">OpenLayers 加载失败，请检查能否访问 cdn.jsdelivr.net</div>';
    return;
  }

  var fromLonLat = ol.proj.fromLonLat;

  /* 三类 POI 数据，结构一致，便于用同一套逻辑建图层 */
  var data = {
    park: {
      color: '#1f8a4c',
      points: [[116.3921, 39.9136, '景山公园'], [116.3762, 39.9060, '中山公园'], [116.4064, 39.9210, '北海公园']]
    },
    station: {
      color: '#1f5fd0',
      points: [[116.4048, 39.9152, '天安门东'], [116.3990, 39.9086, '前门'], [116.3908, 39.9057, '和平门']]
    },
    mall: {
      color: '#c2410c',
      points: [[116.4106, 39.9147, '王府井百货'], [116.3739, 39.9097, '西单大悦城'], [116.4265, 39.9155, '国贸商城']]
    }
  };

  var poiLayers = {};
  var group = [];

  Object.keys(data).forEach(function (kind) {
    var cfg = data[kind];
    var features = cfg.points.map(function (p) {
      return new ol.Feature({
        geometry: new ol.geom.Point(fromLonLat([p[0], p[1]])),
        name: p[2]
      });
    });

    var layer = new ol.layer.Vector({
      source: new ol.source.Vector({ features: features })
    });

    /* 标注文字取要素 name 属性 */
    layer.setStyle(function (feature) {
      return new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          fill: new ol.style.Fill({ color: cfg.color }),
          stroke: new ol.style.Stroke({ color: '#ffffff', width: 2 })
        }),
        text: new ol.style.Text({
          text: feature.get('name'),
          font: '500 11px sans-serif',
          offsetY: -13,
          fill: new ol.style.Fill({ color: '#16181d' }),
          stroke: new ol.style.Stroke({ color: '#ffffff', width: 3 })
        })
      });
    });

    poiLayers[kind] = layer;
    group.push(layer);
  });

  new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({ source: new ol.source.XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', attributions: 'Tiles © Esri'}) })].concat(group),
    view: new ol.View({
      center: fromLonLat([116.3960, 39.9110]),
      zoom: 13
    }),
    controls: ol.control.defaults.defaults({ attribution: false })
  });

  var groupBox = document.getElementById('groupAll');
  var subBoxes = Array.prototype.slice.call(document.querySelectorAll('.sub-box'));
  var info = document.getElementById('info');

  /* 父级全量控制 */
  groupBox.addEventListener('change', function () {
    var visible = this.checked;
    subBoxes.forEach(function (box) {
      box.checked = visible;
      poiLayers[box.dataset.kind].setVisible(visible);
    });
    updateInfo();
  });

  /* 子项单独控制，并用 some 回推父级状态 */
  subBoxes.forEach(function (box) {
    box.addEventListener('change', function () {
      poiLayers[box.dataset.kind].setVisible(box.checked);
      groupBox.checked = subBoxes.some(function (b) { return b.checked; });
      updateInfo();
    });
  });

  function updateInfo() {
    var visible = subBoxes.filter(function (b) { return b.checked; }).length;
    info.textContent = '可见图层 ' + visible + ' / ' + group.length;
  }

  updateInfo();
})();
</script>
</body>
</html>