Merge pull request #4364 from adube/api_694_layers

Support WMS overlays
camptocamp · Nov 8, 2018 · fa2f72b · fa2f72b
2 parents f6037cb + 4c56bbe
commit fa2f72b
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 34 deletions.
diff --git a/api/dist/apihelp.html b/api/dist/apihelp.html
@@ -122,9 +122,9 @@ <h2>A map with a subset of overlays</h2>
                     <pre data-language="javascript">
 var map = new demo.Map({
     div: 'map4',
-    zoom: 8,
-    center: [544500, 210100],
-    layers: ['parcelles', 'batiments_ofs']
+    zoom: 0,
+    center: [590000, 170000],
+    layers: ['ch.astra.ausnahmetransportrouten', 'polygon', 'point']
 });
                     </pre>
                 </div>

diff --git a/api/src/Map.js b/api/src/Map.js
@@ -90,12 +90,23 @@ class Map {
       }));
     }
 
+    // Get background layer first...
     themes.getBackgroundLayers().then((layers) => {
       for (const layer of layers) {
         if (layer.get('config.layer') === constants.backgroundLayer) {
           this.map_.addLayer(layer);
         }
       }
+
+      // ... then get overlay layers (if defined)
+      const overlayLayerNames = options.layers;
+      if (overlayLayerNames && overlayLayerNames.length) {
+        themes.getOverlayLayers(overlayLayerNames).then((layers) => {
+          for (const layer of layers) {
+            this.map_.addLayer(layer);
+          }
+        });
+      }
     });
 
     /**

diff --git a/api/src/Themes.js b/api/src/Themes.js
@@ -10,48 +10,146 @@ import * as constants from './constants.js';
  */
 const themesPromise = fetch(constants.themesUrl).then((response) => response.json());
 
+/**
+ * @type {Promise|undefined}
+ */
+let overlayDefPromise;
+
 export function getBackgroundLayers() {
   return themesPromise.then((themes) => {
     const promises = [];
     for (const config of themes.background_layers) {
       if (config.type === 'WMTS') {
-        promises.push(getWMTSCapability(config.url).then((capability) => {
-          const options = optionsFromCapabilities(capability, {
-            crossOrigin: 'anonymous',
-            layer: config.layer,
-            matrixSet: config.matrixSet
-          });
-          const source = new WMTS(options);
-          source.updateDimensions(config.dimensions);
-          const layer = new TileLayer({
-            preload: Infinity,
-            source: source
-          });
-          layer.set('config.layer', config.layer);
-          layer.set('config.name', config.name);
-          return layer;
-        }));
+        promises.push(
+          createWMTSLayer(config).then((layer) => {
+            layer.set('config.layer', config.layer);
+            layer.set('config.name', config.name);
+            return layer;
+          })
+        );
       } else if (config.type === 'WMS') {
         const ogcServer = themes.ogcServers[config.ogcServer];
-        const layerNames = config.layers;
-        const source = new TileWMS({
-          url: ogcServer.url,
-          params: {
-            'LAYERS': layerNames
-          },
-          serverType: ogcServer.type
-        });
-        const layer = new TileLayer({
-          source
-        });
-        layer.set('config.layer', layerNames);
-        layer.set('config.name', config.name);
-        promises.push(Promise.resolve(layer));
+        promises.push(
+          createWMSLayer(config, ogcServer).then((layer) => {
+            layer.set('config.layer', config.layers);
+            layer.set('config.name', config.name);
+            return layer;
+          })
+        );
       }
     }
     return Promise.all(promises);
   });
-}
+};
+
+const overlayDefs = new Map();
+
+export function getOverlayDefs() {
+  if (!overlayDefPromise) {
+    overlayDefPromise = new Promise((resolve, reject) => {
+      themesPromise.then((themes) => {
+        for (const theme of themes.themes) {
+          writeOverlayDefs(theme, themes.ogcServers);
+        }
+        resolve(overlayDefs);
+      });
+    })
+  }
+  return overlayDefPromise;
+};
+
+export function writeOverlayDefs(config, ogcServers, opt_ogcServer) {
+  const ogcServer = opt_ogcServer ?
+    opt_ogcServer:
+    config.ogcServer ? ogcServers[config.ogcServer] : undefined;
+  if (config.children) {
+    for (const childConfig of config.children) {
+      writeOverlayDefs(childConfig, ogcServers, ogcServer);
+    }
+  } else {
+    overlayDefs.set(
+      config.name,
+      {
+        config,
+        ogcServer
+      }
+    );
+  }
+};
+
+/**
+ * Returns a list of OpenLayers layer objects from the given layer names.
+ *
+ * @param {!Array<string>} layerNames List of layer names
+ * @return {!Promise} Promise.
+ */
+export function getOverlayLayers(layerNames) {
+  return getOverlayDefs().then((overlayDefs) => {
+    const promises = [];
+    for (const layerName of layerNames) {
+
+      const overlayDef = overlayDefs.get(layerName);
+
+      if (!overlayDef) {
+        console.error(`Layer not found in themes: ${layerName}`)
+        continue;
+      }
+
+      const ogcServer = overlayDef.ogcServer;
+
+      if (overlayDef.config.type === 'WMTS') {
+        promises.push(
+          createWMTSLayer(overlayDef.config)
+        );
+      } else if (overlayDef.config.type === 'WMS' && ogcServer) {
+        promises.push(
+          createWMSLayer(overlayDef.config, ogcServer)
+        );
+      }
+    }
+    return Promise.all(promises);
+  });
+};
+
+/**
+ * @param {Object} config Layer config (i.e. gmf layer node)
+ * @param {Object} ogsServer OGC server configuration used to create the layer.
+ * @return {Promise} Promise.
+ */
+export function createWMSLayer(config, ogcServer) {
+  return Promise.resolve(
+    new TileLayer({
+      source: new TileWMS({
+        url: ogcServer.url,
+        params: {
+          'LAYERS': config.layers
+        },
+        serverType: ogcServer.type
+      })
+    })
+  );
+};
+
+/**
+ * @param {Object} config Layer config (i.e. gmf layer node)
+ * @return {Promise} Promise.
+ */
+export function createWMTSLayer(config) {
+  return getWMTSCapability(config.url).then((capability) => {
+    const options = optionsFromCapabilities(capability, {
+      crossOrigin: 'anonymous',
+      layer: config.layer,
+      matrixSet: config.matrixSet
+    });
+    const source = new WMTS(options);
+    source.updateDimensions(config.dimensions);
+    const layer = new TileLayer({
+      preload: Infinity,
+      source: source
+    });
+    return layer;
+  })
+};
 
 const capabilities = new Map();