Remove deprecated method PluggableMap#forEachLayerAtPixel

examples/interpolation.html

@@ -6,7 +6,7 @@ docs: >
   Example of data resampling when using raster DEM (digital elevation model) data.
   The <code>interpolate: false</code> setting is used to disable interpolation of data values during
   reprojection and rendering. Elevation data is
-  calculated from the pixel value returned by <b>forEachLayerAtPixel</b>. For comparison a second map
+  calculated from the pixel value returned by <b>getData</b>. For comparison a second map reprojected
   with interpolation enabled returns inaccurate elevations which are very noticeable close to 3107 meters
   due to how elevation is calculated from the pixel value.
 tags: "disable image interpolation, xyz, maptiler, reprojection"
@@ -21,7 +21,7 @@ cloak:
     <div>
       <label>
         Elevation
-        <span id="info1">0.0</span> meters
+        <span id="info1">-</span> meters
       </label>
     </div>
   </div>
@@ -31,7 +31,7 @@ cloak:
     <div>
       <label>
         Elevation
-        <span id="info2">0.0</span> meters
+        <span id="info2">-</span> meters
       </label>
     </div>
   </div>

examples/interpolation.js

@@ -9,8 +9,6 @@ const attributions =
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const notInterpolated = new TileLayer({
-  // specify className so forEachLayerAtPixel can distinguish layers
-  className: 'ol-layer-dem',
   source: new XYZ({
     attributions: attributions,
     url:
@@ -51,39 +49,25 @@ const map2 = new Map({
   view: view,
 });
 
+function getHeight(rgba) {
+  return -10000 + (rgba[0] * 256 * 256 + rgba[1] * 256 + rgba[2]) * 0.1;
+}
+
 const info1 = document.getElementById('info1');
 const info2 = document.getElementById('info2');
-
 const showElevations = function (evt) {
   if (evt.dragging) {
     return;
   }
-  map1.forEachLayerAtPixel(
-    evt.pixel,
-    function (layer, pixel) {
-      const height =
-        -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1;
-      info1.innerText = height.toFixed(1);
-    },
-    {
-      layerFilter: function (layer) {
-        return layer === notInterpolated;
-      },
-    }
-  );
-  map2.forEachLayerAtPixel(
-    evt.pixel,
-    function (layer, pixel) {
-      const height =
-        -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1;
-      info2.innerText = height.toFixed(1);
-    },
-    {
-      layerFilter: function (layer) {
-        return layer === interpolated;
-      },
-    }
-  );
+  const notInterpolatedPixel = notInterpolated.getData(evt.pixel);
+  info1.innerText = notInterpolatedPixel
+    ? getHeight(notInterpolatedPixel).toFixed(1)
+    : '-';
+
+  const interpolatedPixel = interpolated.getData(evt.pixel);
+  info2.innerText = interpolatedPixel
+    ? getHeight(interpolatedPixel).toFixed(1)
+    : '-';
 };
 
 map1.on('pointermove', showElevations);