Set reprojection canvas context options

Add example of disabling image smoothing

Add test for reprojection context options

examples/disable-image-smoothing.css

@@ -0,0 +1,15 @@
+@media (min-width: 800px) {
+  .wrapper {
+    display: flex;
+  }
+  .half {
+    padding: 0 10px;
+    width: 50%;
+    float: left;
+  }
+}
+#opacity {
+  display: inline-block;
+  width: 150px;
+  vertical-align: text-bottom;
+}

examples/disable-image-smoothing.html

@@ -0,0 +1,47 @@
+---
+layout: example.html
+title: Disable Image Smoothing
+shortdesc: Example of disabling image smoothing
+docs: >
+  Example of disabling image smoothing when using raster DEM (digital elevation model) data.
+  The <b>imageSmoothingEnabled</b> (or for Internet Explorer <b>msImageSmoothingEnabled</b>) canvas
+  context property is set to false at the layer's <b>prerender</b> event. Additionally for a
+  reprojected source those properties must also be also be specified for the canvas contexts used in
+  the reprojection via the source's <b>reprojectionContextOptions</b> option. Elevation data is
+  calculated from the pixel value returned by <b>forEachLayerAtPixel<b>. For comparison a second map
+  with smoothing enabled returns inaccuate elevations which are very noticeable close to 3107 meters
+  due to how elevation is calculated from the pixel value.
+tags: "disable image smoothing, xyz, maptiler, reprojection"
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
+---
+<div class="wrapper">
+  <div class="half">
+    <h4>Smoothing Disabled</h4>
+    <div id="map1" class="map"></div>
+    <div>
+      <label>
+        Elevation
+        <span id="info1">0.0</span> meters
+      </label>
+    </div>
+    <div>
+      <label>
+        Imagery opacity
+        <input id="opacity" type="range" min="0" max="100" value="80" />
+        <span id="output"></span> %
+      </label>
+    </div>
+  </div>
+  <div class="half">
+    <h4>Uncorrected Comparison</h4>
+    <div id="map2" class="map"></div>
+    <div>
+      <label>
+        Elevation
+        <span id="info2">0.0</span> meters
+      </label>
+    </div>
+  </div>
+</div>

examples/disable-image-smoothing.js

@@ -0,0 +1,115 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import XYZ from '../src/ol/source/XYZ.js';
+
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+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 disabledLayer = new TileLayer({
+  // specify className so forEachLayerAtPixel can distinguish layers
+  className: 'ol-layer-dem',
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
+    maxZoom: 10,
+    crossOrigin: '',
+    reprojectionContextOptions: {imageSmoothingEnabled: false, msImageSmoothingEnabled: false}
+  })
+});
+
+const imagery = new TileLayer({
+  className: 'ol-layer-imagery',
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20,
+    crossOrigin: ''
+  })
+});
+
+const enabledLayer = new TileLayer({
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
+    maxZoom: 10,
+    crossOrigin: ''
+  })
+});
+
+disabledLayer.on('prerender', function(evt) {
+  evt.context.imageSmoothingEnabled = false;
+  evt.context.msImageSmoothingEnabled = false;
+});
+
+imagery.on('prerender', function(evt) {
+  // use opaque background to conceal DEM while fully opaque imagery renders
+  if (imagery.getOpacity() === 1) {
+    evt.context.fillStyle = 'white';
+    evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
+  }
+});
+
+const control = document.getElementById('opacity');
+const output = document.getElementById('output');
+control.addEventListener('input', function() {
+  output.innerText = control.value;
+  imagery.setOpacity(control.value / 100);
+});
+output.innerText = control.value;
+imagery.setOpacity(control.value / 100);
+
+const view = new View({
+  center: [6.893, 45.8295],
+  zoom: 16,
+  projection: 'EPSG:4326'
+});
+
+const map1 = new Map({
+  target: 'map1',
+  layers: [disabledLayer, imagery],
+  view: view
+});
+
+const map2 = new Map({
+  target: 'map2',
+  layers: [enabledLayer],
+  view: view
+});
+
+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 === disabledLayer;
+      }
+    }
+  );
+  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 === enabledLayer;
+      }
+    }
+  );
+};
+
+map1.on('pointermove', showElevations);
+map2.on('pointermove', showElevations);