This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Sea Level

raster 6 pixeloperation 1 flood 2

#####

Sea level + m
Go to San Francisco, New York, Mumbai, or Shanghai

Render sea level at different elevations

This example uses a `ol/source/Raster` with MapTiler Terrain-RGB tiles to "flood" areas below the elevation shown on the sea level slider.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import ImageLayer from 'ol/layer/Image.js';
    import TileLayer from 'ol/layer/Tile.js';
    import {fromLonLat} from 'ol/proj.js';
    import ImageTile from 'ol/source/ImageTile.js';
    import RasterSource from 'ol/source/Raster.js';

    function flood(pixels, data) {
      const pixel = pixels[0];
      if (pixel[3]) {
        const height =
          -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1;
        if (height <= data.level) {
          pixel[0] = 134;
          pixel[1] = 203;
          pixel[2] = 249;
          pixel[3] = 255;
        } else {
          pixel[3] = 0;
        }
      }
      return pixel;
    }

    const key = 'Get your own API key at https://www.maptiler.com/cloud/';
    const attributions =
      '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
      '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

    const elevation = new ImageTile({
      // The RGB values in the source collectively represent elevation.
      // Interpolation of individual colors would produce incorrect elevations and is disabled.
      url:
        'https://api.maptiler.com/tiles/terrain-rgb-v2/{z}/{x}/{y}.webp?key=' + key,
      tileSize: 512,
      maxZoom: 14,
      interpolate: false,
    });

    const raster = new RasterSource({
      sources: [elevation],
      operation: flood,
    });

    const map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new ImageTile({
            attributions: attributions,
            url:
              'https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=' + key,
            tileSize: 512,
            maxZoom: 22,
          }),
        }),
        new ImageLayer({
          opacity: 0.6,
          source: raster,
        }),
      ],
      view: new View({
        center: fromLonLat([-122.3267, 37.8377]),
        zoom: 11,
      }),
    });

    const control = document.getElementById('level');
    const output = document.getElementById('output');
    control.addEventListener('input', function () {
      output.innerText = control.value;
      raster.changed();
    });
    output.innerText = control.value;

    raster.on('beforeoperations', function (event) {
      event.data.level = control.value;
    });

    const locations = document.getElementsByClassName('location');
    for (let i = 0, ii = locations.length; i < ii; ++i) {
      locations[i].addEventListener('click', relocate);
    }

    function relocate(event) {
      const data = event.target.dataset;
      const view = map.getView();
      view.setCenter(fromLonLat(data.center.split(',').map(Number)));
      view.setZoom(Number(data.zoom));
    }

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Sea Level</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
          #level {
            display: inline-block;
            width: 150px;
            vertical-align: text-bottom;
          }

          a.location {
            cursor: pointer;
          }

          #map {
            background: #85ccf9;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>
        <label>
          Sea level
          <input id="level" type="range" min="0" max="100" value="1"/>
          +<span id="output"></span> m
        </label>
        <br>
        Go to
        <a class="location" data-center="-122.3267,37.8377" data-zoom="11">San Francisco</a>,
        <a class="location" data-center="-73.9338,40.6861" data-zoom="11">New York</a>,
        <a class="location" data-center="72.9481,18.9929" data-zoom="11">Mumbai</a>, or
        <a class="location" data-center="120.831,31.160" data-zoom="9">Shanghai</a>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "sea-level",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }