Afficher les infos d'une couche WFS dans un popup#

Date de publication initiale : 24 janvier 2009

Introduction#

L'API d'OpenLayers permet d'afficher une couche WFS ainsi que les données attributaires qui lui sont rattachées. Même si cela n'est pas très compliqué à réaliser il existe certaines subtilités.

La couche WFS#

L'affichage d'une couche WFS depuis OpenLayers se fait comme n'importe qu'elle autre couche à ceci prêt que nous allons, pour les besoins de ce tutoriel, spécifier un attribut supplémentaire qu'est extractAttributes. Celui-ci est optionnel mais il permet de parser le flux WFS afin d'extraire les données attributaires. A noter que cela ralentit le traitement cartographique.

var africaWFS = new OpenLayers.Layer.WFS(
   "Africa WFS",
   "http://pathToMapServ/mapserv?map=/pathToYourMapFile/africa.map&",
   {typename: 'Africa'},
   {style: fStyle, extractAttributes: true}
 );

Bien entendu il est nécessaire que votre moteur cartographique soit configuré pour envoyer des données attributaires. Dans le cas de MapServer n'oubliez pas de définir pour vos couches les paramètres DUMP et gml_include_items (voir MapServer WFS)

LAYER
 NAME Africa
 STATUS ON
 METADATA
  ### WMS
  "wms_title"    "Africa"
  ### WFS
  "wfs_title"    "Africa"
      "gml_featureid" "NAME"
      "gml_include_items" "all"
 END
 PROJECTION
  "init=epsg:4326"
 END
 DUMP TRUE
 TYPE POLYGON
 STATUS ON
 DATA africa
 CLASS
  COLOR 217 217 217
  OUTLINECOLOR 0 0 0
 END

Extraire les données attributaires#

Pour accéder aux données d'une couche WFS vous devez spécifier la propriété attributes suivi du nom de la balise XML que vous souhaitez afficher (qui est égal à son nom dans la table attributaire mais en majuscule). Par exemple si dans votre flux il existe une valeur "NAME" pour l'afficher vous devrez faire monObjetWFS.attributes.NAME

Enfin, en toute logique votre PopUp se déclenchera sur une action (cf selectFeature). Dans ce cas, la fonction à laquelle renvoie le listener inclut directement l'objet WFS. C'est un peu confus à expliquer mais vous comprendrez mieux dans l'exemple ci-dessous :

function init() {
    /*
     * Some code before
     */
    // Instanciation du control selectFeature
    options = {  
         hover: false,
         // Fait reference a la fonction popUp
         onSelect: popUP,
         selectStyle :feature_style
    };  
    sf = new OpenLayers.Control.SelectFeature(africaWFS, options)
    map.addControl(sf);
    sf.activate();
}

function popUP(e) {
   // Je verifie qu'aucun popup n'existe deja
   if(typeof popup!='undefined'){
         popup.destroy();
    }
    //je definis les params de mon popup
    var htmlContent = "<b>Pays : "+e.attributes.NAME+"</b><br /> <b><i>Region : "+e.attributes.REGION+"</b></i>";  
    var size = new OpenLayers.Size(20,34);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    //j'instancie mon popup
    popup = new OpenLayers.Popup.FramedCloud(
         e.fid,
         e.geometry.getBounds().getCenterLonLat(),
         null,
         htmlContent,
         null,
         false,
          null
    );
    //Je l'ajoute a la carte
    map.addPopup(popup);  
}  

Exemple#

Auteur·ice#

Arnaud Vandecasteele#

Bien qu'issu à l'origine d'un parcours universitaire (doctorat et post-doc), j'ai finalement tenté l'aventure entrepreunariale au travers de Geolab.
Mes principaux centres d'intêrets dans le domaine de la géomatique portent sur les logiciels Open Source et plus particulièrement QGIS.
J'aime également le développement informatique avec une forte préférence à tout ce qui se passe côté serveur (base de données, traitements, etc.). Côté techno, mes choix se portent habituellement sur du (Geo)Django et PostgreSQL/PostGIS.

Pendant mon temps libre, vous me trouverez un GPS à la main afin de contribuer à OpenStreetMap ou sur un tatami en train de pratiquer le Jiu-Jitsu Brésilien.

Si vous êtes intéressé par l'un ou tous ces sujets, n'hésitez pas à me contacter !

Commentaires