maplibre-gl 6.2.0 → 6.3.0

package/src/source/image_source.test.ts

@@ -19,6 +19,19 @@ function createSource(options) {
     return new ImageSource('id', options, {} as any, options.eventedParent);
 }
 
+async function createLoadedSourceWithTile(map: Map, server: FakeServer) {
+    server.respondImmediately = true;
+    const source = createSource({url: '/image.png', eventedParent: map});
+    const loaded = waitForEvent(source, 'data', (e: MapSourceDataEvent) => e.sourceDataType === 'metadata');
+    source.onAdd(map);
+    await loaded;
+
+    const {z, x, y} = source.tileID;
+    const tile = new Tile(new OverscaledTileID(z, 0, z, x, y), 512);
+    await source.loadTile(tile);
+    return {source, tile};
+}
+
 describe('ImageSource', () => {
     stubAjaxGetImage(undefined);
     let server: FakeServer;
@@ -147,6 +160,112 @@ describe('ImageSource', () => {
         expect(afterSerialized.coordinates).toEqual([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
     });
 
+    test('sets perspective transform for non-parallelogram coordinates', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-122.52, 37.815],
+            [-122.355, 37.8],
+            [-122.325, 37.7],
+            [-122.545, 37.735]
+        ]);
+
+        expect(source.perspectiveTransform).not.toEqual([0, 0, 1]);
+        expect(source.perspectiveTransform.every(Number.isFinite)).toBe(true);
+    });
+
+    test('sets perspective transform when initial coordinates are loaded', async () => {
+        const source = createSource({
+            url: '/image.png',
+            coordinates: [
+                [-122.52, 37.815],
+                [-122.355, 37.8],
+                [-122.325, 37.7],
+                [-122.545, 37.735]
+            ]
+        });
+        const promise = waitForEvent(source, 'data', (e) => e.sourceDataType === 'content');
+
+        source.onAdd(map);
+        await sleep(0);
+        server.respond();
+        await promise;
+
+        expect(source.perspectiveTransform).not.toEqual([0, 0, 1]);
+        expect(source.perspectiveTransform.every(Number.isFinite)).toBe(true);
+    });
+
+    test('keeps projective transform when its constant coefficient is zero', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-67.5, 55.77657301866769],
+            [-22.5, 55.77657301866769],
+            [0, 40.97989806962013],
+            [-90, 40.97989806962013]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 1, 0]);
+    });
+
+    test('sets identity perspective transform for parallelogram coordinates', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-122.431640625, 37.857507156],
+            [-122.409667969, 37.857507156],
+            [-122.409667969, 37.840156836],
+            [-122.431640625, 37.840156836]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 0, 1]);
+    });
+
+    test('sets identity perspective transform for collinear destination coordinates', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-122.431640625, 37.857507156],
+            [-122.409667969, 37.857507156],
+            [-122.387695312, 37.857507156],
+            [-122.365722656, 37.857507156]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 0, 1]);
+    });
+
+    test('sets identity perspective transform when the inverse basis is singular', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-122.431640625, 37.857507156],
+            [-122.431640625, 37.840156836],
+            [-122.431640625, 37.822802434],
+            [-122.409667969, 37.857507156]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 0, 1]);
+    });
+
+    test('sets identity perspective transform for a cancellation-degenerate quad', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [96.85546875, 79.36770077764092],
+            [-127.265625, 79.36770077764092],
+            [88.06640625, 79.36770077764092],
+            [-17.40234375, 59.534318001095585]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 0, 1]);
+    });
+
+    test('sets identity perspective transform when its denominator crosses zero inside the quad', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-90, 66.51326044311186],
+            [0, 66.51326044311186],
+            [-78.75, 61.606396371386275],
+            [-90, 0]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 0, 1]);
+    });
+
     test('sets coordinates via updateImage', async () => {
         const source = createSource({url: '/image.png'});
         source.onAdd(map);
@@ -199,6 +318,57 @@ describe('ImageSource', () => {
         expect(tile.state).toBe('loaded');
     });
 
+    test('uploads a url into the texture the tiles already hold', async () => {
+        const {source, tile} = await createLoadedSourceWithTile(map, server);
+        source.prepare();
+        const texture = source.texture;
+        const upload = vi.spyOn(texture, 'update');
+        const destroy = vi.spyOn(texture, 'destroy');
+
+        const load = vi.spyOn(source, 'load');
+        source.updateImage({url: '/image2.png'});
+        await load.mock.results[0].value;
+        source.prepare();
+
+        expect(upload).toHaveBeenCalledTimes(1);
+        expect(destroy).not.toHaveBeenCalled();
+        expect(source.texture).toBe(texture);
+        expect(tile.texture).toBe(texture);
+    });
+
+    test('uploads a decoded image into the texture the tiles already hold', async () => {
+        const {source, tile} = await createLoadedSourceWithTile(map, server);
+        source.prepare();
+        const texture = source.texture;
+        const upload = vi.spyOn(texture, 'update');
+        const destroy = vi.spyOn(texture, 'destroy');
+
+        source.updateImage({image: new ImageBitmap()});
+        source.prepare();
+
+        expect(upload).toHaveBeenCalledTimes(1);
+        expect(destroy).not.toHaveBeenCalled();
+        expect(source.texture).toBe(texture);
+        expect(tile.texture).toBe(texture);
+    });
+
+    test('keeps the texture the tiles hold live when updateImage runs from an event fired during prepare', async () => {
+        const {source, tile} = await createLoadedSourceWithTile(map, server);
+        source.on('data', (e: MapSourceDataEvent) => {
+            if (e.sourceDataType === 'idle') source.updateImage({image: new ImageBitmap()});
+        });
+
+        source.prepare();
+
+        expect(source.texture).toBeTruthy();
+        expect(tile.texture).toBe(source.texture);
+        expect(source.texture.texture).not.toBeNull();
+
+        const upload = vi.spyOn(source.texture, 'update');
+        source.prepare();
+        expect(upload).toHaveBeenCalledTimes(1);
+    });
+
     test('serialize url and coordinates', () => {
         const source = createSource({url: '/image.png'});
 
@@ -275,6 +445,41 @@ describe('ImageSource', () => {
         expect(errorHandler).not.toHaveBeenCalled();
     });
 
+    test('keeps the image it displays, and its texture, when the url handed to updateImage fails to load', async () => {
+        const {source} = await createLoadedSourceWithTile(map, server);
+        source.prepare();
+        const texture = source.texture;
+        const image = source.image;
+        const upload = vi.spyOn(texture, 'update');
+        const destroy = vi.spyOn(texture, 'destroy');
+        const errorHandler = vi.fn();
+        map.on('error', errorHandler);
+
+        const load = vi.spyOn(source, 'load');
+        source.updateImage({url: '/missing-image.png'});
+        await load.mock.results[0].value;
+        source.prepare();
+
+        expect(errorHandler).toHaveBeenCalledTimes(1);
+        expect(destroy).not.toHaveBeenCalled();
+        expect(upload).not.toHaveBeenCalled();
+        expect(source.texture).toBe(texture);
+        expect(source.image).toBe(image);
+    });
+
+    test('deletes its texture and drops its image when the source is removed', async () => {
+        const {source} = await createLoadedSourceWithTile(map, server);
+        source.prepare();
+        const destroy = vi.spyOn(source.texture, 'destroy');
+
+        source.onRemove();
+
+        expect(destroy).toHaveBeenCalledTimes(1);
+        expect(source.texture).toBeNull();
+        expect(source.image).toBeNull();
+        expect(source.tiles).toEqual({});
+    });
+
     describe('updateImage with a decoded image', () => {
         let source: ImageSource;
         let transformRequest: Mock<(url: string, resourceType?: string) => any>;
@@ -309,13 +514,6 @@ describe('ImageSource', () => {
             expect(firedMetadata).toBe(true);
         });
 
-        test('resets the texture so the new image is uploaded on the next prepare', () => {
-            source.texture = {} as Texture;
-            source.updateImage({image: new ImageBitmap()});
-
-            expect(source.texture).toBeNull();
-        });
-
         test('updates coordinates alongside the image', () => {
             source.updateImage({
                 image: new ImageBitmap(),

package/src/source/image_source.ts

@@ -19,6 +19,11 @@ import type Point from '@mapbox/point-geometry';
 import {ensureError, MAX_TILE_ZOOM} from '../util/util.ts';
 import {Bounds} from '../geo/bounds.ts';
 import {isAbortError} from '../util/abort_error.ts';
+import {
+    identityPerspectiveTransform,
+    type RasterPerspectiveTransform
+} from '../webgl/program/raster_program.ts';
+import {mat2, vec3} from 'gl-matrix';
 
 /**
  * Four geographical coordinates,
@@ -141,9 +146,11 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
     image: ImageSourceImage;
     tileID: CanonicalTileID;
     tileCoords: Point[];
+    perspectiveTransform: RasterPerspectiveTransform = identityPerspectiveTransform;
     flippedWindingOrder: boolean = false;
     _loaded: boolean;
     _request: AbortController;
+    private _imageDirty: boolean = false;
 
     /** @internal */
     constructor(id: string, options: ImageSourceSpecification | VideoSourceSpecification | CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
@@ -178,7 +185,7 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
             this._loaded = true;
 
             if (image?.data) {
-                this.image = image.data;
+                this._setImage(image.data);
                 if (newCoordinates) {
                     this.coordinates = newCoordinates;
                 }
@@ -216,11 +223,10 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
         if ('image' in options) {
             // Use the already-decoded image directly, skipping the network request.
             this._loaded = true;
-            this.image = options.image;
+            this._setImage(options.image);
             if (options.coordinates) {
                 this.coordinates = options.coordinates;
             }
-            this.texture = null;
             this._finishLoading();
             return this;
         }
@@ -230,10 +236,22 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
         }
 
         this.options.url = options.url;
-        this.load(options.coordinates).finally(() => this.texture = null);
+        this.load(options.coordinates);
         return this;
     }
 
+    /** Loaded tiles hold `this.texture`, so the wrapper has to outlive the images in it. */
+    private _setImage(image: ImageSourceImage): void {
+        this.image = image;
+        this._imageDirty = true;
+    }
+
+    /** Teardown only: dropping the reference alone leaves the allocation to the GC. */
+    private _disposeTexture(): void {
+        this.texture?.destroy();
+        this.texture = null;
+    }
+
     _finishLoading(): void {
         if (this.map) {
             this.setCoordinates(this.coordinates);
@@ -251,6 +269,9 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
             this._request.abort();
             this._request = null;
         }
+        this._disposeTexture();
+        this.image = null;
+        this.tiles = {};
     }
 
     /**
@@ -287,6 +308,7 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
         // Transform the corner coordinates into the coordinate space of our
         // tile.
         this.tileCoords = cornerCoords.map((coord) => this.tileID.getTilePoint(coord)._round());
+        this.perspectiveTransform = calculateRasterPerspectiveTransform(this.tileCoords);
         this.flippedWindingOrder = hasWrongWindingOrder(this.tileCoords);
 
         this.fire(new MapSourceDataEvent('data', {sourceDataType: 'content'}));
@@ -304,7 +326,11 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
         if (!this.texture) {
             this.texture = new Texture(context, this.image, gl.RGBA);
             this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+        } else if (this._imageDirty) {
+            this.texture.update(this.image);
+            this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
         }
+        this._imageDirty = false;
 
         let newTilesLoaded = false;
         for (const w in this.tiles) {
@@ -418,3 +444,91 @@ function hasWrongWindingOrder(coords: Point[]) {
 
     return crossProduct < 0;
 }
+
+const perspectiveEpsilon = Number.EPSILON;
+// Allows for accumulated rounding error in the three-term homogeneous dot products.
+const perspectiveErrorFactor = 8;
+
+/**
+ * Calculates the inverse-homography denominator used to sample non-affine
+ * image-source texture coordinates. Image source tile coordinates are rounded
+ * to integers before this runs, so singularity checks use exact zero or
+ * Number.EPSILON scaled to the corner denominators.
+ *
+ * Based on Paul S. Heckbert, "Fundamentals of Texture Mapping and Image
+ * Warping", UCB/CSD-89-516, 1989, section 2.2.3 and appendix A.2.
+ *
+ * @see https://www2.eecs.berkeley.edu/Pubs/TechRpts/1989/5504.html
+ * @see https://www.cs.cmu.edu/~ph/texfund/texfund.pdf
+ */
+function calculateRasterPerspectiveTransform(cornerCoords: Point[]): RasterPerspectiveTransform {
+    if (isParallelogram(cornerCoords)) {
+        return identityPerspectiveTransform;
+    }
+
+    const [topLeft, topRight, bottomRight, bottomLeft] = cornerCoords;
+    const sx = topLeft.x - topRight.x + bottomRight.x - bottomLeft.x;
+    const sy = topLeft.y - topRight.y + bottomRight.y - bottomLeft.y;
+    const dx1 = topRight.x - bottomRight.x;
+    const dy1 = topRight.y - bottomRight.y;
+    const dx2 = bottomLeft.x - bottomRight.x;
+    const dy2 = bottomLeft.y - bottomRight.y;
+    const basis: mat2 = [dx1, dy1, dx2, dy2];
+    const determinant = mat2.determinant(basis);
+
+    if (Math.abs(determinant) < perspectiveEpsilon) {
+        return identityPerspectiveTransform;
+    }
+
+    const perspectiveX = (sx * dy2 - dx2 * sy) / determinant;
+    const perspectiveY = (dx1 * sy - sx * dy1) / determinant;
+
+    // A finite image of the unit square has positive homogeneous denominators
+    // at all four corners after normalizing the top-left denominator to one.
+    const forwardDenominators = [1, 1 + perspectiveX, 1 + perspectiveX + perspectiveY, 1 + perspectiveY];
+    const forwardDenominatorScale = Math.max(...forwardDenominators.map(value => Math.abs(value)));
+    const hasInvalidForwardDenominator = forwardDenominators.some(value =>
+        !Number.isFinite(value) || value <= perspectiveErrorFactor * perspectiveEpsilon * forwardDenominatorScale);
+    if (!Number.isFinite(forwardDenominatorScale) || forwardDenominatorScale === 0 || hasInvalidForwardDenominator) {
+        return identityPerspectiveTransform;
+    }
+
+    const a = topRight.x - topLeft.x + perspectiveX * topRight.x;
+    const b = bottomLeft.x - topLeft.x + perspectiveY * bottomLeft.x;
+    const d = topRight.y - topLeft.y + perspectiveX * topRight.y;
+    const e = bottomLeft.y - topLeft.y + perspectiveY * bottomLeft.y;
+    const inverseDenominator: RasterPerspectiveTransform = [0, 0, 0];
+    vec3.cross(inverseDenominator, [a, d, perspectiveX], [b, e, perspectiveY]);
+    const normalizationScale = Math.max(...inverseDenominator.map(value => Math.abs(value)));
+    const cornerDenominators = cornerCoords.map(({x, y}) =>
+        vec3.dot(inverseDenominator, [x, y, 1]));
+    const cornerDenominatorErrors = cornerCoords.map(({x, y}) =>
+        perspectiveErrorFactor * perspectiveEpsilon * (
+            Math.abs(inverseDenominator[0] * x) +
+            Math.abs(inverseDenominator[1] * y) +
+            Math.abs(inverseDenominator[2])));
+    const denominatorScale = Math.max(...cornerDenominators.map(value => Math.abs(value)));
+    const denominatorSign = Math.sign(cornerDenominators[0]);
+
+    // The denominator is affine within each rendered triangle. Reject a
+    // transform that reaches or crosses zero anywhere inside the quad.
+    const hasInvalidDenominator = cornerDenominators.some((value, index) =>
+        !Number.isFinite(value) ||
+        Math.abs(value) <= Math.max(perspectiveEpsilon * denominatorScale, cornerDenominatorErrors[index]) ||
+        Math.sign(value) !== denominatorSign);
+    if (!Number.isFinite(normalizationScale) || normalizationScale === 0 || !Number.isFinite(denominatorScale) ||
+        denominatorScale === 0 || hasInvalidDenominator) {
+        return identityPerspectiveTransform;
+    }
+
+    // The denominator is homogeneous, so normalize by its largest coefficient
+    // instead of assuming that its constant coefficient is nonzero.
+    const transform = inverseDenominator.map(value => value / normalizationScale) as RasterPerspectiveTransform;
+    return transform.every(Number.isFinite) ? transform : identityPerspectiveTransform;
+}
+
+function isParallelogram(cornerCoords: Point[]) {
+    const [tl, tr, br, bl] = cornerCoords;
+    return Math.abs(tl.x + br.x - tr.x - bl.x) < perspectiveEpsilon &&
+        Math.abs(tl.y + br.y - tr.y - bl.y) < perspectiveEpsilon;
+}

package/src/source/raster_dem_tile_worker_source.test.ts

@@ -14,7 +14,7 @@ describe('loadTile', () => {
             dim: 256
         } as any as WorkerDEMTileParameters);
         expect(Object.keys(source.loaded)).toEqual(['0']);
-        expect(data instanceof DEMData).toBeTruthy();
+        expect(data).toBeInstanceOf(DEMData);
     });
 });
 

package/src/source/vector_tile_worker_source.test.ts

@@ -170,6 +170,100 @@ describe('vector tile worker source', () => {
         expect(res.rawTileData).toStrictEqual(rawTileData);
     });
 
+    test('VectorTileWorkerSource.reloadTile includes rawTileData in response if loadTile was aborted', async () => {
+        const rawTileData = new ArrayBuffer(0);
+
+        const layerIndex = new StyleLayerIndex([{
+            id: 'test',
+            source: 'source',
+            'source-layer': 'test',
+            type: 'symbol',
+            layout: {
+                'icon-image': 'hello',
+                'text-font': ['StandardFont-Bold'],
+                'text-field': '{name}'
+            }
+        }]);
+
+        let sendAsyncShouldAbort = false;
+        const actor = {
+            sendAsync: (message: {type: string; data: unknown}, abortController: AbortController) => {
+                if (sendAsyncShouldAbort) {
+                    return new Promise((_resolve, reject) => {
+                        reject('aborted by test');
+                    });
+                }
+
+                return new Promise((resolve, reject) => {
+                    const res = setTimeout(() => {
+                        const response = message.type === 'getImages' ?
+                            {'hello': {width: 1, height: 1, data: new Uint8Array([0])}} :
+                            {'StandardFont-Bold': {width: 1, height: 1, data: new Uint8Array([0])}};
+                        resolve(response);
+                    }, 100);
+                    abortController.signal.addEventListener('abort', () => {
+                        clearTimeout(res);
+                        reject('aborted by abortController');
+                    });
+                });
+            }
+        };
+
+        const source = new VectorTileWorkerSource(actor, layerIndex, ['hello']);
+        source.loadVectorTile = (_params, _rawData) => {
+            return {
+                vectorTile: {
+                    layers: {
+                        test: {
+                            version: 2,
+                            name: 'test',
+                            extent: 8192,
+                            length: 1,
+                            feature: (featureIndex: number) => ({
+                                extent: 8192,
+                                type: 1,
+                                id: featureIndex,
+                                properties: {
+                                    name: 'test'
+                                },
+                                loadGeometry () {
+                                    return [[new Point(0, 0)]];
+                                }
+                            })
+                        }
+                    }
+                },
+                rawData: rawTileData
+            };
+        };
+
+        server.respondWith(request => {
+            request.respond(200, {'Content-Type': 'application/pbf'}, rawTileData as any);
+        });
+
+        sendAsyncShouldAbort = true;
+        const loadTilePromise = source.loadTile({
+            source: 'source',
+            uid: 0,
+            tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
+            request: {url: 'http://localhost:2900/faketile.pbf'},
+            subdivisionGranularity: SubdivisionGranularitySetting.noSubdivision,
+        } as any as WorkerTileParameters);
+        server.respond();
+        await expect(loadTilePromise).rejects.toThrow(/aborted/);
+
+        sendAsyncShouldAbort = false;
+        const res = await source.reloadTile({
+            source: 'source',
+            uid: 0,
+            tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
+            subdivisionGranularity: SubdivisionGranularitySetting.noSubdivision,
+        } as any as WorkerTileParameters) as WorkerTileWithData;
+        expect(res).toBeDefined();
+        expect(res.rawTileData).toBeDefined();
+        expect(res.rawTileData).toStrictEqual(rawTileData);
+    });
+
     test('VectorTileWorkerSource.loadTile reparses tile if reloadTile is called during reparsing', async () => {
         const rawTileData = new ArrayBuffer(0);
         const loadVectorData = (_params, _rawData) => {
@@ -193,7 +287,6 @@ describe('vector tile worker source', () => {
         const parseWorkerTileMock = vi
             .spyOn(WorkerTile.prototype, 'parse')
             .mockImplementation(function(this: WorkerTile, _data, _layerIndex, _availableImages, _actor) {
-                this.status = 'parsing';
                 return new Promise((resolve) => {
                     setTimeout(() => resolve({} as WorkerTileResult), 20);
                 });
@@ -248,7 +341,6 @@ describe('vector tile worker source', () => {
         const parseWorkerTileMock = vi
             .spyOn(WorkerTile.prototype, 'parse')
             .mockImplementation(function(this: WorkerTile, _data, _layerIndex, _availableImages, _actor) {
-                this.status = 'parsing';
                 return new Promise((resolve) => {
                     setTimeout(() => resolve({} as WorkerTileResult), 20);
                 });

package/src/source/vector_tile_worker_source.ts

@@ -3,7 +3,7 @@ import {VectorTile} from '@mapbox/vector-tile';
 import {fromVectorTileJs, type VectorTileLayerLike, type VectorTileLike} from '@maplibre/vt-pbf';
 import {type ExpiryData, getArrayBuffer} from '../util/ajax.ts';
 import {WorkerTile} from './worker_tile.ts';
-import {WorkerTileState, type ParsingState} from './worker_tile_state.ts';
+import {WorkerTileState} from './worker_tile_state.ts';
 import {BoundedLRUCache} from '../tile/tile_cache.ts';
 import {ensureError, extend} from '../util/util.ts';
 import {RequestPerformance} from '../util/request_performance.ts';
@@ -106,17 +106,12 @@ export class VectorTileWorkerSource implements WorkerSource {
 
             workerTile.vectorTile = vectorTile;
             this.tileState.markLoaded(uid, workerTile);
+            const parsingState = {rawData, cacheControl, resourceTiming};
+            this.tileState.setParsing(uid, parsingState);
 
-            const parseState = {rawData, cacheControl, resourceTiming};  // Keep data so reloadTile can access if parse is canceled.
-            this.tileState.setParsing(uid, parseState);
-            try {
-                return await this._parseWorkerTile(workerTile, params, parseState);
-            } finally {
-                this.tileState.removeParsing(uid);
-            }
+            return await this._parseWorkerTile(workerTile, params);
         } catch (err) {
             this.tileState.finishLoading(uid);
-            workerTile.status = 'done';
             this.tileState.markLoaded(uid, workerTile);
             throw err;
         }
@@ -128,16 +123,23 @@ export class VectorTileWorkerSource implements WorkerSource {
         return extend({etagUnmodified: true as const}, cacheControl, resourceTiming);
     }
 
-    async _parseWorkerTile(workerTile: WorkerTile, params: WorkerTileParameters, parseState?: ParsingState): Promise<WorkerTileResult> {
+    async _parseWorkerTile(workerTile: WorkerTile, params: WorkerTileParameters): Promise<WorkerTileResult> {
+        const parseState = this.tileState.getParsing(workerTile.uid);
+
         let result = await workerTile.parse(workerTile.vectorTile, this.layerIndex, this.availableImages, this.actor, params.subdivisionGranularity);
 
+        // We need to pass rawTileData back to the main thread so that it can be stored in the Tile and FeatureIndex.
+        // After the main thread has successfully received and stored rawTileData,
+        // we no longer need to store it in the worker or transfer additional copies of it.
         if (parseState) {
             const {rawData, cacheControl, resourceTiming} = parseState;
             // Overzoomed tiles are always re-encoded to MVT protobuf by _getOverzoomTile
             const encoding = params.overzoomParameters ? 'mvt' : params.encoding;
-            // Transferring a copy of rawTileData because the worker needs to retain its copy.
+            // Return a copy of rawData to the main thread to avoid clearing the worker's buffer
             result = extend({rawTileData: rawData.slice(0), encoding}, result, cacheControl, resourceTiming);
+            this.tileState.removeParsing(workerTile.uid);
         }
+        // else: this seems like a missing case where cache control is lost? see #3309
 
         return result;
     }
@@ -209,27 +211,16 @@ export class VectorTileWorkerSource implements WorkerSource {
      */
     async reloadTile(params: WorkerTileParameters): Promise<WorkerTileResult> {
         const uid = params.uid;
-
         const workerTile = this.tileState.getLoaded(uid);
         if (!workerTile) throw new Error('Should not be trying to reload a tile that was never loaded or has been removed');
 
-        workerTile.showCollisionBoxes = params.showCollisionBoxes;
-
-        if (workerTile.status === 'parsing') {
-            // if we are cancelling the original parse, make sure to pass the rawTileData from the original parse
-            const parseState = this.tileState.getParsing(uid);
-            try {
-                return await this._parseWorkerTile(workerTile, params, parseState);
-            } finally {
-                this.tileState.removeParsing(uid);
-            }
+        // If there was no vector tile data on the initial load, don't try to reparse the tile.
+        if (!workerTile.vectorTile) {
+            return;
         }
 
-        // If there was no vector tile data on the initial load, don't try and reparse the tile.
-        // this seems like a missing case where cache control is lost? see #3309
-        if (workerTile.status === 'done' && workerTile.vectorTile) {
-            return await this._parseWorkerTile(workerTile, params);
-        }
+        workerTile.showCollisionBoxes = params.showCollisionBoxes;
+        return await this._parseWorkerTile(workerTile, params);
     }
 
     /**