Support WMS overlays

camptocamp · Nov 7, 2018 · eda4528 · eda4528
1 parent f6037cb
commit eda4528
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 14 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: ['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
@@ -1,3 +1,4 @@
+import {extend as arrayExtend} from 'ol/array.js';
 import WMTSCapabilities from 'ol/format/WMTSCapabilities.js';
 import TileWMS from 'ol/source/TileWMS.js';
 import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS.js';
@@ -10,6 +11,11 @@ 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 = [];
@@ -34,24 +40,99 @@ export function getBackgroundLayers() {
       } 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
-        });
+        const layer = createWMSLayer(config, ogcServer)
         layer.set('config.layer', layerNames);
         layer.set('config.name', config.name);
         promises.push(Promise.resolve(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) {
+
+      let layer = null;
+      const overlayDef = overlayDefs.get(layerName);
+
+      if (!overlayDef) {
+        console.error(`Layer not found in themes: ${layerName}`)
+        continue;
+      }
+
+      const ogcServer = overlayDef.ogcServer;
+      if (overlayDef.config.type === 'WMS' && ogcServer) {
+        layer = createWMSLayer(overlayDef.config, ogcServer);
+      }
+
+      if (layer) {
+        promises.push(Promise.resolve(layer));
+      }
+    }
+    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 {TileLayer} Tile layer with tile WMS source.
+ */
+export function createWMSLayer(config, ogcServer) {
+  return new TileLayer({
+    source: new TileWMS({
+      url: ogcServer.url,
+      params: {
+        'LAYERS': config.layers
+      },
+      serverType: ogcServer.type
+    })
+  });
+};
 
 const capabilities = new Map();