diff --git a/api/src/Themes.js b/api/src/Themes.js index 690546587572..70d0ddc3294f 100644 --- a/api/src/Themes.js +++ b/api/src/Themes.js @@ -3,6 +3,7 @@ import ImageWMS from 'ol/source/ImageWMS.js'; import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS.js'; import TileLayer from 'ol/layer/Tile.js'; import ImageLayer from 'ol/layer/Image.js'; +import GroupLayer from 'ol/layer/Group.js'; import constants from './constants.js'; @@ -31,13 +32,13 @@ let overlayDefPromise; /** * @hidden - * @returns {Promise>} Promise + * @returns {Promise>} Promise */ export function getBackgroundLayers() { return getThemesPromise().then((themes) => { const promises = []; for (const config of themes.background_layers) { - if (config.type === 'WMTS') { + if (/** @type {import('gmf/themes.js').GmfLayer} */ (config).type === 'WMTS') { const layerWMTS = /** @type {import('gmf/themes.js').GmfLayerWMTS} */(config); promises.push( createWMTSLayer(layerWMTS).then((layer) => { @@ -46,7 +47,7 @@ export function getBackgroundLayers() { return layer; }) ); - } else if (config.type === 'WMS') { + } else if (/** @type {import('gmf/themes.js').GmfLayer} */ (config).type === 'WMS') { const layerWMS = /** @type {import('gmf/themes.js').GmfLayerWMS} */(config); const ogcServer = themes.ogcServers[config.ogcServer]; promises.push( @@ -56,9 +57,34 @@ export function getBackgroundLayers() { return layer; }) ); + } else if (/** @type {import('gmf/themes.js').GmfGroup} */ (config).children) { + // reverse children order + const reversed = /** @type {import('gmf/themes.js').GmfGroup} */ (config).children.slice().reverse(); + + // create all the layers for the layer group + const groupPromise = Promise.all(reversed.map((item) => { + const child = /** @type {import('gmf/themes.js').GmfLayer} */ (item); + if (child.type === 'WMTS') { + const layerWMTS = /** @type {import('gmf/themes.js').GmfLayerWMTS} */ (child); + return createWMTSLayer(layerWMTS); + } else if (child.type === 'WMS') { + const layerWMS = /** @type {import('gmf/themes.js').GmfLayerWMS} */ (child); + return createWMSLayer(layerWMS, themes.ogcServers[child.ogcServer]); + } + })); + promises.push( + groupPromise.then((layers) => { + // create a layer group for the children. + const group = new GroupLayer({ + layers: layers + }); + group.set('config.name', config.name); + return group; + }) + ); } } - return Promise.all(promises); + return Promise.all(/** @type {Array>} */ (promises)); }); } diff --git a/api/src/constants.js b/api/src/constants.js index 725645db2f80..f912f43fad2e 100644 --- a/api/src/constants.js +++ b/api/src/constants.js @@ -10,5 +10,5 @@ export default { * The name of the layer to use as background. May be a single value * (WMTS) or a comma-separated list of layer names (WMS). */ - backgroundLayer: 'OSM map', + backgroundLayer: 'orthophoto', }; diff --git a/contribs/gmf/src/theme/Themes.js b/contribs/gmf/src/theme/Themes.js index a0bc905f5b54..c2cb48550917 100644 --- a/contribs/gmf/src/theme/Themes.js +++ b/contribs/gmf/src/theme/Themes.js @@ -305,13 +305,7 @@ export class ThemesService extends olEventsEventTarget { */ getBackgroundLayersObject() { console.assert(this.promise_ !== null); - return this.promise_.then( - /** - * @param {!import('gmf/themes.js').GmfThemesResponse} data The "themes" web service response. - * @return {!Array.} The background layers object. - */ - data => data.background_layers - ); + return this.promise_.then(data => data.background_layers); } /** diff --git a/contribs/gmf/src/themes.js b/contribs/gmf/src/themes.js index 746e731d28ef..091904a302cf 100644 --- a/contribs/gmf/src/themes.js +++ b/contribs/gmf/src/themes.js @@ -9,7 +9,7 @@ /** * @typedef {Object} GmfThemesResponse - * @property {!Array.} background_layers + * @property {!Array.} background_layers * @property {!Array.} errors * @property {!GmfOgcServers} ogcServers * @property {!Array.} themes