Aller au contenu

Exercices Niveau des mers

Exercice - Niveau des mers#

Nous voulons visualiser l’impact de la montée du niveau des mers. Pour cela, nous utiliserons un service de tuiles représentant l’élévation, associé à une couche WebGL pour modifier la couleur des pixels des tuiles.

  • dans une nouvelle page basée sur OpenLayers
  • créez une carte avec un fond IGN
    • source XYZ, flux TMS: https://data.geopf.fr/tms/1.0.0/GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2/{z}/{x}/{y}.png
    • centrée sur le Nord de la France
    • au zoom 8

  • basez-vous sur l’exemple d’OpenLayers

    • creéz une nouvelle couche de type ol.layer.WebGLTile
      • opacity à 0.6
      • source XYZ, flux XYZ https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png
      • style basé sur les expressions
    • modifiez le calcul de l’élévation pour vous adapter aux tuiles utilisées

  • ajoutez un contrôle HTML de type <input type="range">, qui permettra de modifier le niveau en temps-réel

    • min: 0, max: 100, step: 1
  • avec Vue.js ou via le DOM
    • ajoutez un événement JS sur ce champ pour modifier la variable level 
      webGlLayer.updateStyleVariables({ level: parseFloat(control.value) });
    • affichez la valeur du champ dans la page