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)
• creéz une nouvelle couche de type ol.layer.WebGLTile
  • opacity à 0.6
  • ol.source.XYZ = https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png
  • style basé sur les expressions

    // definition de la couleur des pixels du service utilisé
    // https://github.com/nst-guide/terrain
    // elevation = (red * 256 + green + blue / 256) - 32768
    let elevation = [
        '+',
        ['*', 255 * 256, ['band', 1]],
        ['*', 255, ['band', 2]],
        ['*', 255 / 256, ['band', 3]],
        -32768,
    ];
    
    let layer = new ol.layer.WebGLTile({
        opacity: 0.6,
        source: new ol.source.XYZ({
            url:
                'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png',
            tileSize: 256,
            maxZoom: 14,
        }),
        style: {
            variables: {
                level: 10,
            },
            color: [
                'case',
                // utilise la variable level
                ['<=', elevation, ['var', 'level']],
                [139, 212, 255, 1],
                [139, 212, 255, 0],
            ],
        },
    });
    

• ajoutez un contrôle HTML de type <input type="range">, qui permettra de modifier le niveau en temps-réel
• ajoutez un événement JS sur ce champ pour modifier la variable level, et affichez sa valeur dans la page

  votre_controle.addEventListener('input', evt => {
    layer.updateStyleVariables({ level: parseFloat(control.value) });
    result.innerText = control.value;
  });