2.3 地图控件 🎛️

🎯 学习目标

本章节将介绍 OpenLayers 的控件系统，学习如何使用内置控件和创建自定义控件。完成本章学习后，你将掌握：

• 🎛️ 内置控件的配置和使用方法
• 🔧 现代化的控件管理和最佳实践
• 🎨 自定义控件的开发技巧
• 📱 响应式控件设计和性能优化

📋 控件系统概述

OpenLayers 提供了丰富的内置控件，用于增强地图的交互性和用户体验。

🎯 主要控件类型

🧭 核心导航控件

• Zoom：🔍 缩放控件（支持自定义样式和动画）
• FullScreen：⛶ 全屏控件（支持键盘快捷键 F11）
• Rotate：🔄 旋转控件（无旋转时自动隐藏）
• ZoomToExtent：🎯 缩放到指定范围

📊 信息显示控件

• ScaleLine：📏 比例尺控件（支持多种单位）
• MousePosition：📍 鼠标位置控件（实时坐标显示）
• Attribution：ℹ️ 属性信息控件（数据来源标注）
• OverviewMap：🗺️ 概览图控件（小地图导航）

🚀 默认控件配置

📦 基础控件设置

import { defaults as defaultControls } from 'ol/control.js';
import { Map, View } from 'ol';
import { TileLayer } from 'ol/layer';
import { OSM } from 'ol/source';
import { fromLonLat } from 'ol/proj';

// ✅ 使用默认控件
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: fromLonLat([116.4074, 39.9042]),
    zoom: 10,
  }),
  // 🎛️ 默认控件包括：Zoom、Rotate、Attribution
  controls: defaultControls()
});

🔧 自定义默认控件

// ⚙️ 自定义控件配置
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: fromLonLat([116.4074, 39.9042]),
    zoom: 10,
  }),
  controls: defaultControls({
    zoom: true,           // 🔍 显示缩放控件
    rotate: true,         // 🔄 显示旋转控件
    attribution: {        // ℹ️ 属性信息控件配置
      collapsible: true,  // 📁 可折叠
      collapsed: true     // 📦 默认折叠
    }
  })
});

🎛️ 常用内置控件

🔍 缩放控件 (Zoom)

import { Zoom } from 'ol/control.js';

const zoomControl = new Zoom({
  className: 'ol-zoom',           // 🎨 CSS 类名
  zoomInLabel: '+',               // ➕ 放大按钮文本
  zoomOutLabel: '−',              // ➖ 缩小按钮文本
  zoomInTipLabel: '🔍 放大',      // 💡 放大按钮提示
  zoomOutTipLabel: '🔍 缩小',     // 💡 缩小按钮提示
  delta: 1,                       // 📏 缩放增量
  duration: 250                   // ⏱️ 动画时长(ms)
});

map.addControl(zoomControl);

⛶ 全屏控件 (FullScreen)

import { FullScreen } from 'ol/control.js';

const fullScreenControl = new FullScreen({
  className: 'ol-full-screen',
  label: '⛶',                     // 🖼️ 进入全屏图标
  labelActive: '✕',               // ❌ 退出全屏图标
  tipLabel: '🖼️ 切换全屏',        // 💡 提示文本
  keys: true,                     // ⌨️ 启用 F11 快捷键
  source: 'map'                   // 🎯 全屏元素 ID
});

map.addControl(fullScreenControl);

// 📡 监听全屏状态变化
fullScreenControl.on('enterfullscreen', () => {
  console.log('🖼️ 进入全屏模式');
});

fullScreenControl.on('leavefullscreen', () => {
  console.log('🚪 退出全屏模式');
});

📏 比例尺控件 (ScaleLine)

import { ScaleLine } from 'ol/control.js';

const scaleLineControl = new ScaleLine({
  className: 'ol-scale-line',
  minWidth: 64,                   // 📐 最小宽度(px)
  maxWidth: 128,                  // 📐 最大宽度(px)
  units: 'metric',                // 📏 单位：'metric', 'imperial', 'nautical'
  bar: false,                     // 📊 是否显示条形比例尺
  steps: 4,                       // 🔢 刻度数量
  text: true                      // 📝 是否显示文本
});

map.addControl(scaleLineControl);

// 🔄 动态切换单位
function switchScaleUnits(units) {
  scaleLineControl.setUnits(units);
}

📍 鼠标位置控件 (MousePosition)

