:: Yves Jacolin :: Ludovic Granjon :: Softlibre :: OSGeo-fr ::
"Quand on veut reprendre avec utilité, et montrer à un autre qu'il se trompe, il faut observer par quel côté il envisage la chose, car elle est vraie ordinairement de ce côté-là, et lui avouer cette vérité, mais lui découvrir le côté où elle est fausse." Pascal, Pensées Br. 9, Lafuma 5.

Sommaire | Module suivant


Workshop : OpenLayers - Construire un application de Web mapping avec une fondation solide

Module 4 : Objets vectoriels

Dans le module 2, nous avons vu deux différents type de couches : les couches qui chargent des tuiles d'images sur la surface de la carte (WMS) et les couches qui chargent des objets individuels comme des points, des lignes et des polygones (WFS). Dans ce module, nous allons explorer la puissance d'OpenLayers que vous permet sur les données vectorielles.

Formats vectoriels

OpenLayers a la possibilité de lire et d'écrire des données vectorielles dans différents formats sérialisés. Ceci inclut :

  • GeoJSON - une manière standard de représenter les objets spatiaux en utilisant une Notation Objet JavaScript (NdT : JavaScript Objet Notation) ;
  • KML - un schéma XML pour les données spatiaux qui est utilisé par Google Earth en Google Maps ;
  • GeoRSS - un standard émergeant pour géocoder une localisation en tant que flux RSS ;
  • GML - le schéma XML de l'Open Source Geospatal Consortium pour la représentation d'objets spatiaux ;
  • WKT - Well Known Text, un format en texte simple pour représenter des objets, également géré par l'OGC.

Tâche : ouvrez le fichier 4-vector-formats.html dans votre navigateur. Utilisez l'outil pour dessiner des points, des lignes et des polylignes. Passez la souris par dessus les objets que vous avez dessiné (avec l'outil 'main') pour voir le code sous-jacent utilisé pour générer ces objets. Changez le format d'affichage en utilisant la liste déroulante pour voir les différents formats pour la sérialisation des objets vectoriels. Essayez de comprendre la structure de chaque format.

Tâche : si vous avez déjà installé Google Earth sur votre ordinateur, dessinez des lignes ou des polygones dans Google Earth, sélectionnez et copiez-les, puis collez-les dans le champ input dans cet exemple. Sélectionnez KML comme format et cliquez sur le bouton “ajoutez objets” (NdT : add feature).

Tâche en bonus : La tache précédente peut également être réalisé dans le sens inverse. Dessinez un objet dans OpenLayers, choisissez KML dans la liste déroulante puis passez la souris sur l'objet. Copiez le texte affiché et copiez le dans Google Earth (le répertoire My place doit être sélectionné dans Google Earth avant de copier la nouvelle forme).

Édition d'objet

Une des raisons qui vous fera vouloir charger des données dans OpenLayers en tant que données vectorielles au lieu de tuiles créées est qu'OpenLayers fournit des outils qui vous permet de modifier des objets individuels.

Tâche : ouvrez le fichier 4-modify.html. Jouez avec l'éditeur de polygones et modifiez les objets que vous avez dessinés. Le contrôleur pour modifier les objets peut être configuré avec des options qui permettent la rotation, le redimenssionnement ou la modification des objets.

Style

Une autre raison qui vous fera utiliser une couche vectorielle est qu'avec OpenLayers vous avez des outils puissant pour contrôler l'apparence, ou style, des données côté client.

Par défaut, les objets rendu par OpenLayers sont orange. Ce style est entièrement personnalisable en utilisant des règles de style qui peut être soit écrit en JavaScript ou lu à partir d'un fichier de style externe (tel que les SLD de GeoServer).

Tâche : ouvrez le fichier 4-style-rules.html dans votre navigateur. Cet exemple demande les états US sur GeoServer avec une couche WFS. Cette couche est affichée côté client en utilisant des règles qui déterminent la couleur basé sur la population.

Jetez un oeil au code source de cet exemple. D'abord notez que nous avons ajouté une propriété supplémentaire à notre couche WFS :

  var states = new OpenLayers.Layer.WFS(
      "US States",
      "http://localhost/geoserver/wfs",
      {typename: "topp:states"},
      {isBaseLayer: true, extractAttributes: true, styleMap: myStyleMap}
  );

Nous définissons la propriété styleMap de la couche à myStyleMap.

var myStyleMap = new OpenLayers.StyleMap({
    "default": defStyle,
    "select": selStyle
});

Dans ce cas, nous avons initialisé le style styleMap avec plusieurs styles, indexé par 'but d'affichage'. Les trois buts possibles sont :

  • default - style pour l'affichage standard des objets sur la carte ;
  • select - style pour les objets qui ont été sélectionnés d'une manière ou d'une autre ;
  • temporary - style pour les objets qui seront temporairement sur la carte.

