Replace imageSmoothingEnabled with interpolate

examples/sea-level.html

@@ -8,11 +8,6 @@ docs: >
     <a href="https://blog.mapbox.com/styling-mapbox-terrain-rgb-c75d1cd71471">Mapbox Terrain-RGB tiles</a>
     to "flood" areas below the elevation shown on the sea level slider.
   </p>
-  <p>
-    <code>ol/source/Raster</code> can take either a tile source or layer.
-    In this case a layer is used to allow disabling at the <code>prerender</code> event
-    of image smoothing which would change the precise elevation values set in the pixels.
-  </p>
 tags: "raster, pixel operation, flood"
 cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB

examples/sea-level.js

@@ -26,18 +26,14 @@ 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 TileLayer({
-  source: new XYZ({
-    url:
-      'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
+const elevation = new XYZ({
+  // The RGB values in the source collectively represent elevation.
+  // Interpolation of individual colors would produce incorrect evelations and is disabled.
+  url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
   tileSize: 512,
   maxZoom: 12,
   crossOrigin: '',
-  }),
-});
-elevation.on('prerender', function (evt) {
-  evt.context.imageSmoothingEnabled = false;
-  evt.context.msImageSmoothingEnabled = false;
+  interpolate: false,
 });
 
 const raster = new RasterSource({