feat(query): Custom url get info

demo/src/app/geo/query/query.component.ts

@@ -159,17 +159,61 @@ export class AppQueryComponent {
     });
 
     dataSource.ol.addFeatures([feature1, feature2, feature3]);
+
+    this.layerService
+      .createAsyncLayer({
+        title: 'Vector tile with custom getfeatureinfo url',
+        visible: true,
+        sourceOptions: {
+          type: 'mvt',
+          url:
+            'https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG:900913@pbf/{z}/{x}/{-y}.pbf',
+          queryable: true,
+          queryUrl: 'https://geoegl.msp.gouv.qc.ca/apis/wss/amenagement.fcgi?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=SDA_REGION_S_20K&LAYERS=SDA_REGION_S_20K&DPI=96&MAP_RESOLUTION=96&FORMAT_OPTIONS=dpi%3A96&INFO_FORMAT=geojson&FEATURE_COUNT=5&I=50&J=50&CRS=EPSG:{srid}&STYLES=&WIDTH=101&HEIGHT=101&BBOX={xmin},{ymin},{xmax},{ymax}',
+          queryFeature: false,
+          queryFormat: 'geojson'
+        },
+        mapboxStyle: {
+          url: 'assets/mapboxStyleExample-vectortile.json',
+          source: 'ahocevar'
+        }
+      } as any)
+      .subscribe(l => this.map.addLayer(l));
+
+
+      this.dataSourceService
+      .createAsyncDataSource({
+        type: 'wms',
+        url: 'https://geoegl.msp.gouv.qc.ca/apis/wss/incendie.fcgi',
+        queryable: true,
+        queryUrl: 'https://geoegl.msp.gouv.qc.ca/apis/wss/amenagement.fcgi?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=SDA_MUNIC_S_20K&LAYERS=SDA_MUNIC_S_20K&DPI=96&MAP_RESOLUTION=96&FORMAT_OPTIONS=dpi%3A96&INFO_FORMAT=geojson&FEATURE_COUNT=5&I=50&J=50&CRS=EPSG:{srid}&STYLES=&WIDTH=101&HEIGHT=101&BBOX={xmin},{ymin},{xmax},{ymax}',
+        queryFormat: 'geojson',
+        params: {
+          layers: 'caserne',
+          version: '1.3.0'
+        }
+      } as QueryableDataSourceOptions)
+      .subscribe(dataSource => {
+        this.map.addLayer(
+          this.layerService.createLayer({
+            title: 'WMS with custom getfeatureinfo url',
+            source: dataSource,
+            sourceOptions: dataSource.options
+          })
+        );
+      });
+
   }
 
   handleQueryResults(results) {
     const features: Feature[] = results.features;
     let feature: Feature;
-    if (features.length) {
+    if (features.length && features[0]) {
       feature = features[0];
+      this.feature$.next(feature);
+      this.map.queryResultsOverlay.setFeatures([feature], FeatureMotion.None);
     }
-    this.feature$.next(feature);
 
-    this.map.queryResultsOverlay.setFeatures([feature], FeatureMotion.None);
   }
 
   getTitle(result: SearchResult) {

packages/geo/src/lib/query/shared/query.directive.ts

@@ -27,7 +27,7 @@ import { Feature } from '../../feature/shared/feature.interfaces';
 import { renderFeatureFromOl } from '../../feature/shared/feature.utils';
 import { featureFromOl } from '../../feature/shared/feature.utils';
 import { QueryService } from './query.service';
-import { layerIsQueryable, olLayerIsQueryable } from './query.utils';
+import { layerIsQueryable, olLayerFeatureIsQueryable } from './query.utils';
 import { ctrlKeyDown } from '../../map/shared/map.utils';
 import { OlDragSelectInteraction } from '../../feature/shared/strategies/selection';
 import { VectorLayer } from '../../layer/shared/layers/vector-layer';
@@ -245,7 +245,7 @@ export class QueryDirective implements AfterViewInit, OnDestroy {
           hitTolerance: this.queryFeaturesHitTolerance || 0,
           layerFilter: this.queryFeaturesCondition
             ? this.queryFeaturesCondition
-            : olLayerIsQueryable
+            : olLayerFeatureIsQueryable
         }
       );
     } else if (event.type === 'boxend') {

packages/geo/src/lib/query/shared/query.interfaces.ts

@@ -17,6 +17,8 @@ export interface QueryableDataSourceOptions extends DataSourceOptions {
   queryable?: boolean;
   queryFormat?: QueryFormat;
   queryTitle?: string;
+  queryUrl?: string;
+  queryFeature?: boolean;
   mapLabel?: string;
   queryHtmlTarget?: QueryHtmlTarget;
   ol?: olSourceVector<OlGeometry> | olSource;

packages/geo/src/lib/query/shared/query.service.ts

@@ -286,7 +286,7 @@ export class QueryService {
       const mapLabel = feature.properties[queryDataSource.mapLabel];
 
       let exclude;
-      if (layer.options.sourceOptions.type === 'wms') {
+      if (layer.options.sourceOptions?.type === 'wms') {
         const sourceOptions = layer.options
           .sourceOptions as WMSDataSourceOptions;
         exclude = sourceOptions ? sourceOptions.excludeAttribute : undefined;
@@ -543,6 +543,11 @@ export class QueryService {
     mapExtent?: MapExtent
   ): string {
     let url;
+
+    if (datasource.options.queryUrl) {
+      return this.getCustomQueryUrl(datasource, options, mapExtent);
+    }
+
     switch (datasource.constructor) {
       case WMSDataSource:
         const wmsDatasource = datasource as WMSDataSource;
@@ -702,4 +707,28 @@ export class QueryService {
 
     return label;
   }
+
+  /**
+   * @param datasource QueryableDataSource
+   * @param options QueryOptions
+   * @mapExtent extent of the map when click event
+   *
+   */
+
+  getCustomQueryUrl(
+    datasource: QueryableDataSource,
+    options: QueryOptions,
+    mapExtent?: MapExtent): string {
+
+      let url = datasource.options.queryUrl.replace(/\{xmin\}/g, mapExtent[0].toString())
+      .replace(/\{ymin\}/g, mapExtent[1].toString())
+      .replace(/\{xmax\}/g, mapExtent[2].toString())
+      .replace(/\{ymax\}/g, mapExtent[3].toString())
+      .replace(/\{x\}/g, options.coordinates[0].toString())
+      .replace(/\{y\}/g, options.coordinates[1].toString())
+      .replace(/\{resolution\}/g, options.resolution.toString())
+      .replace(/\{srid\}/g, options.projection.replace('EPSG:',''));
+
+      return url;
+    }
 }

packages/geo/src/lib/query/shared/query.utils.ts

@@ -23,3 +23,23 @@ export function olLayerIsQueryable(olLayer: OlLayer<OlSource>): boolean {
   const layer = olLayer.get('_layer');
   return layer === undefined ? false : layerIsQueryable(layer);
 }
+
+/**
+ * Whether a layer's feature is queryable
+ * @param layer Layer
+ * @returns True if the layer's feature is queryable
+ */
+export function layerFeatureIsQueryable(layer: AnyLayer): boolean {
+  const dataSource = layer.dataSource as QueryableDataSource;
+  return dataSource.options.queryFeature === true;
+}
+
+/**
+ * Whether an OL Vector layer is queryable
+ * @param layer Layer
+ * @returns True if the ol vector layer is queryable
+ */
+export function olLayerFeatureIsQueryable(olLayer: OlLayer<OlSource>): boolean {
+  const layer = olLayer.get('_layer');
+  return layer === undefined ? false : (layerIsQueryable(layer) && layerFeatureIsQueryable(layer));
+}