Offscreen-Canvas接入Leaflet GridLayer时偶发空白不渲染问题求助

问题根因 #

你当前遇到的随机空白问题核心是异步绘制和Leaflet瓦片生命周期不匹配，单Worker任务积压是加重问题的诱因，而非核心原因：
原来的同步实现中，createTile返回的是已经完成绘制的canvas，Leaflet拿到可直接渲染；重构为OffscreenCanvas+Worker方案后，你直接返回了还未完成绘制的OffscreenCanvas，Leaflet会立即渲染空画布，若Worker绘制完成时瓦片还未被视口回收就会显示内容，若已经被回收就会一直显示空白，因此表现为随机出现的问题。
另外你当前的代码还有两个明显错误会放大空白概率：

1. 没有给canvas设置和GridLayer配置一致的宽高，OffscreenCanvas默认尺寸可能不符合绘制要求
2. 调用postMessage时没有传递瓦片坐标tile_coords，Worker无法匹配栅格数据的对应区域绘制
3. 每次调用createTile都传递全量raster_data，结构化克隆的开销会拖慢绘制速度，加重任务积压

排查思路 #

• 增加全链路日志：在createTile调用、Worker接收绘制任务、Worker完成绘制、瓦片被Leaflet回收四个节点增加带瓦片坐标（z/x/y）的日志，确认空白瓦片是否是因为绘制完成前已经被回收
• 检查画布尺寸：打印OffscreenCanvas的width/height，确认和GridLayer的tileSize配置（默认256）一致，尺寸不匹配会导致绘制内容超出画布显示为空白
• 检查Worker任务队列：用浏览器性能面板录制复现过程的性能快照，查看Worker是否存在任务积压，若任务等待时间超过Leaflet瓦片的超时回收时间，也会导致空白
• 验证绘制逻辑正确性：在Worker中绘制完成后，把画布内容导出为imageBitmap打印，确认绘制逻辑本身没有问题，排除坐标计算错误导致内容画在画布外的情况

解决方案 #

1. 适配Leaflet异步瓦片生命周期 #

Leaflet的createTile方法支持第二个done回调，只有调用done通知Leaflet瓦片绘制完成后，才会把瓦片加入图层渲染，避免空画布提前渲染：

initialize: function(raster_data){
    this.raster_data = raster_data;
    this._pendingTiles = new Map(); // 存储待完成的瓦片回调
    this.tile_worker = new Worker('tile_renderer.js');
    // 初始化时一次性传递栅格数据到Worker存储，避免每次传输开销
    this.tile_worker.postMessage({
        type: 'init',
        raster_data: raster_data
    });
    // 统一监听Worker绘制完成消息
    this.tile_worker.onmessage = (e) => {
        const { tile_id, success } = e.data;
        if(this._pendingTiles.has(tile_id)) {
            const { done, tile } = this._pendingTiles.get(tile_id);
            this._pendingTiles.delete(tile_id);
            done(null, tile);
        }
    }
},

createTile: function (tile_coords, done) {
    // 创建DOM canvas，设置正确的瓦片尺寸
    const _tile = document.createElement('canvas');
    _tile.width = _tile.height = this.options.tileSize || 256;
    const offscreen_tile = _tile.transferControlToOffscreen();
    // 生成瓦片唯一ID用于匹配
    const tile_id = `${tile_coords.z}_${tile_coords.x}_${tile_coords.y}`;
    // 存储回调和瓦片引用
    this._pendingTiles.set(tile_id, { done, tile: _tile });

    // 仅传递必要参数到Worker
    this.tile_worker.postMessage({
        type: 'render',
        tile_id: tile_id,
        tile: offscreen_tile,
        coords: tile_coords
    }, [offscreen_tile]);

    // 监听瓦片回收事件，取消待执行的绘制任务
    _tile.addEventListener('remove', () => {
        if(this._pendingTiles.has(tile_id)) {
            this._pendingTiles.delete(tile_id);
            // 通知Worker取消对应任务，节省资源
            this.tile_worker.postMessage({
                type: 'cancel',
                tile_id: tile_id
            })
        }
    })

    return _tile;
}

对应Worker侧代码参考：

// tile_renderer.js
let raster_data = null;
const task_queue = new Map();

self.onmessage = (e) => {
    switch(e.data.type) {
        case 'init':
            raster_data = e.data.raster_data;
            break;
        case 'cancel':
            task_queue.delete(e.data.tile_id);
            break;
        case 'render':
            task_queue.set(e.data.tile_id, e.data);
            processTask();
            break;
    }
}

async function processTask() {
    if(task_queue.size === 0) return;
    // 取出第一个任务处理
    const [tile_id, task] = task_queue.entries().next().value;
    task_queue.delete(tile_id);

    const ctx = task.tile.getContext('2d');
    // 你的绘制逻辑，用task.coords匹配栅格区域
    // ...

    // 绘制完成通知主线程
    self.postMessage({ tile_id, success: true });
    processTask();
}

2. 优化Worker性能 #

如果单Worker任务积压严重，可以实现简单的Worker池：根据设备CPU核心数创建2-4个Worker实例，轮询分配绘制任务，避免单队列排队过久。

3. 额外优化 #

• 瓦片复用：Leaflet默认会复用移出视口的瓦片，你可以增加瓦片缓存逻辑，避免同一个坐标的瓦片重复绘制
• 降低绘制优先级：对于快速拖动过程中进入视口的瓦片，可以降低绘制优先级，优先绘制当前停止状态下的视口瓦片

内容的提问来源于stack exchange，提问作者Nazmul Ahasan