Aller au contenu

Exercices Hydro (WMS)

Exercice - Hydro 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, diffusée sous forme de flux WMS.

  • (Dans une nouvelle page basée sur OpenLayers)
    • centrée sur Paris (2.35 / 48.85)
    • niveau de zoom 12
    • fond de carte OSM
  • ajoutez une nouvelle couche pour le flux WMS
    • couche de type ol.layer.Tile
    • source de type ol.source.TileWMS (couche WMS tuilée)
      • URL 'https://api.ensg.eu/geoserver/wms'
      • params : LAYERS le nom de la couche
new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'https://api.ensg.eu/geoserver/wms',
        params: { LAYERS: 'ensg:hydro' },
    })
})

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)
  • placez-le en dessous
new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 6,
        }),
    }),
})
  • 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)
  • 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

Enfin, nous souhaitons gérer une interaction avancée sur les pixels de la couche WMS (un survol) :

  • ajoutez un événement pointermove sur la carte
  • utilisez la méthode getData de votre couche ol.layer.Tile
    • renvoie un tableau contenant les données colorimétriques (si la source définit crossOrigin: 'anonymous')
  • si le résultat contient des données (donc des couleurs), modifiez le curseur de la carte (voir exemple ci-dessous) pour simuler un effet de survol
// change cursor on hover
map.on('pointermove', evt => {
    let data = layer.getData(evt.pixel);
    let hit = data && (data[0] > 0 || data[1] > 0 || data[2] > 0);
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});