Notre exemple utilise seulement les buts de rendu “default” et “select” Remarquez comment, lorsque vous passez au-dessus d'un objet dans l'exemple, l'apparence de cet objet change. Une définition d'un nouveau style (avec le rendu “select”) est utilisé pour les objets sélectionnés contrairement à ceux par défaut.

Maintenant regardons un style particulier.

  var selStyle = new OpenLayers.Style({
      fillColor: "#ffaa00"
 });

C'est le style pour les objets sélectionnés dans l'exemple. Dans ce cas, le constructeur prend une pair clé/valeur (“hash”) qui informe OpenLayers comment afficher l'objet quand ce style est utilisé (dans ce cas : fillColor: “#ffaa00”).

Des styles plus complexes peuvent utiliser plusieurs règles pour déterminer comment plusieurs objets peuvent être affichés. Par exemple, regardez la première règle ajoutée au style par défaut :

  defStyle.addRules([
      new OpenLayers.Rule({
          symbolizer: {
              fillColor: "#ffeecc"
          },
          filter: new OpenLayers.Filter.Comparison({
              type: OpenLayers.Filter.Comparison.LESS_THAN,
              property: "PERSONS",
              value: 1000000
          })
      }),

Cette règle définie la couleur de remplissage pour les objets qui passent à travers ce filtre. Les filtres d'OpenLayers sont basés sur les spécifications des filtres de l'OGC, et fonctionnent d'une manière similaire. Ce filtre fait la correspondance avec les objets qui ont une propriété PERSONS qui est inférieur à 1 000 000. Il y a d'autres règles dans ce code pour d'autres domaines de population.

Plus d'information sur la manière de créer des filtres de comparaison peut être trouvé sur http://dev.openlayers.org/apidocs/files/OpenLayers/Filter/Comparison-js.html.

En plus de créer des styles basés sur des règles, les styles d'objets peuvent être déterminé sur la base de n'importe quelle fonction qui évalue chaque objet vectoriel.

Tâche : ouvrez le fichier exemple 4-style-context.html. Cet exemple est similaire au précédent sauf que la couleur de remplissage est basé sur une densité de population, une valeur qui n'est pas intrinsèque aux données mais est calculée dynamiquement. Ces deux exemples utilisent un contrôleur SelectFeature. Ici le contrôleur SelectFeature est utilisé pour changer le style de l'objet et afficher les détails de l'objet sélectionné (nom et densité de population). Ouvrez l'exemple dans un éditeur de texte pour voir comment le contrôleur est configuré.

Regardez comment ce style est écrit :

var defStyle = new OpenLayers.Style(
    {
        strokeWidth: 0,
        fillColor: "${getFillColor}"
    }, {
        context: {
            getFillColor: function(feature) {
                var max = 75;
                var density = feature.attributes.PERSONS / feature.attributes.LAND_KM;
                // calculate hex values from density
                var grn = (
                    Math.round(
                        225 * (1 - Math.min(max, density) / max)
                    )).toString(16);
                grn = (grn.length == 1) ? ("0" + grn) : grn;
 
...
 
                return "#ff" + grn + blu;
            }
        }
    }
);

Dans ce style, nous définissons un “contexte” pour le style, qui inclut une fonction nommée getFillColor qui prend un objet comme argument et renvoie des valeurs de couleurs sur la propriété de l'objet. La syntaxe ${…} est alors utilisée pour se référer à la fonction dans le contexte. Lorsque ce style est utilisé pour déterminer comment un objet est affiché, la fonction getFillColor est appelée sur cet objet, et la sortie de cette fonction est assignée à la propriété fillColor de cet objet dans le rendu.

Tâche en bonus : voyez si vous pouvez éditer l'exemple 4-style-contexte.html pour créer des styles qui colorent tous les états dont le nom démarre avec la lettre “M” (la propriété qui stocke le nom de l'état est STATE_NAME). La référence suivante peut être utile : http://www.w3schools.com/jsref/jsref_obj_string.asp.

WFS-T

OpenLayers est utilisable comme outil d'édition vectoriel (voir section 2 de ce module) parce qu'il peut interagir avec des données persistantes stockées sur un serveur. Dans cette section, nous utiliserons un WFS-Transactionnel (WFS-T), un standard de l'OGC pour émettre des transactions à un ensemble de données spatiales dans le but de modifier ces données sur le serveur.

Tâche : ouvrez le ficher 4-persistence.html dans votre navigateur. Examinez les points sur la carte en cliquant dessus. Maintenant ajoutez vos propres points en cliquant sur le bouton “Ajouter un point”, remplissez un titre et une description pour votre point puis cliquez sur la carte.

Regardez la boite de requête. À l'intérieur, vous devriez trouver du XML qui a été POSTé au serveur dans le but de lui donner les changements des données. Dans cette requête est incluse une description de votre point dans un des formats que vous avez utilisé dans la section 1 de ce module. Pouvez-vous me dire lequel ?

Rafraîchissez la page. Vous devriez voir votre point chargé dans la carte. Cliquez dessus pour vous en assurer.

Contact - Information et copyright - Statistique

Recent changes RSS feed Creative Commons License Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki