如何從 Mapbox GL JS 獲取可用的畫布

Question

我正在使用Mapbox GL ，並嘗試獲取它的快照，並將快照與覆蓋輸出的另一個圖像合並。

我在屏幕外有一個HTMLCanvasElement ，我首先將從Map.getCanvas()返回的畫布寫入它，然后在其上寫入第二個（alpha 透明）畫布。

問題是，雖然我在 Map 實例中清楚地看到屏幕上的元素，但結果只顯示了第二個圖像/畫布，其余的都是空白的。

所以我只導出地圖的畫布，我看到這是因為地圖畫布是空白的，盡管console.log()顯示來自它的圖像數據是一大塊信息。

這是我的導出功能：

  onExport(annotationCanvas: HTMLCanvasElement) {

    const mergeCanvas: HTMLCanvasElement = document.createElement('canvas');
    const mapCanvas: HTMLCanvasElement = this.host.map.getCanvas();
    const mergeCtx: CanvasRenderingContext2D = mergeCanvas.getContext('2d');

    mergeCanvas.height = annotationCanvas.height;
    mergeCanvas.width = annotationCanvas.width;
    mergeCtx.drawImage(mapCanvas, 0, 0);
    mergeCtx.drawImage(annotationCanvas, 0, 0);

    const mergedDataURL = mergeCanvas.toDataURL();
    const mapDataURL = mapCanvas.toDataURL();
    const annotationDataURL = annotationCanvas.toDataURL();

    console.log(mapDataURL); // Lots of data

    download(mapDataURL, 'map-data-only.png'); // Blank image @ 1920x1080
    download(mergedDataURL, 'annotation.png'); // Only shows annotation (the second layer/canvas) data

  }

這是一個錯誤，還是我錯過了什么？

更新：我有點想通了這是關於什么的，並且有可能的選擇。

在偶然發現Mapbox 功能請求時，我了解到，如果您在將preserveDrawingBuffer選項設置為false （默認值）的情況下實例化您的Map ，您將無法獲得帶有可用圖像數據的畫布。 但是將此選項設置為true會降低性能。 但是在實例化 Map 后您無法更改此設置...

我希望地圖盡可能發揮最佳性能！！！！

所以，在這個我偶然發現的答案中，關於一個關於three.js的問題，我了解到如果我在渲染后立即截取屏幕截圖，我將獲得我需要的畫布/數據。

我嘗試在捕獲畫布之前調用this.host.map['_rerender']() ，但它仍然返回空白。

然后在源代碼中搜索，我找到了一個名為_requestRenderFrame的函數，看起來它可能是我需要的，因為我可以要求 Map 在下一個渲染周期后立即運行一個函數。 但是當我發現，出於某種原因，該函數在編譯代碼中被省略，而在源代碼中存在，顯然是因為它只存在於 master 中，而不是發布的一部分。

所以我還沒有真正滿意的解決方案，所以請讓我知道任何見解。

Answer 1

正如您在更新的問題中提到的，解決方案是在 Map 初始化時設置preserveDrawingBuffer: true 。

為了回答你更新的問題，我認為@jfirebaugh 在https://github.com/mapbox/mapbox-gl-js/issues/6448#issuecomment-378307311的回答總結得很好：

不能即時修改preserveDrawingBuffer 。 它必須在創建 WebGL 上下文時設置，這會對性能產生負面影響。

有傳言說，您可以在渲染后立即獲取畫布數據 URL，而無需preserveDrawingBuffer ，但我尚未驗證這一點，我懷疑規范無法保證這一點。

因此，盡管可以在渲染后立即獲取畫布數據 URL，但規范並不能保證這一點。