Configurer - Une recherche Fuse

Présentation de Fuse

Fuse permet de rechercher une entité dans la barre de recherche sans installer de solution lourde. Il est adapté à un nombre limité d’entités.

Création du fichier javascript

Il est nécessaire de créer un fichier JavaScript pour utiliser la recherche Fuse. La donnée apparaît sur la carte au format vectoriel.

Dans ce fichier :

  • son nom et le nom de la variable déclarée au début devront être identiques au nom de la couche

  • la donnée issue de la requête WFS devra être dans la même projection que le mviewer (ici 4326)

  • le style de la couche s’appuie sur OpenLayers (https://openlayers.org/workshop/fr/vector/style.html)

Exemples de fichiers javascript

Voici un premier exemple de fichier JavaScript pour une donnée ponctuelle avec analyse thématique (fichier lycee.js)

{
// Définition des variables realtives à la couche.
  const GEOSERVER_URL = "https://ows.region-bretagne.fr/geoserver";
  const WORKSPACE = "rb";
  const LAYER = "lycee";
  const LAYER_URL = `${GEOSERVER_URL}/${WORKSPACE}/wfs?service=WFS&version=1.0.0&request=GetFeature&typeNames=${LAYER}&outputFormat=application/json&srsName=EPSG:4326`;
// Définition de la variable customlayer. Elle doit être unique et correspond au nom du fichier javascript.
  const LAYER_ID = "lycee";

// Style des entités.
  const legend = {
        items: [
          {
                label: "Lycée public",
                geometry: "Point",
                styles: [
                  new ol.style.Style({
                        image: new ol.style.Circle({
                          fill: new ol.style.Fill({
                                color: "rgba(255, 118, 117,1.0)",
                          }),
                          stroke: new ol.style.Stroke({
                                color: "#ffffff",
                                width: 4,
                          }),
                          radius: 9,
                        }),
                  }),
                ],
          },
          {
                label: "Lycée privé",
                geometry: "Point",
                styles: [
                  new ol.style.Style({
                        image: new ol.style.Circle({
                          fill: new ol.style.Fill({
                                color: "rgba(99, 110, 114,1.0)",
                          }),
                          stroke: new ol.style.Stroke({
                                color: "#ffffff",
                                width: 4,
                          }),
                          radius: 9,
                        }),
                  }),
                ],
          },
        ],
  };

//Appel de la donnée
  const layer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: LAYER_URL,
          format: new ol.format.GeoJSON(),
        }),
//Analyse thématique ici sur l'attribut secteur_li
        style: function (feature, resolution) {
          var stl;
          if (feature.get("secteur_li")) {
                switch (feature.get("secteur_li")) {
                  case "Public":
                        stl = legend.items[0].styles;
                        break;
                  case "Privé sous contrat avec l'éducation nationale":
                        stl = legend.items[1].styles;
                        break;
                }
          }
          return stl;
        },
  });
  handle = false;
  new CustomLayer(LAYER_ID, layer, legend);
}

Un deuxième sur une donnée linéaire avec analyse sur enjeu biologique (bief.js)

{
// Définition des variables realtives à la couche.
  const GEOSERVER_URL = "https://ows.region-bretagne.fr/geoserver";
  const WORKSPACE = "rb";
  const LAYER = "bief";
  const LAYER_URL = `${GEOSERVER_URL}/${WORKSPACE}/wfs?service=WFS&version=1.0.0&request=GetFeature&typeNames=${LAYER}&outputFormat=application/json&srsName=EPSG:4326`;
// Définition de la variable customlayer. Elle doit être unique et correspond au nom du fichier javascript.
  const LAYER_ID = "bief";

// Style des entités
  const legend = {
        items: [
          {
                label: "Enjeu bio. modéré",
                geometry: "LineString",
                styles: [
                  new ol.style.Style({
                        stroke: new ol.style.Stroke({ color: "rgba(129, 236, 236,1.0)", width: 4 }),
                  }),
                ],
          },
          {
                label: "Enjeu bio. élevé",
                geometry: "LineString",
                styles: [
                  new ol.style.Style({
                        stroke: new ol.style.Stroke({ color: "rgba(0, 206, 201,1.0)", width: 4 }),
                  }),
                ],
          },
          {
                label: "Enjeu bio. très élevé",
                geometry: "LineString",
                styles: [
                  new ol.style.Style({
                        stroke: new ol.style.Stroke({ color: "rgba(250, 177, 160,1.0)", width: 4 }),
                  }),
                ],
          },
          {
                label: "Enjeu bio. majeur",
                geometry: "LineString",
                styles: [
                  new ol.style.Style({
                        stroke: new ol.style.Stroke({ color: "rgba(225, 112, 85,1.0)", width: 4 }),
                  }),
                ],
          },
          {
                label: "Enjeu bio. inconnu",
                geometry: "LineString",
                styles: [
                  new ol.style.Style({
                        stroke: new ol.style.Stroke({ color: "rgba(255, 234, 167,1.0)", width: 4 }),
                  }),
                ],
          },
        ],
  };

//Appel de la donnée
  const layer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: LAYER_URL,
          format: new ol.format.GeoJSON(),
        }),
        //Analyse thématique ici sur l'attribut enjeu_bio
        style: function (feature, resolution) {
          var stl;
          if (feature.get("enjeu_bio")) {
                switch (feature.get("enjeu_bio")) {
                  case "modéré":
                        stl = legend.items[0].styles;
                        break;
                  case "élevé":
                        stl = legend.items[1].styles;
                        break;
                  case "très élevé":
                        stl = legend.items[2].styles;
                        break;
                  case "majeur":
                        stl = legend.items[3].styles;
                        break;
                }
          }
          return stl;
        },
  });
  handle = false;
  new CustomLayer(LAYER_ID, layer, legend);
};

