Utilisation des services WMS et WFS sous un client web Leaflet ou OpenLayers 3

Utilisation des services sous un client web

Nous avons vu comment créer une carte sous le logiciel client QGIS et comment publier le projet sous le serveur cartographique QGIS server au travers de deux types de services, WMS et WFS. Nous sommes donc en mesure de servir des données cartographiques au travers du Web. Ce n’est que la face cachée de l’iceberg, nous allons exploiter ces services pour construire une application de rendu de carte dynamique dans un navigateur web.

Les solutions clientes qui permettent le rendu de cartes interactives sur un navigateur sont des librairies en langage Javascript. Nous couvrirons deux de ces librairies : premièrement la librairie Leaflet qui a été conçue après l’apparition du HTML5 dans un souci de simplicité et d’efficacité, puis on s’attardera sur la référence dans le domaine, la librairie OpenLayers. Pour cette dernière j’emploierai la version 3 qui est une refonte moderne de la version 2, désormais obsolète pour les futur développements.

QGIS possède des extensions pour ces deux librairies qui permettent de générer un squelette de projet web très simplement à partir du projet en cours. Nous allons utiliser ces extensions qui nous facilitent le travail pour initialiser avec les bons paramètres les couches du projet à charger. Ces extensions permettent de générer dans un fichier au format Json les données de couches exploitées par la librairie javascript, alors que l’on souhaite interroger le serveur cartographique. Nous testerons la capacité de ces extensions à générer du code d’appel aux services WFS puis nous verrons en détail le code source nécessaire pour interroger un serveur distant.

Rappels sur le projet de test

Le projet de test est celui que nous avons publié sur le serveur cartographique. Il comporte cinq couches destinées à mettre en évidence les intersections des collèges et lycées avec des parcelles cultivées dans un rayon de 50 mètres, sur le département de la Gironde.

Les couches Departement et cultures_33 servent à représenter les limites administratives, et limites de parcelles. Elles sont récupérées depuis la base de données. Les autres couches sont des couches projet enregistrées au format fichier Shapefile, elles servent à matérialiser les établissements que l’on a identifiés : la couche etabs_sel permet d’afficher un point aux coordonnées de latitude et longitude de l’établissement, la couche etabs_tampon_selec sert à délimiter le périmètre autour de l’établissement et finalement la couche etab_parcel_inters_50m met en évidence l’intersection entre la parcelle de culture et la zone tampon de 50 mètres autour de l’établissement.

Préparation du projet de test

Dupliquons dans le projet la couche des départements chargée dans la base locale avec la même couche mais chargée cette fois depuis le serveur cartographique.
Cette manipulation permettra de tester la capacité des extensions QGIS à générer le code client pour l’exploitation du service.

Ouvrez le projet QGIS que vous avez publié sur le serveur cartographique et enregistrez le sous un autre nom
(ex. C:\SIG\projet_1\projet_1.qgs vers C:\SIG\projet_1\projet_1_distant.qgs)

Ajoutez la couche WFS des départements (Depuis l’icône à gauche ou bien Couche > Ajouter une couche WFS)

Vous devriez avoir désormais deux couches de départements… il vous suffit de copier le style de la première et de l’appliquer à la seconde.

Faites un clic droit dans l’explorateur de couche sur la couche initiale, sélectionnez l’entrée de menu Copier le style.
Procédez de même sur la couche de destination pour Coller le style.

Modifiez le nom de la couche de destination puis enregistrez !

Préparation du projet sous QGIS pour le client Leaflet

Sous QGIS, ouvrez le gestionnaire d’extension depuis le menu principal
Extension > Installer / Gérer les extensions
Recherchez et installez l’extension qgis2leaf
Ouvrez le projet QGIS que vous avez publié sur le serveur cartographique.
(ex. C:\SIG\projet_1\projet_1.qgs)

Depuis le menu principal vous pouvez alors créer une carte web
Internet > qgis2leaf > Export a QGIS project to a working leaflet webmap

Je n’ai renseigné qu’un minimum d’options afin dans un premier temps de générer le moins de code possible :

  • Appuyer sur le bouton Get Layers permet de charger vos couches dans l’extension. Vous pouvez sélectionner les couches à exporter, ici j’ai sélectionné toutes les couches
  • Le champ Frame width / height permet de déterminer les dimensions de la carte sur la page web, j’ai sélectionné le champ Full screen pour utiliser tout l’écran
  • Le champ Extent permet de définir l’étendue géographique initiale à l’arrivée sur l’application, par défaut elle est positionnée à l’étendue du canvas en cours, ici je me suis positionné sur une vue globale centrée sur la Gironde
  • Le champ Basemaps permet de faire une sélection multiple de cartes à importer pour le fond de carte, pour l’habillage j’utilise le fond de carte OpenStreetMap OSM Standard

Le projet est enregistré et ouvert dans un navigateur web, le résultat est fonctionnel on peut masquer des couches et zoomer. Par contre la couche des cultures est affichée quelle que soit l’étendue géographique, alors que l’on avait paramétré dans le projet sa visibilité. Le chargement très long de la page est lié à la quantité de données de cette couche chargée intégralement et sera réduit lorsqu’on chargera la couche depuis le service web en fonction de l’étendue géographique. Notez également que la couche WFS des départements n’est pas rendue…

Pour terminer avec les problèmes relevés : l’étendue initiale du canevas n’est pas respectée.

Ce premier rendu est prometteur, nous rentrerons dans un second temps dans le code qui a été généré, pour le moment voyons en parallèle comment arriver aux mêmes résultats avec une autre librairie.

Préparation du projet sous QGIS pour le client OpenLayer 3

Sous QGIS, ouvrez le gestionnaire d’extension depuis le menu principal
Extension > Installer / Gérer les extensions
Dans l’onglet Paramètres cochez la case pour afficher les extensions expérimentales.
Recherchez et installez l’extension Export to OpenLayers 3
Ouvrez le projet QGIS préparé précédemment. Vous pouvez alors créer une carte web OpenLayers3
Internet > Export to Open Layers > Create OpenLayers map

J’ai laissé les paramètres par défaut devant le peu de choix et l’absence d’aide à l’utilisation. L’extension s’exécute, cela requiert du temps à nouveau en raison de la couche des cultures qui représente 20 Mo de données au format Json. La carte possède les mêmes qualités et défauts que la carte générée pour la librairie Leaflet, c’est à dire que les cultures sont représentées indépendamment de l’échelle, le service WFS n’est pas non plus exploité car les données ont été converties au format Json.

Nous avons vu comment générer les squelettes des codes sources qui permettent d’utiliser des clients web pour l’affichage cartographique. Pour chaque solution nous allons explorer plus en détail le code afin d’expliquer le fonctionnement des librairies et comment nous pouvons remplacer les données générées en dur par des données issues des services que l’on a mis en place.

Faites découvrir ce billet...Email this to someonePrint this pageShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *