Add queryableLayers support in the API

api/dist/apihelp/apihelp.html

@@ -138,7 +138,7 @@ <h2>A map with some additional controls</h2>
     div: 'map5',
     zoom: 3,
     center: [544500, 210100],
-    layers: ['bank'],
+    layers: ['osm_open'],
     addLayerSwitcher: true,
     addMiniMap: true,
     miniMapExpanded: true,

api/src/Map.js

@@ -32,7 +32,7 @@ import {get as getProjection} from 'ol/proj.js';
 
 import constants from './constants.js';
 
-import {getFeaturesFromLayer} from './Querent.js';
+import {getFeaturesFromIds, getFeaturesFromCoordinates} from './Querent.js';
 import * as themes from './Themes.js';
 
 
@@ -163,6 +163,21 @@ class Map {
         this.selectObject(selected.getId());
       }
     });
+
+
+    this.map_.on('singleclick', (event) => {
+      const resolution = this.map_.getView().getResolution();
+      const visibleLayers = this.map_.getLayers().getArray().filter(layer => layer.getVisible());
+      const visibleLayersName = visibleLayers.map(layer => layer.get('config.name'));
+
+      for (const layer of constants.queryableLayers) {
+        if (visibleLayersName.includes(layer)) {
+          getFeaturesFromCoordinates(layer, event.coordinate, resolution).then((feature) => {
+            console.log(feature);
+          });
+        }
+      }
+    });
   }
 
   /**
@@ -227,7 +242,7 @@ class Map {
    *     the map or not.
    */
   recenterOnObjects(layer, ids, highlight = false) {
-    getFeaturesFromLayer(layer, ids)
+    getFeaturesFromIds(layer, ids)
       .then((features) => {
         if (!features.length) {
           console.error('Could not recenter: no objects were found.');

api/src/Querent.js

@@ -2,6 +2,24 @@ import {getOverlayDefs} from './Themes.js';
 import {appendParams as olUriAppendParams} from 'ol/uri.js';
 import olFormatGML2 from 'ol/format/GML2.js';
 import olFormatWFS from 'ol/format/WFS.js';
+import {buffer, createOrUpdateFromCoordinate} from 'ol/extent.js';
+
+
+/**
+ * Click tolerance in pixel
+ * @type {number}
+ */
+const TOLERANCE = 10;
+
+
+/**
+ * @param {import('./Themes.js').overlayDefinition} def Overlay definition.
+ * @return {boolean} Is the overlay queryable.
+ */
+function querable(def) {
+  return def.layer.type === 'WMS' && !!def.ogcServer.wfsSupport && !!def.ogcServer.urlWfs;
+}
+
 
 /**
  * Issues a simple WFS GetFeature request for a single layer to fetch
@@ -18,7 +36,7 @@ import olFormatWFS from 'ol/format/WFS.js';
  * @return {!Promise<Array<import('ol/Feature.js').default>>} Promise.
  * @hidden
  */
-export function getFeaturesFromLayer(layer, ids) {
+export function getFeaturesFromIds(layer, ids) {
   return new Promise((resolve, reject) => {
     getOverlayDefs().then((overlayDefs) => {
 
@@ -31,12 +49,7 @@ export function getFeaturesFromLayer(layer, ids) {
         return;
       }
 
-      if (
-        !overlayDef.ogcServer ||
-        !overlayDef.ogcServer.wfsSupport ||
-        !overlayDef.ogcServer.urlWfs ||
-        overlayDef.layer.type !== 'WMS'
-      ) {
+      if (!querable(overlayDef)) {
         reject(`Layer "${layer}" does not support WFS.`);
         return;
       }
@@ -70,3 +83,59 @@ export function getFeaturesFromLayer(layer, ids) {
     });
   });
 }
+
+
+/**
+ * @param {!string} layer Name of the layer to query
+ * @param {Array.<number>} coordinate Coordinate.
+ * @param {number} resolution Resolution
+ *
+ * @return {!Promise<import('ol/Feature.js').default>} Promise.
+ * @hidden
+ */
+export function getFeaturesFromCoordinates(layer, coordinate, resolution) {
+  return new Promise((resolve, reject) => {
+    getOverlayDefs().then((overlayDefs) => {
+
+      const overlayDef = overlayDefs.get(layer);
+
+      if (!overlayDef) {
+        reject(`Layer "${layer}" was not found in themes.`);
+        return;
+      }
+
+      if (!querable(overlayDef)) {
+        reject(`Layer "${layer}" does not support WFS.`);
+        return;
+      }
+
+      const bbox = buffer(createOrUpdateFromCoordinate(coordinate), TOLERANCE * resolution);
+
+      const params = {
+        'BBOX': bbox.join(','),
+        'MAXFEATURES': 1,
+        'REQUEST': 'GetFeature',
+        'SERVICE': 'WFS',
+        'TYPENAME': layer,
+        'VERSION': '1.0.0'
+      };
+      const url = olUriAppendParams(overlayDef.ogcServer.urlWfs, params);
+
+      let feature;
+      fetch(url)
+        .then(response => response.text().then((responseText) => {
+          const wfsFormat = new olFormatWFS({
+            featureNS: overlayDef.ogcServer.namespace,
+            gmlFormat: new olFormatGML2()
+          });
+          feature = wfsFormat.readFeature(responseText);
+        }))
+        .catch((response) => {
+          console.error(`WFS GetFeature request failed, response: ${response}`);
+        })
+        .then(() => {
+          resolve(feature);
+        });
+    });
+  });
+}

api/src/Themes.js

@@ -42,7 +42,6 @@ export function getBackgroundLayers() {
         const layerWMTS = /** @type {import('gmf/themes.js').GmfLayerWMTS} */(config);
         promises.push(
           createWMTSLayer(layerWMTS).then((layer) => {
-            layer.set('config.layer', layerWMTS.layer);
             layer.set('config.name', layerWMTS.name);
             return layer;
           })
@@ -52,7 +51,6 @@ export function getBackgroundLayers() {
         const ogcServer = themes.ogcServers[config.ogcServer];
         promises.push(
           createWMSLayer(layerWMS, ogcServer).then((layer) => {
-            layer.set('config.layer', layerWMS.layers);
             layer.set('config.name', layerWMS.name);
             return layer;
           })
@@ -189,14 +187,17 @@ export function createWMSLayer(config, ogcServer) {
   const layer = new ImageLayer({
     source: new ImageWMS({
       url: ogcServer.url,
-      projection: undefined, // should be removed in next OL version
+      projection: undefined, // FIXME: should be removed in next OL version
       params: {
         'LAYERS': config.layers
       },
       serverType: ogcServer.type
-    })
+    }),
+    minResolution: config.minResolutionHint,
+    maxResolution: config.maxResolutionHint
   });
   layer.set('title', config.name);
+  layer.set('config.name', config.name);
   return Promise.resolve(layer);
 }
 
@@ -219,6 +220,7 @@ export function createWMTSLayer(config) {
       source: source
     });
     layer.set('title', config.name);
+    layer.set('config.name', config.name);
     return layer;
   });
 }

api/src/constants.js

@@ -11,4 +11,9 @@ export default {
    * (WMTS) or a comma-separated list of layer names (WMS).
    */
   backgroundLayer: 'orthophoto',
+
+  /**
+   *  The list of layers (names) declared as queryable.
+   */
+  queryableLayers: ['osm_open', 'many_attributes']
 };