import { MousePosition } from 'ol/control.js';
import { createStringXY } from 'ol/coordinate.js';
import { toLonLat } from 'ol/proj.js';

const mousePositionControl = new MousePosition({
  className: 'ol-mouse-position',
  projection: 'EPSG:4326',              // 🌍 显示投影
  // ✅ 使用 placeholder 替代已移除的 undefinedHTML
  placeholder: '📍 移动鼠标查看坐标',    // 🔄 鼠标离开时显示的文本

  // 🎨 自定义坐标格式化函数
  coordinateFormat: (coordinate) => {
    if (coordinate) {
      const lonLat = toLonLat(coordinate);
      return `📍 经度: ${lonLat[0].toFixed(4)}, 纬度: ${lonLat[1].toFixed(4)}`;
    }
    return '';
  }
});

map.addControl(mousePositionControl);

🗺️ 概览图控件 (OverviewMap)

import { OverviewMap } from 'ol/control.js';
import { TileLayer } from 'ol/layer';
import { OSM } from 'ol/source';
import { View } from 'ol';

const overviewMapControl = new OverviewMap({
  className: 'ol-overviewmap',
  collapseLabel: '«',             // 📁 折叠标签
  label: '»',                     // 📂 展开标签
  collapsed: true,                // 📦 默认折叠
  collapsible: true,              // 🔄 可折叠

  // 🗺️ 概览图图层
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],

  // 📐 概览图大小
  size: [150, 150]
});

map.addControl(overviewMapControl);

🔄 旋转控件 (Rotate)

import { Rotate } from 'ol/control.js';

const rotateControl = new Rotate({
  className: 'ol-rotate',
  label: '🧭',                    // 🔄 旋转图标
  tipLabel: '🔄 重置旋转',        // 💡 提示文本
  duration: 250,                  // ⏱️ 动画时长
  autoHide: true                  // 👻 无旋转时自动隐藏
});

map.addControl(rotateControl);

🎯 缩放到范围控件 (ZoomToExtent)

import { ZoomToExtent } from 'ol/control.js';
import { boundingExtent } from 'ol/extent.js';
import { fromLonLat } from 'ol/proj.js';

// 🗺️ 定义目标范围（中国）
const chinaExtent = boundingExtent([
  fromLonLat([73, 18]),   // 🌏 西南角
  fromLonLat([135, 54])   // 🌏 东北角
]);

const zoomToExtentControl = new ZoomToExtent({
  className: 'ol-zoom-extent',
  label: '🏠',                    // 🏠 按钮图标
  tipLabel: '🎯 缩放到全图',      // 💡 提示文本
  extent: chinaExtent             // 📍 目标范围
});

map.addControl(zoomToExtentControl);

⚡ OpenLayers 10.x 现代化特性

🔧 Attribution 控件优化

// ✅ OSM 数据源的 Attribution 控件优化
import { defaults as defaultControls } from 'ol/control.js';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: fromLonLat([116.4074, 39.9042]),
    zoom: 10,
  }),
  controls: defaultControls({
    attribution: {
      // 🔄 OSM 数据源默认不可折叠，需要显式设置
      collapsible: true,
      collapsed: true
    }
  })
});

📱 响应式控件设计

// 🎯 根据设备类型配置控件
const createResponsiveControls = () => {
  const isMobile = window.innerWidth < 768;

  return defaultControls({
    zoom: !isMobile,     // 📱 移动端隐藏缩放控件
    rotate: false,       // 🔄 通常不需要旋转控件
    attribution: {
      collapsible: true,
      collapsed: isMobile // 📦 移动端默认折叠
    }
  });
};

const map = new Map({
  target: 'map',
  layers: [new TileLayer({ source: new OSM() })],
  view: new View({
    center: fromLonLat([116.4074, 39.9042]),
    zoom: 10,
  }),
  controls: createResponsiveControls()
});

🛠️ 控件管理

📝 动态添加和移除控件

import { ScaleLine, FullScreen } from 'ol/control.js';

// ➕ 添加控件
const scaleLineControl = new ScaleLine();
map.addControl(scaleLineControl);

const fullScreenControl = new FullScreen();
map.addControl(fullScreenControl);

// ➖ 移除控件
map.removeControl(scaleLineControl);

// 📊 获取所有控件
const controls = map.getControls();
console.log('🎛️ 控件数量:', controls.getLength());

// 🔄 遍历控件
controls.forEach((control) => {
  console.log('🎯 控件类型:', control.constructor.name);
});

