如何正确为OpenLayers地图添加FullScreen全屏控件与图层切换控件

错误根因分析 #

1. 第一种初始化配置写法错误：
   controls参数要求传入一维的控件实例数组，而ol.control.defaults().extend()返回的是控件实例数组，你直接把整个数组塞到controls数组里就变成了二维结构，OpenLayers无法识别嵌套的控件，所以控件不显示。
2. 第二种动态添加写法错误：
   map.addControl()方法只接受单个控件实例作为参数，你传入ol.control.defaults().extend()返回的控件数组，自然会触发类型错误。
3. 额外注意：ol.control.LayerSwitcher不是OpenLayers核心内置控件，属于第三方扩展组件，需要提前引入对应的JS和CSS文件，否则也会失效。

正确写法 #

场景1：初始化地图时直接配置控件 #

先调用ol.control.defaults()获取默认控件集合，用extend方法追加你需要的所有自定义控件，直接赋值给controls参数即可：

map = new ol.Map({
  controls: ol.control.defaults().extend([
    new ol.control.LayerSwitcher({
      tipLabel: 'Leyenda'
    }),
    new ol.control.FullScreen()
  ]),
  layers: [
    new ol.layer.Group({
      'title': 'Mapas de base',
      layers: [grisOSM, mapaOSM]
    })
  ],
  // 其他配置比如target、view等
});

场景2：地图初始化后动态添加控件 #

单独创建每个控件实例，逐个调用addControl添加：

// 先初始化地图，默认会自带缩放、旋转等默认控件
map = new ol.Map({
  layers: [
    new ol.layer.Group({
      'title': 'Mapas de base',
      layers: [grisOSM, mapaOSM]
    })
  ],
  // 其他配置比如target、view等
});

// 逐个添加自定义控件
const layerSwitcher = new ol.control.LayerSwitcher({
  tipLabel: 'Leyenda'
});
map.addControl(layerSwitcher);

const fullScreen = new ol.control.FullScreen();
map.addControl(fullScreen);

异常排查补充 #

如果按上述写法修改后控件仍不显示，可按以下顺序排查：

• 确认已经正确引入ol-layerswitcher的JS和CSS资源
• 检查地图容器的层级，避免控件被其他页面元素遮挡
• 打开浏览器开发者工具的元素面板，确认控件DOM已经生成到地图容器下，如果是样式问题导致不可见，调整对应CSS即可

内容的提问来源于stack exchange，提问作者user8282183292