Properly handle alt tiles of transparent images

examples/data-tiles.js

@@ -33,6 +33,8 @@ const map = new Map({
           const data = context.getImageData(0, 0, size, size).data;
           return Promise.resolve(data);
         },
+        // disable opacity transition to avoid overlapping labels during tile loading
+        transition: 0,
       }),
     }),
   ],

src/ol/renderer/webgl/TileLayer.js

@@ -293,6 +293,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
 
     const uid = getUid(this);
     const time = frameState.time;
+    let blend = false;
 
     // look for cached tiles to use if a target tile is not ready
     const tileTextures = tileTexturesByZ[z];
@@ -308,6 +309,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
           tile.endTransition(uid);
           continue;
         }
+        blend = true;
         const tileCoordKey = getTileCoordKey(tileCoord);
         alphaLookup[tileCoordKey] = alpha;
       }
@@ -340,7 +342,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     }
 
     this.helper.useProgram(this.program_);
-    this.helper.prepareDraw(frameState);
+    this.helper.prepareDraw(frameState, !blend);
 
     const zs = Object.keys(tileTexturesByZ)
       .map(Number)

src/ol/source/DataTile.js

@@ -6,6 +6,7 @@ import EventType from '../events/EventType.js';
 import TileEventType from './TileEventType.js';
 import TileSource, {TileSourceEvent} from './Tile.js';
 import TileState from '../TileState.js';
+import {assign} from '../obj.js';
 import {createXYZ, extentFromProjection} from '../tilegrid.js';
 import {getKeyZXY} from '../tilecoord.js';
 import {getUid} from '../util.js';
@@ -110,7 +111,9 @@ class DataTileSource extends TileSource {
       return sourceLoader(z, x, y);
     }
 
-    const tile = new DataTile({tileCoord: [z, x, y], loader: loader});
+    const tile = new DataTile(
+      assign({tileCoord: [z, x, y], loader: loader}, this.tileOptions)
+    );
     tile.key = this.getKey();
     tile.addEventListener(EventType.CHANGE, this.handleTileChange_);
 

src/ol/webgl/Helper.js

@@ -434,9 +434,10 @@ class WebGLHelper extends Disposable {
    * Post process passes will be initialized here, the first one being bound as a render target for
    * subsequent draw calls.
    * @param {import("../PluggableMap.js").FrameState} frameState current frame state
+   * @param {boolean} [opt_disableAlphaBlend] If true, no alpha blending will happen.
    * @api
    */
-  prepareDraw(frameState) {
+  prepareDraw(frameState, opt_disableAlphaBlend) {
     const gl = this.getGL();
     const canvas = this.getCanvas();
     const size = frameState.size;
@@ -459,7 +460,10 @@ class WebGLHelper extends Disposable {
     gl.clearColor(0.0, 0.0, 0.0, 0.0);
     gl.clear(gl.COLOR_BUFFER_BIT);
     gl.enable(gl.BLEND);
-    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.blendFunc(
+      gl.ONE,
+      opt_disableAlphaBlend ? gl.ZERO : gl.ONE_MINUS_SRC_ALPHA
+    );
 
     gl.useProgram(this.currentProgram_);
     this.applyFrameState(frameState);