Default CORS request mode for tiles used in WebGL rendering

examples/webgl-layer-swipe.js

@@ -17,7 +17,6 @@ const imagery = new TileLayer({
     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>',
-    crossOrigin: '',
     maxZoom: 20,
   }),
 });

examples/webgl-sea-level.js

@@ -33,7 +33,6 @@ const layer = new TileLayer({
       'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
     tileSize: 512,
     maxZoom: 12,
-    crossOrigin: 'anonymous',
   }),
   style: {
     variables: {
@@ -56,7 +55,6 @@ const map = new Map({
       source: new XYZ({
         url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
         attributions: attributions,
-        crossOrigin: 'anonymous',
         tileSize: 512,
         maxZoom: 22,
       }),

examples/webgl-shaded-relief.js

@@ -50,7 +50,6 @@ const shadedRelief = new TileLayer({
   opacity: 0.3,
   source: new XYZ({
     url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',
-    crossOrigin: 'anonymous',
   }),
   style: {
     variables: variables,

examples/webgl-tile-style.js

@@ -22,7 +22,6 @@ const layer = new TileLayer({
     variables: variables,
   },
   source: new XYZ({
-    crossOrigin: 'anonymous', // TODO: determine if we can avoid this
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
     maxZoom: 20,

src/ol/webgl/TileTexture.js

@@ -175,6 +175,12 @@ class TileTexture extends EventTarget {
       if (this.loaded) {
         this.uploadTile_();
       } else {
+        if (tile instanceof ImageTile) {
+          const image = tile.getImage();
+          if (image instanceof Image && !image.crossOrigin) {
+            image.crossOrigin = 'anonymous';
+          }
+        }
         tile.addEventListener(EventType.CHANGE, this.handleTileChange_);
       }
     }

test/browser/spec/ol/webgl/TileTexture.test.js

@@ -77,6 +77,25 @@ describe('ol/webgl/TileTexture', function () {
     expect(tileTexture.loaded).to.be(true);
   });
 
+  it('sets anonymous cors mode for image tiles by default', function () {
+    const tile = new ImageTile([0, 0, 0], TileState.IDLE);
+    tileTexture.setTile(tile);
+    const image = tile.getImage();
+    expect(image.crossOrigin).to.be('anonymous');
+  });
+
+  it('resepects any existing cors mode', function () {
+    const tile = new ImageTile(
+      [0, 0, 0],
+      TileState.IDLE,
+      'https://example.com/tile.png',
+      'use-credentials'
+    );
+    tileTexture.setTile(tile);
+    const image = tile.getImage();
+    expect(image.crossOrigin).to.be('use-credentials');
+  });
+
   it('registers and unregisters change listener', function () {
     const tile = tileTexture.tile;
     expect(tile.getListeners('change').length).to.be(2);