fix(Search): Amélioration de la recherche (#267)

* Option sur le service de recherche et le widget SearchEngine pour mettre en avant certaines couches et prioriser les WMTS sur les WMS * Couches WFS sur le gestionnaire de catalogue * Ajout du crossOrigin (besoin impression canvas) * Fix sur la hauteur de la liste des résultats en fit-content
IGNF · Nov 22, 2024 · 301ade0 · 301ade0
1 parent 5c2c52c
commit 301ade0
Show file tree

Hide file tree

Showing 13 changed files with 217 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.0-265",
-  "date": "17/11/2024",
+  "version": "1.0.0-beta.0-267",
+  "date": "21/11/2024",
   "module": "src/index.js",
   "directories": {},
   "engines": {

diff --git a/samples-src/pages/tests/SearchEngine/pages-ol-searchengine-modules-dsfr-default.html b/samples-src/pages/tests/SearchEngine/pages-ol-searchengine-modules-dsfr-default.html
@@ -21,15 +21,31 @@
 
 {{#content "body"}}
             <h2>Ajout du moteur de recherche avec les options par défaut</h2>
+            <p>
+                Liste des couches prioritaires :
+                <pre> 
+                PLAN.IGN,
+                GEOGRAPHICALGRIDSYSTEMS.MAPS.BDUNI.J1,
+                GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2,
+                CADASTRALPARCELS.PARCELLAIRE_EXPRESS,
+                ORTHOIMAGERY.ORTHOPHOTOS
+                </pre>
+
+                Ex. si on saisie 'ortho', la couche "photographies aeriennes" devrait sortir en 1ere position.
+            </p>
             <!-- map -->
             <div id="map">
             </div>
 {{/content}}
 
 {{#content "js"}}
             <script type="text/javascript">
+                if (window.Gp) {
+                    // activation des loggers
+                    Gp.Logger.enableAll();
+                }
                 var map;
-                window.onload = function() {
+                var createMap = function() {
                     // on cache l'image de chargement du Géoportail.
                     document.getElementById('map').style.backgroundImage = 'none';
 
@@ -54,14 +70,19 @@ <h2>Ajout du moteur de recherche avec les options par défaut</h2>
                         displayButtonAdvancedSearch : true,
                         displayButtonGeolocate : true,
                         displayButtonCoordinateSearch : true,
+                        displayButtonClose : false,
                         collapsible : false,
                         resources : {
                           search : true
                         },
                         searchOptions: {
-                            addToMap: false,
-                            filterServices : "WMTS,WMS,TMS",
-                            serviceOptions: {}
+                            addToMap: true,
+                            filterServices : "WMTS,WMS,TMS,WFS",
+                            filterLayersPriority : "PLAN.IGN,GEOGRAPHICALGRIDSYSTEMS.MAPS.BDUNI.J1,GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2,CADASTRALPARCELS.PARCELLAIRE_EXPRESS,ORTHOIMAGERY.ORTHOPHOTOS",
+                            filterWMTSPriority : true,
+                            serviceOptions: {
+                                maximumResponses : 20
+                            }
                         },
                         markerUrl : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAzNiIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ij48cGF0aCBmaWxsPSIjMDAwMDkxIiBkPSJNMTguMzY0IDMuNjM2YTkgOSAwIDAgMSAwIDEyLjcyOEwxMiAyMi43MjhsLTYuMzY0LTYuMzY0QTkgOSAwIDAgMSAxOC4zNjQgMy42MzZaTTEyIDhhMiAyIDAgMSAwIDAgNCAyIDIgMCAwIDAgMC00WiIvPjwvc3ZnPg=="
                     });
@@ -86,6 +107,15 @@ <h2>Ajout du moteur de recherche avec les options par défaut</h2>
                         console.warn("coordinate", e.coordinates);
                     });
                 };
+                Gp.Services.getConfig({
+                    customConfigFile : "{{ configurl }}",
+                     callbackSuffix : "",
+                     timeOut : 20000,
+                     onSuccess : createMap,
+                     onFailure : (e) => {
+                       console.error(e);
+                     }
+                 });
            </script>
 {{/content}}
 

diff --git a/samples-src/pages/tests/SearchEngine/pages-ol-searchengine-modules-options.html b/samples-src/pages/tests/SearchEngine/pages-ol-searchengine-modules-options.html
@@ -142,7 +142,7 @@ <h2>Ajout du moteur de recherche avec les options</h2>
                         },
                         searchOptions : {
                           addToMap : bAddToMapAuto,
-                          filterServices : "WMTS,TMS",
+                          filterServices : "WMTS,TMS,WFS",
                           filterVectortiles : "PLAN.IGN,PCI",
                           updateVectortiles : true,
                           serviceOptions : {
@@ -174,6 +174,11 @@ <h2>Ajout du moteur de recherche avec les options</h2>
                             layer = new ol.layer.GeoportalMapBox({
                               layer : name
                             });
+                            break;
+                          case "WFS":
+                            layer = new ol.layer.GeoportalWFS({
+                              layer : name
+                            });
                           default:
                             break;
                         }

diff --git a/samples-src/pages/tests/Services/pages-ol-searchservice-modules-default.html b/samples-src/pages/tests/Services/pages-ol-searchservice-modules-default.html
@@ -80,6 +80,11 @@ <h2>Ajout du service de recherche</h2>
                         class="input" 
                         type="text" 
                         value="WMTS,TMS"/>
+                    <label for="conf-services">filtres sur les couches prioritaires</label>
+                    <input id="conf-layers" 
+                        class="input" 
+                        type="text" 
+                        value=""/>
                     <label for="conf-vector">filtres sur les couches vecteurs tuilés</label>
                     <textarea id="conf-vector" 
                         rows="2"
@@ -107,6 +112,10 @@ <h2>Ajout du service de recherche</h2>
                         class="input" 
                         type="number" 
                         value="10"/>
+                    <label for="conf-wmts">prioriser les couches de type WMTS</label>
+                    <input id="conf-wmts" 
+                        class="input" 
+                        type="checkbox"/>
                     <button id="load">Load</button>
                 </div>
                 <div class="run">
@@ -124,7 +133,7 @@ <h2>Ajout du service de recherche</h2>
                         <label for="results-names">Liste des couches :</label>
                         <select name="names" id="results-names"></select>
                     </p>
-                    <textarea id="results-textarea" name="textarea" rows="5" cols="30"></textarea>
+                    <textarea id="results-textarea" name="textarea" rows="100" cols="30"></textarea>
                 </div>
 
             </div>
@@ -162,11 +171,13 @@ <h2>Ajout du service de recherche</h2>
                     Search.setIndex(document.getElementById("conf-index").value);
                     Search.setUrl(document.getElementById("conf-url").value);
                     Search.setSize(document.getElementById("conf-size").value);
-                    Search.setFiltersByService(document.getElementById("conf-services").value);
                     Search.setFields(document.getElementById("conf-fields").value);
                     Search.setMaximumResponses(document.getElementById("conf-max").value);
+                    Search.setFiltersByService(document.getElementById("conf-services").value);
+                    Search.setFiltersByLayerPriority(document.getElementById("conf-layers").value);
                     Search.setFiltersByTMS(document.getElementById("conf-vector").value);
                     Search.setFiltersByProjection(document.getElementById("conf-proj").value);
+                    Search.setFiltersWMTSPriority(document.getElementById("conf-wmts").checked);
                 });
 
                 document.getElementById("update").addEventListener("click", (e) => {

diff --git a/src/packages/CSS/Controls/SearchEngine/DSFRsearchEngineStyle.css b/src/packages/CSS/Controls/SearchEngine/DSFRsearchEngineStyle.css
@@ -158,6 +158,7 @@ dialog[id^=GPgeocodeResultsList] {
   position: absolute;
   height: fit-content;
   background-color: var(--background-default-grey);
+  max-height: unset;
 }
 
 div[id^=GPautoCompleteList] {

diff --git a/src/packages/Controls/Catalog/Catalog.js b/src/packages/Controls/Catalog/Catalog.js
@@ -13,6 +13,7 @@ import Draggable from "../../Utils/Draggable";
 import Config from "../../Utils/Config";
 
 // import local des layers
+import GeoportalWFS from "../../Layers/LayerWFS";
 import GeoportalWMS from "../../Layers/LayerWMS";
 import GeoportalWMTS from "../../Layers/LayerWMTS";
 import GeoportalMapBox from "../../Layers/LayerMapBox";
@@ -90,7 +91,6 @@ var logger = Logger.getLogger("widget");
  * @todo filtrage des couches
  * @todo type:service
  * @todo validation du schema
- * @fixme enregistrer et afficher du format WFS !?
  */
 var Catalog = class Catalog extends Control {
 
@@ -786,6 +786,12 @@ var Catalog = class Catalog extends Control {
                 layer = new GeoportalMapBox({
                     layer : name
                 });
+                break;
+            case "WFS":
+                layer = new GeoportalWFS({
+                    layer : name
+                });
+                break;
             default:
                 break;
         }
@@ -971,9 +977,9 @@ var Catalog = class Catalog extends Control {
         // - ajout ou pas de la couche à la carte
         // - envoi d'un evenement avec la conf tech
 
-        var id = e.target.id.split("_")[1];
-        var name = id.split("-")[0];
-        var service = id.split("-")[1];
+        var ds = e.target.dataset.layer;
+        var name = ds.substring(0, ds.lastIndexOf(":"));
+        var service = ds.substring(ds.lastIndexOf(":") + 1);
         var layer = {}; // TODO fournir la conf tech
 
         if (e.target.checked) {

diff --git a/src/packages/Controls/Catalog/CatalogDOM.js b/src/packages/Controls/Catalog/CatalogDOM.js
@@ -432,7 +432,7 @@ var CatalogDOM = {
                         type="checkbox"
                         data-layer="${name}:${service}"
                         aria-describedby="checkboxes-messages-${categoryId}-${i}_${name}-${service}">
-                    <label class="GPlabelActive fr-label" for="checkboxes-${categoryId}-${i}_${name}-${service}" title="${title}">
+                    <label class="GPlabelActive fr-label" for="checkboxes-${categoryId}-${i}_${name}-${service}" title="nom technique : ${name}">
                         ${title} (${service})
                     </label>
                     <div class="fr-messages-group" id="checkboxes-messages-${categoryId}-${i}_${name}-${service}" aria-live="assertive"></div>

diff --git a/src/packages/Controls/SearchEngine/SearchEngine.js b/src/packages/Controls/SearchEngine/SearchEngine.js
@@ -77,6 +77,8 @@ var logger = Logger.getLogger("searchengine");
  * @param {Object}  [options.searchOptions = {}] - options of search service
  * @param {Boolean} [options.searchOptions.addToMap = true] - add layer automatically to map, defaults to true.
  * @param {String}  [options.searchOptions.filterServices] - filter on a list of search services, each field is separated by a comma. "WMTS,TMS" by default
+ * @param {String}  [options.searchOptions.filterWMTSPriority] - filter on priority WMTS layer in search, each field is separated by a comma. "PLAN.IGN,ORTHOIMAGERY.ORTHOPHOTOS" by default
+ * @param {Boolean}  [options.searchOptions.filterLayersPriority = false] - filter on priority layers in search, false by default
  * @param {String}  [options.searchOptions.filterVectortiles] - filter on list of search layers only on service TMS, each field is separated by a comma. "PLAN.IGN, ..." by default
  * @param {Boolean} [options.searchOptions.updateVectortiles = false] - updating the list of search layers only on service TMS
  * @param {Object}  [options.searchOptions.serviceOptions] - options of search service
@@ -359,6 +361,12 @@ var SearchEngine = class SearchEngine extends Control {
                 if (this.options.searchOptions.filterServices) {
                     Search.setFiltersByService(this.options.searchOptions.filterServices);
                 }
+                if (this.options.searchOptions.filterLayersPriority) {
+                    Search.setFiltersByLayerPriority(this.options.searchOptions.filterLayersPriority);
+                }
+                if (this.options.searchOptions.filterWMTSPriority) {
+                    Search.setFilterWMTSPriority(this.options.searchOptions.filterWMTSPriority);
+                }
                 if (this.options.searchOptions.filterVectortiles) {
                     Search.setFiltersByTMS(this.options.searchOptions.filterVectortiles);
                 }

diff --git a/src/packages/Controls/SearchEngine/SearchEngineDOM.js b/src/packages/Controls/SearchEngine/SearchEngineDOM.js
@@ -693,7 +693,7 @@ var SearchEngineDOM = {
         var container = document.createElement("select");
         container.id = this._addUID("GPautocompleteResultsLocation");
         container.className = "GPelementHidden gpf-hidden gpf-select";
-        container.size = 6;
+        container.size = 20;
         container.autofocus = true;
         return container;
     },
@@ -774,7 +774,7 @@ var SearchEngineDOM = {
         div.className = "GPautoCompleteProposal gpf-panel__items gpf-panel__items_searchengine";
         div.innerHTML = suggest.title + " (" + suggest.service + ")";
         div.dataset.layer = suggest.name;
-        div.title = suggest.description;
+        div.title = `${suggest.description} (nom technique : ${suggest.name})`;
         if (div.addEventListener) {
             div.addEventListener("click", function (e) {
                 self.onSearchedResultsItemClick(e);

diff --git a/src/packages/Layers/SourceWFS.js b/src/packages/Layers/SourceWFS.js
@@ -158,6 +158,7 @@ var SourceWFS = class SourceWFS extends VectorSource {
                 maxZoom : options.olParams.maxZoom || 21, 
                 tileSize : 512
             })),
+            crossOrigin : "anonymous"
         };
 
         // récupération des autres paramètres passés par l'utilisateur

diff --git a/src/packages/Layers/SourceWMS.js b/src/packages/Layers/SourceWMS.js
@@ -102,15 +102,15 @@ var SourceWMS = class SourceWMS extends TileWMSSource {
 
         var wmsSourceOptions = {
             // tracker extension openlayers
-            // FIXME : gp-ext version en mode AMD
             url : Gp.Helper.normalyzeUrl(wmsParams.url.replace(/(http|https):\/\//, protocol), urlParams, false),
             params : {
                 SERVICE : "WMS",
                 LAYERS : options.layer,
                 VERSION : wmsParams.version,
                 STYLES : wmsParams.styles,
                 FORMAT : wmsParams.format
-            }
+            },
+            crossOrigin : "anonymous"
             // ,
             // attributions : [
             //     new ol.Attribution({

diff --git a/src/packages/Layers/SourceWMTS.js b/src/packages/Layers/SourceWMTS.js
@@ -118,7 +118,8 @@ var SourceWMTS = class SourceWMTS extends WMTSExtended {
                 resolutions : wmtsParams.nativeResolutions,
                 matrixIds : wmtsParams.matrixIds,
                 origin : [Object.values(wmtsParams.tileMatrices)[0].topLeftCorner.x, Object.values(wmtsParams.tileMatrices)[0].topLeftCorner.y]
-            })
+            }),
+            crossOrigin : "anonymous"
         };
 
         // récupération des autres paramètres passés par l'utilisateur