3.3 图层控制

📦 基于 OpenLayers 10.5.0+ 最新 API✅ Context7 文档验证通过🔄 包含最新图层管理特性

🎯 学习目标

图层控制是地图应用的重要功能，包括图层的添加、移除、排序、可见性控制等。本节介绍基于最新 OpenLayers 10.x 的图层管理最佳实践。完成本章学习后，你将掌握：

• 现代化的图层操作和管理方法
• 高效的图层分组和树形结构管理
• 响应式图层切换器的实现
• 图层生命周期和内存管理最佳实践

图层控制概述

有效的图层控制能够提供良好的用户体验，让用户能够灵活地管理地图上的不同图层。

基础图层操作

添加和移除图层

// 添加图层
function addLayer(map, layer) {
  map.addLayer(layer);
  console.log('图层已添加');
}

// 移除图层
function removeLayer(map, layer) {
  map.removeLayer(layer);
  layer.dispose(); // 清理资源
  console.log('图层已移除');
}

// 获取所有图层
function getAllLayers(map) {
  return map.getLayers().getArray();
}

图层可见性控制

// 显示/隐藏图层
function toggleLayerVisibility(layer) {
  const visible = layer.getVisible();
  layer.setVisible(!visible);
  return !visible;
}

// 设置图层透明度
function setLayerOpacity(layer, opacity) {
  layer.setOpacity(opacity);
}

// 设置图层层级
function setLayerZIndex(layer, zIndex) {
  layer.setZIndex(zIndex);
}

图层排序

// 图层上移
function moveLayerUp(map, layer) {
  const layers = map.getLayers();
  const layerArray = layers.getArray();
  const index = layerArray.indexOf(layer);

  if (index < layerArray.length - 1) {
    layers.removeAt(index);
    layers.insertAt(index + 1, layer);
  }
}

// 图层下移
function moveLayerDown(map, layer) {
  const layers = map.getLayers();
  const layerArray = layers.getArray();
  const index = layerArray.indexOf(layer);

  if (index > 0) {
    layers.removeAt(index);
    layers.insertAt(index - 1, layer);
  }
}

图层分组管理

LayerGroup 使用

import LayerGroup from 'ol/layer/Group.js';

// 创建图层组
const baseLayerGroup = new LayerGroup({
  title: '底图图层',
  layers: [osmLayer, satelliteLayer]
});

const overlayGroup = new LayerGroup({
  title: '叠加图层',
  layers: [vectorLayer, wmsLayer]
});

// 添加图层组到地图
map.addLayer(baseLayerGroup);
map.addLayer(overlayGroup);

图层树管理

class LayerTreeManager {
  constructor(map) {
    this.map = map;
    this.layerTree = new Map();
  }

  addLayerGroup(groupId, title, layers = []) {
    const group = new LayerGroup({
      title: title,
      layers: layers
    });

    this.layerTree.set(groupId, {
      type: 'group',
      layer: group,
      title: title,
      children: new Map()
    });

    this.map.addLayer(group);
    return group;
  }

  addLayerToGroup(groupId, layerId, layer, title) {
    const groupInfo = this.layerTree.get(groupId);
    if (groupInfo && groupInfo.type === 'group') {
      groupInfo.layer.getLayers().push(layer);
      groupInfo.children.set(layerId, {
        type: 'layer',
        layer: layer,
        title: title
      });
    }
  }

  removeLayer(groupId, layerId) {
    const groupInfo = this.layerTree.get(groupId);
    if (groupInfo && groupInfo.children.has(layerId)) {
      const layerInfo = groupInfo.children.get(layerId);
      groupInfo.layer.getLayers().remove(layerInfo.layer);
      layerInfo.layer.dispose();
      groupInfo.children.delete(layerId);
    }
  }

  getLayerTree() {
    return this.layerTree;
  }
}

图层切换器

基础切换器

class LayerSwitcher {
  constructor(map, options = {}) {
    this.map = map;
    this.container = options.container;
    this.layers = new Map();
    this.init();
  }

  init() {
    this.createUI();
    this.bindEvents();
  }

  addLayer(id, layer, title, group = 'default') {
    this.layers.set(id, {
      layer: layer,
      title: title,
      group: group,
      visible: layer.getVisible()
    });

    this.updateUI();
  }

  createUI() {
    if (!this.container) return;

    this.container.innerHTML = `
      <div class="layer-switcher">
        <h4>图层控制</h4>
        <div class="layer-list"></div>
      </div>
    `;
  }

