Aller au contenu

Exercices Webmapping - Hydro

Exercice - Flux WMS#

L’objectif de cet exercice est de visualiser tous les cours d’eau de France sur une carte. Pour cela, nous avons a disposition une base de données PostGIS contenant les données de la BD Topage, que nous allons connecter à un serveur cartographique GeoServer, pour créer un flux WMS tuilé, et ainsi l’afficher sur une carte OpenLayers.

Base de données :

  • serveur : u2.ensg.eu
    • base : hydro
    • utilisateur : user_hydro
    • mot de passe : user_hydro
    • table : lines
  • ou export disponible au format Shapefile
    • il vous faut une base Postgres
    • activez PostGIS avec CREATE EXTENSION POSTGIS; (il faut les modules PostGIS)
    • copiez les données avec ogr2ogr -f "PostgreSQL" PG:"host=<server> dbname=<dbname> user=<user> password=<password>" CoursEau_FXX.shp -nln <nom_table> -nlt PROMOTE_TO_MULTI -overwrite

Serveur cartographique :

  • lancez GeoServer
    • URL par défaut: http://localhost:8080/geoserver
    • user admin, pass geoserver
  • créez un nouveau Store de type PostGIS (avec les bonnes informations de connexion)
  • publiez un nouveau Layer (données en EPSG:2154)
    • pensez à faire calculer les Bounding Boxes
  • vérifiez que le flux s’affiche dans Layers Preview

Appli carto coté client :

  • créez une nouvelle page
  • créez une carte OpenLayers
    • la carte doit être centrée sur Paris (2.35 / 48.85)
    • niveau de zoom 12
    • fond de carte OSM

<!-- Librairie OpenLayers -->
<link rel="stylesheet" href="https://unpkg.com/ol/ol.css">
<script src="https://unpkg.com/ol/dist/ol.js"></script>

new ol.Map({
    target: 'map',
    view: new ol.View({
        center: ol.proj.fromLonLat([2.35, 48.85]),
        zoom: 13,
    }),
});

  • ajoutez une nouvelle couche pour le flux WMS
    • couche de type ol.layer.Tile
    • source de type ol.source.TileWMS
      • avec URL de votre geoserver
      • params : LAYER le nom de votre couche, TILED: true pour un WMS tuilé
new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/wms',
        params: {'LAYERS': '...', 'TILED': true},
    })
})

Ensuite, lors du clic sur un tronçon, nous voulons visualiser le cours d’eau sélectionné, et afficher son toponyme dans la page. Pour cela :

  • créez d’abord un nouveau calque vectoriel qui servira à afficher nos données (calque de type ol.layer.Vector, source ol.source.Vector)
new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 5,
        }),
    }),
})
  • ajoutez un évenement click sur la carte
  • générez l’URL pour réaliser ensuite un getFeatureInfo sur votre flux WMS
let viewResolution = map.getView().getResolution();
let url = wmsSource.getFeatureInfoUrl(
    evt.coordinate, // la coordonnée cliquée
    viewResolution,
    'EPSG:3857', // projection par défaut dans OpenLayers
    {'INFO_FORMAT': 'application/json'} // format de retour souhaité
)
  • faites un appel AJAX sur cette URL
  • récupérez le résultat en geoJSON (par défaut) et ajoutez les features dans le calque vectoriel créé plus tôt. Pour cela :
    • récupérez les features du geoJSON : let features = new ol.format.GeoJSON().readFeatures(json)
    • ajoutez les features au calque : layer.getSource().addFeatures(features)

Enfin :

  • ajoutez le nom de la feature (clé topooh) dans un bloc de la page
  • pensez à supprimer tous les objets du calque (layer.getSource().clear()) à chaque clic