[GIS] OpenLayers layer-switcher for WMS layers

layer-switcheropenlayerswms

I have configured a WMS layer for OpenLayers like:

var wmsSource = new ol.source.ImageWMS({
  url: 'http://<servername>/geoserver/<namespace>/wms',
  params: {'LAYERS': [ 'Layer 001', 'Layer 002', ... 'Layer xxx' ]}, 
  ratio: 1.2,
  serverType: 'geoserver'
})

var wms = new ol.layer.Image({
  title: 'Basemap',
  type: 'base',
  source: wmsSource
})

The layer-switch I use is this one: https://github.com/walkermatt/ol3-layerswitcher

It is configured like

var layerSwitcher = new ol.control.LayerSwitcher({
    tipLabel: 'Legend'
});
map.addControl(layerSwitcher);

Now the layer-switcher only shows one "Basemap" entry. But I want to have the WMS-Layers listed – best in a group "Basemap".

Any ideas how to do this?

Best Answer

Totally agree with Revo. You can use ol.layer.Group for defining multiple base layers and / or overlays.

You can define Base layers like bl1, bl2, bl3 ... etc and put them together in a Group say baselayers in the following manner.

var baselayers = new ol.layer.Group({
        'title': 'Base maps',
        layers: [bl1, bl2, bl3]
    });

Similarly you can define overlays say ol1, ol2, ol3 ... etc and put them into a Group say overlays as follows:

var overlays = new ol.layer.Group({
            title: 'Overlays',
            layers: [ol1, ol2, ol3]
});

Now you can define the map element and put these baselayers and overlays into it.

var map = new ol.Map({
    layers: [baselayers, overlays],
    target: "map",
    view: new ol.View({
    center: [20,20],
    zoom: 4,
    projection: 'EPSG:4326'
    })
});

You need to add ol3-layerswitcher.js javascript in your head section of html page.

Related Question