Loading WMS in OpenLayers

Question

I am trying to load this https://mrdata.usgs.gov/services/ardf?request=GetCapabilities&service=WMS&version=1.3.0& WMS in OpenLayers3. However, it has two layers (layer within layer e.g. layers 1 and 2 on the picture).

How do I get the layer to be displayed in my Browser? What do I write under "LAYERS" so that I can display both of the layers 1 and 2 on picture.

var GEBCO_NORTH_POLAR_VIEW = new ol.layer.Tile({
                            source: new ol.source.TileWMS(({
                              url: "https://mrdata.usgs.gov/services/ardf?",
                              attributions: '<a href="http://USGS</a>',
                              params: {
                                "LAYERS": "ardf-high",
                                "TILED": "true",
                                "VERSION": "1.1.0"},
                            })),
                            //crossOrigin: 'anonymous',
                            title: "GEBCO Grid North Polar View",
                            opacity: 1.000000,
                           });

Answer 1

You can name as many layers as you want in the LAYERS parameter so you should write:

"LAYERS": "ardf,ardf-high"

UPDATE

Looking at the capabilities more closely, there is in fact just one layer ardf that you should add to your map. It consists of twio sub layers one of which is displayed at scales before 1:5M and one to display at scales below 1:5M.

The two sub layers can not be seen at the same time, so you can either add the grouped layer ardf or the 2 sub layers ardf-high,ardf-low but the output is the same.

Answer 2

It's not possible to show both layers at the same time; that's not an issue of OpenLayers, it's just how it's configured in the service. That is the service is configured to only show one layer at a time based on the map scale, as it tells us in the GetCapabilities response.

<Name>ardf-high</Name>    
...
<MaxScaleDenominator>5e+06</MaxScaleDenominator>

<Name>ardf-low</Name>
...
<MinScaleDenominator>5e+06</MinScaleDenominator>

You might as well just specify the root layer ARDF as there's no alternative styling on other options to choose between the layers ardf-low and ardf-high