  updateUI() {
    const layerList = this.container.querySelector('.layer-list');
    if (!layerList) return;

    layerList.innerHTML = '';

    // 按组分类显示
    const groups = new Map();
    this.layers.forEach((info, id) => {
      if (!groups.has(info.group)) {
        groups.set(info.group, []);
      }
      groups.get(info.group).push({ id, ...info });
    });

    groups.forEach((layers, groupName) => {
      const groupDiv = document.createElement('div');
      groupDiv.className = 'layer-group';
      groupDiv.innerHTML = `<h5>${groupName}</h5>`;

      layers.forEach(({ id, layer, title, visible }) => {
        const layerDiv = document.createElement('div');
        layerDiv.className = 'layer-item';
        layerDiv.innerHTML = `
          <label>
            <input type="checkbox" ${visible ? 'checked' : ''} data-layer-id="${id}">
            ${title}
          </label>
          <input type="range" min="0" max="1" step="0.1" value="${layer.getOpacity()}"
                 data-layer-id="${id}" data-control="opacity">
        `;

        groupDiv.appendChild(layerDiv);
      });

      layerList.appendChild(groupDiv);
    });
  }

  bindEvents() {
    if (!this.container) return;

    this.container.addEventListener('change', (event) => {
      const layerId = event.target.dataset.layerId;
      const layerInfo = this.layers.get(layerId);

      if (!layerInfo) return;

      if (event.target.type === 'checkbox') {
        // 切换可见性
        const visible = event.target.checked;
        layerInfo.layer.setVisible(visible);
        layerInfo.visible = visible;
      } else if (event.target.dataset.control === 'opacity') {
        // 调整透明度
        const opacity = parseFloat(event.target.value);
        layerInfo.layer.setOpacity(opacity);
      }
    });
  }
}

动态图层管理

图层加载状态

class LayerLoadingManager {
  constructor() {
    this.loadingLayers = new Set();
    this.callbacks = new Map();
  }

  startLoading(layerId, callback) {
    this.loadingLayers.add(layerId);
    if (callback) {
      this.callbacks.set(layerId, callback);
    }
    this.updateLoadingState();
  }

  finishLoading(layerId, success = true) {
    this.loadingLayers.delete(layerId);

    const callback = this.callbacks.get(layerId);
    if (callback) {
      callback(success);
      this.callbacks.delete(layerId);
    }

    this.updateLoadingState();
  }

  updateLoadingState() {
    const isLoading = this.loadingLayers.size > 0;
    document.body.classList.toggle('layers-loading', isLoading);

    // 更新 UI 指示器
    const indicator = document.querySelector('.loading-indicator');
    if (indicator) {
      indicator.style.display = isLoading ? 'block' : 'none';
    }
  }

  isLoading() {
    return this.loadingLayers.size > 0;
  }
}

最佳实践

性能优化

// 图层懒加载
class LazyLayerLoader {
  constructor(map) {
    this.map = map;
    this.layerConfigs = new Map();
    this.loadedLayers = new Map();
  }

  registerLayer(id, config) {
    this.layerConfigs.set(id, config);
  }

  async loadLayer(id) {
    if (this.loadedLayers.has(id)) {
      return this.loadedLayers.get(id);
    }

    const config = this.layerConfigs.get(id);
    if (!config) {
      throw new Error(`图层配置不存在: ${id}`);
    }

    try {
      const layer = await this.createLayer(config);
      this.loadedLayers.set(id, layer);
      return layer;
    } catch (error) {
      console.error(`图层加载失败: ${id}`, error);
      throw error;
    }
  }

  async createLayer(config) {
    // 根据配置创建图层
    // 这里可以是异步的数据加载过程
    return new Promise((resolve) => {
      setTimeout(() => {
        const layer = new config.layerClass(config.options);
        resolve(layer);
      }, 100);
    });
  }
}

内存管理

// 图层生命周期管理
class LayerLifecycleManager {
  constructor() {
    this.activeLayers = new Map();
    this.disposedLayers = new Set();
  }

  addLayer(id, layer) {
    this.activeLayers.set(id, {
      layer: layer,
      addTime: Date.now(),
      lastAccess: Date.now()
    });
  }

  accessLayer(id) {
    const info = this.activeLayers.get(id);
    if (info) {
      info.lastAccess = Date.now();
    }
  }

  removeLayer(id) {
    const info = this.activeLayers.get(id);
    if (info) {
      info.layer.dispose();
      this.activeLayers.delete(id);
      this.disposedLayers.add(id);
    }
  }

  cleanup(maxAge = 300000) { // 5分钟
    const now = Date.now();
    const toRemove = [];

    this.activeLayers.forEach((info, id) => {
      if (now - info.lastAccess > maxAge) {
        toRemove.push(id);
      }
    });

    toRemove.forEach(id => this.removeLayer(id));

    console.log(`清理了 ${toRemove.length} 个过期图层`);
  }
}

总结

图层控制是地图应用的核心功能，本节介绍了：

• 基础操作：图层的添加、移除、可见性控制
• 分组管理：LayerGroup 和图层树的使用
• 用户界面：图层切换器的实现
• 性能优化：懒加载和内存管理
• 最佳实践：生命周期管理和错误处理

性能提示

• 合理使用图层分组减少管理复杂度
• 实现图层懒加载提高初始化性能
• 及时清理不需要的图层释放内存
• 监控图层加载状态提供用户反馈