使用图块打开图层保存画布图

Question

我正在使用OpenLayer在网站上显示地图。在地图上我把瓷砖info与一些信息。

        <div class="row">
            <div id="map" class="map">
                <pre id="info" />
            </div>
        </div>

我可以选择下载地图视图

$("#DownloadMapBtn").on('click', function () {
    canvas = document.getElementsByTagName('canvas')[0];
    canvas.toBlob((blob) => {
        saveAs(blob, "map.png");
    });
});

正如你所看到的，我只下载画布，而画布里面没有瓷砖qazxsw poi。如何在一张图片上同时下载？带地图的源代码如下所示：

info

平铺的想法取自示例

<div id="map" class= "map">
    <pre id="info" > ... </pre>
    <div class="ol-viewport">
        <canvas>
        ...
    </div>
</div>

提前感谢您的帮助。

编辑：感谢@Mike（谢谢！）我几乎得到了我需要的东西。唯一的问题是我现在不在我设置数据的地方设置灰色背景。结帐照片。

这就是我有on OpenLyer website

这就是我需要的

EDIT2：我做到了！下面的代码。

Answer 1

要停止，您需要取消postcompose侦听器，然后强制渲染或只是等到地图接下来重新渲染自己。如果你想保留InsertToCanvas命名空间中的所有内容，这可能会起作用：

InsertToCanvas = (function() {
    var canvas = $('canvas').get(0); 
    var font = 13 + 'px Courier New';

    function WriteScaletoCanvas(e) {
        var ctx = e.context;
        ctx.beginPath();
        ctx.textAlign = "left";

        ctx.lineWidth = 3;
        ctx.font = font;
        var infosplitted =[];
        infoAreasCanvas.forEach((elem, ind, arr) => { 
            if(elem.length > 45){                
                var splitText = splitter(elem, 45);
                splitText.forEach((elem, ind, arr) => {
                    infosplitted.push(elem)
                })
            }else
                infosplitted.push(elem)
        });
        var leninfosplitted = infosplitted.length;
        if(infoAreasCanvas.length > 0){
            ctx.fillStyle = '#ccd3d3d3';
            ctx.fillRect(0,canvas.height - (leninfosplitted * 14) - 5 , 45 * 8, leninfosplitted * 25 + 10 );
        }
        ctx.fillStyle = "#000";
        infosplitted.forEach((elem,ind,arr) => {
            ctx.fillText([elem], 5 , canvas.height - (leninfosplitted - ind) * 13 + 5);
        });

    }
    function postcompose() {
        map.on('postcompose', function (evt) {
            WriteScaletoCanvas(evt);
        });
    }
    return {
        postcompose : postcompose
    };
})();

InsertToCanvas.postcompose();