Un troisième sur un polygone sans analyse thématique (pnr.js)

{
// Définition des constantes liées à la couche GeoServer
  const GEOSERVER_URL = "https://ows.region-bretagne.fr/geoserver";
  const WORKSPACE = "rb";
  const LAYER = "parc_naturel_regional";
  const LAYER_URL = `${GEOSERVER_URL}/${WORKSPACE}/wfs?service=WFS&version=1.0.0&request=GetFeature&typeNames=${LAYER}&outputFormat=application/json&srsName=EPSG:4326`;
// Définition de la variable customlayer. Elle doit être unique et correspond au nom du fichier javascript.
  const LAYER_ID = "pnr";

// Style des entités
  const legend = {
        items: [
          {
                label: "PNR",
                geometry: "Polygon",
                styles: [
                  new ol.style.Style({
                        stroke: new ol.style.Stroke({ color: "rgba(246, 185, 59,1.0)", width: 3 }),
                        fill: new ol.style.Fill({ color: "rgba(246, 185, 59,0.7)" }),
                  }),
                ],
          },
        ],
  };

//Appel de la donnée projection 4326
  const layer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: LAYER_URL,
          format: new ol.format.GeoJSON(),
        }),
        //Analyse thématique
        style: function (feature, resolution) {
          return legend.items[0].styles;
        },
  });
  handle = false;
  new CustomLayer(LAYER_ID, layer, legend);
};

Un dernier exemple sur un polygone avec analyse un champ numérique

{
// Définition des variables relatives à la couche.
  const GEOSERVER_URL = "https://ows.region-bretagne.fr/geoserver";
  const WORKSPACE = "rb";
  const LAYER = "indice_position_sociale_ecole";
  const LAYER_URL = `${GEOSERVER_URL}/${WORKSPACE}/wfs?service=WFS&version=1.0.0&request=GetFeature&typeNames=${LAYER}&outputFormat=application/json&srsName=EPSG:4326`;
// Définition de la variable customlayer. Elle doit être unique et correspond au nom du fichier javascript.
  const LAYER_ID = "indice_position_sociale_ecole";

// Style des entités.
  const legend = { items: [
        {
                label: "Moins de 80",
                geometry: "Point",
                styles: [new ol.style.Style({
                        image: new ol.style.Circle({
                fill: new ol.style.Fill({
                        color: '#B1252E'
                }),
                stroke: new ol.style.Stroke({
                        color: "#ffffff",
                        width: 3
                }),
                radius: 7
                })
        })]
        },
        {
                label: "Entre 80 et 100",
                geometry: "Point",
                styles: [new ol.style.Style({
                        image: new ol.style.Circle({
                fill: new ol.style.Fill({
                        color: '#C28B7E'
                }),
                stroke: new ol.style.Stroke({
                        color: "#ffffff",
                        width: 3
                }),
                radius: 7
                })
        })]
        },
        {
                label: "Entre 100 et 120",
                geometry: "Point",
                styles: [new ol.style.Style({
                        image: new ol.style.Circle({
                fill: new ol.style.Fill({
                        color: '#A6B4DA'
                }),
                stroke: new ol.style.Stroke({
                        color: "#ffffff",
                        width: 3
                }),
                radius: 7
                })
        })]
        },
        {
                label: "Plus de 120",
                geometry: "Point",
                styles: [new ol.style.Style({
                        image: new ol.style.Circle({
                fill: new ol.style.Fill({
                        color: '#4C75B6'
                }),
                stroke: new ol.style.Stroke({
                        color: "#ffffff",
                        width: 3
                }),
                radius: 7
                })
        })]
        }
]};

//Appel de la donnée
  const layer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: LAYER_URL,
          format: new ol.format.GeoJSON(),
        }),
//Analyse thématique ici sur l'attribut secteur_li
                style: function(feature, resolution) {
                        var stl;
                        if (feature.get('ips') < 80){
                                stl = legend.items[0].styles;
                        }
                        else if (feature.get('ips') >= 80 && feature.get('ips') < 100 ){
                                stl = legend.items[1].styles;
                        }
                        else if (feature.get('ips') >= 100 && feature.get('ips') < 120 ){
                                stl = legend.items[2].styles;
                        }
                        else if (feature.get('ips') >= 120 ){
                                stl = legend.items[3].styles;
                        }
                        return stl;
                }
  });
  handle = false;
  new CustomLayer(LAYER_ID, layer, legend);
};

Configuration dans le XML

Au niveau du fichier de configuration mviewer, il est nécessaire de faire les adaptations suivantes au niveau de la couche :

type="customlayer" vectorlegend="true" url="https://geobretagne.fr/pub/mviewer-formation/exemples/customlayers/auto_ecole.js"
searchable="true" searchengine="fuse" fusesearchkeys="NOM" fusesearchresult="{{NOM}} - {{TYPE}}" fusesearchthreshold="0.5"
  • type : mettre customlayer

  • vectorlegend : activer l’affichage de la légende saisie dans le fichier javascript

  • url : url du fichier javascript

  • searchable : activer la recherche

  • searchengine : activer le mode de recherche fuse

  • fusesearchkeys : champ dans lequel on va effectuer la recherche. Possible sur plusieurs champs (exemple : « NOM,TYPE »)

  • fusesearchresult : expression d’affichage du résultat de la recherche

  • fusesearchthreshold : optionnel, cette valeur permet de préciser si la recherche doit retourner des résultats très proches de la saisie (0) ou tout mot ou partie de mot qui correspond (1)