// 🧹 清除所有控件
map.getControls().clear();

🎨 控件显示/隐藏

// 🔄 切换控件显示状态
function toggleControlVisibility(control, visible) {
  const element = control.element;
  if (element) {
    element.style.display = visible ? '' : 'none';
  }
}

// 💡 使用示例
const zoomControl = new Zoom();
map.addControl(zoomControl);

// 🙈 隐藏控件
toggleControlVisibility(zoomControl, false);

// 👁️ 显示控件
toggleControlVisibility(zoomControl, true);

🎨 自定义控件开发

🏠 简单自定义控件

import { Control } from 'ol/control.js';
import { fromLonLat } from 'ol/proj.js';

class HomeControl extends Control {
  constructor(options = {}) {
    // 🎨 创建按钮元素
    const button = document.createElement('button');
    button.innerHTML = '🏠';
    button.title = '🏠 回到首页';
    button.className = 'ol-control-button';

    // 📦 创建控件容器
    const element = document.createElement('div');
    element.className = 'home-control ol-unselectable ol-control';
    element.appendChild(button);

    super({
      element: element,
      target: options.target,
    });

    // ⚙️ 配置选项
    this.homeCoordinate = options.homeCoordinate || fromLonLat([116.4074, 39.9042]);
    this.homeZoom = options.homeZoom || 10;

    // 📡 绑定点击事件
    button.addEventListener('click', this.handleClick.bind(this), false);
  }

  handleClick() {
    const map = this.getMap();
    const view = map.getView();

    // 🎯 动画跳转到首页
    view.animate({
      center: this.homeCoordinate,
      zoom: this.homeZoom,
      duration: 1000
    });
  }
}

// 💡 使用自定义控件
const homeControl = new HomeControl({
  homeCoordinate: fromLonLat([121.4737, 31.2304]), // 🏙️ 上海
  homeZoom: 12
});

map.addControl(homeControl);

🎨 控件样式定制

/* 🎨 自定义控件样式 */
.home-control {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ol-control-button {
  display: block;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ol-control-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* � 响应式设计 */
@media (max-width: 768px) {
  .ol-control {
    font-size: 14px;
  }

  .ol-control-button {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
}

💡 实用技巧与总结

🎯 控件使用最佳实践

// ✅ 推荐的控件配置模式
import { defaults as defaultControls, ScaleLine, MousePosition } from 'ol/control.js';

const map = new Map({
  target: 'map',
  layers: [new TileLayer({ source: new OSM() })],
  view: new View({
    center: fromLonLat([116.4074, 39.9042]),
    zoom: 10,
  }),
  controls: defaultControls({
    // 🎛️ 基础控件配置
    zoom: true,
    rotate: true,
    attribution: {
      collapsible: true,
      collapsed: true
    }
  }).extend([
    // ➕ 添加额外控件
    new ScaleLine({ units: 'metric' }),
    new MousePosition({
      projection: 'EPSG:4326',
      placeholder: '📍 移动鼠标查看坐标'
    })
  ])
});

📋 常见问题解决

// ❓ 问题1: Attribution 控件在 OSM 数据源下不可折叠
// ✅ 解决方案: 显式设置 collapsible: true
controls: defaultControls({
  attribution: { collapsible: true }
})

// ❓ 问题2: 移动端控件过多影响体验
// ✅ 解决方案: 响应式控件配置
const isMobile = window.innerWidth < 768;
controls: defaultControls({
  zoom: !isMobile,
  attribution: { collapsed: isMobile }
})

// ❓ 问题3: 自定义控件样式不生效
// ✅ 解决方案: 确保 CSS 选择器优先级
.my-custom-control.ol-control {
  /* 自定义样式 */
}

🎓 学习要点总结

📚 核心要点

1. 🎛️ 默认控件：Zoom、Rotate、Attribution 是标准配置
2. 🔧 控件配置：使用 defaults() 方法统一配置控件
3. 📱 响应式设计：根据设备类型调整控件显示
4. 🎨 自定义控件：继承 Control 类创建专业控件
5. ⚡ 性能优化：按需加载和动态管理控件

⚠️ 注意事项

• 📝 OSM 数据源的 Attribution 控件默认不可折叠
• 🔄 MousePosition 控件使用 placeholder 替代 undefinedHTML
• 📱 移动端建议隐藏部分控件以优化体验
• 🎨 自定义控件需要正确的 CSS 类名和样式