fix(query): fix query url bbox param (#1169)

* fix(query): fix query url bbox param * wip * keep x and y min and max in case is being used again * lint
infra-geo-ouverte · Mar 21, 2023 · f612e7c · f612e7c
1 parent ac0c340
commit f612e7c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 27 deletions.
diff --git a/demo/src/app/geo/query/query.component.html b/demo/src/app/geo/query/query.component.html
@@ -20,9 +20,11 @@
   </igo-map-browser>
 
   <igo-panel title="Details">
-    <ng-container *ngIf="feature$ | async as feature">
-      <h1>Query Title : <span style="background-color: #e0e0e0;">{{getTitle(feature)}}</span></h1>
-      <igo-feature-details [feature]="feature"></igo-feature-details>
+    <ng-container *ngIf="features$ | async as features">
+      <div *ngFor="let feature of features">
+        <h1>Query Title : <span style="background-color: #e0e0e0;">{{getTitle(feature)}}</span></h1>
+        <igo-feature-details [feature]="feature"></igo-feature-details>
+      </div>
     </ng-container>
   </igo-panel>
 

diff --git a/demo/src/app/geo/query/query.component.ts b/demo/src/app/geo/query/query.component.ts
@@ -8,13 +8,11 @@ import olPolygon from 'ol/geom/Polygon';
 import olLineString from 'ol/geom/LineString';
 import * as olproj from 'ol/proj';
 
-import { LanguageService } from '@igo2/core';
 import {
   IgoMap,
   FeatureDataSource,
   DataSourceService,
   LayerService,
-  OverlayService,
   Feature,
   QueryableDataSourceOptions,
   QueryFormat,
@@ -31,7 +29,7 @@ import { getEntityTitle } from '@igo2/common';
   styleUrls: ['./query.component.scss']
 })
 export class AppQueryComponent {
-  public feature$ = new BehaviorSubject<Feature>(undefined);
+  public features$ = new BehaviorSubject<Feature[]>([]);
 
   public map = new IgoMap({
     controls: {
@@ -47,10 +45,8 @@ export class AppQueryComponent {
   };
 
   constructor(
-    private languageService: LanguageService,
     private dataSourceService: DataSourceService,
-    private layerService: LayerService,
-    private overlayService: OverlayService
+    private layerService: LayerService
   ) {
     this.dataSourceService
       .createAsyncDataSource({
@@ -169,7 +165,7 @@ export class AppQueryComponent {
           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=wms_mern_reg_admin&LAYERS=wms_mern_reg_admin&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}',
+          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=wms_mern_reg_admin&LAYERS=wms_mern_reg_admin&INFO_FORMAT=application%2Fgeojson&FEATURE_COUNT=20&I=50&J=50&CRS=EPSG%3A3857&STYLES=&WIDTH=101&HEIGHT=101&BBOX={bbox}',
           queryLayerFeatures: false,
           queryFormat: 'geojson'
         },
@@ -186,10 +182,10 @@ export class AppQueryComponent {
         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}',
+        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&INFO_FORMAT=geojson&FEATURE_COUNT=20&I=50&J=50&CRS=EPSG%3A3857&STYLES=&WIDTH=101&HEIGHT=101&BBOX={bbox}',
         queryFormat: 'geojson',
         params: {
-          layers: 'caserne',
+          layers: 'MSP_CASERNE_PUBLIC',
           version: '1.3.0'
         }
       } as QueryableDataSourceOptions)
@@ -207,11 +203,9 @@ export class AppQueryComponent {
 
   handleQueryResults(results) {
     const features: Feature[] = results.features;
-    let feature: Feature;
     if (features.length && features[0]) {
-      feature = features[0];
-      this.feature$.next(feature);
-      this.map.queryResultsOverlay.setFeatures([feature], FeatureMotion.None);
+      this.features$.next(features);
+      this.map.queryResultsOverlay.setFeatures(features, FeatureMotion.None);
     }
 
   }

diff --git a/packages/geo/src/lib/query/shared/query.service.ts b/packages/geo/src/lib/query/shared/query.service.ts
@@ -783,15 +783,23 @@ export class QueryService {
     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;
-    }
+    const extent = olextent.getForViewAndSize(
+      options.coordinates,
+      options.resolution,
+      0,
+      [101, 101]
+    );
+
+    let url = datasource.options.queryUrl.replace(/\{bbox\}/g, extent.join(','))
+    .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;
+  }
 }