使用图块打开图层保存 canvas 个地图

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");
    });
});

如您所见，我只下载了 canvas，canvas 里面没有 info 的磁贴。如何在一张图片上同时下载两者？带有地图的源代码如下所示：

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

tile 的概念取自示例 on OpenLyer website

提前感谢您的帮助。

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

这就是我的

这就是我需要的

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

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();

Answer 1

要停止，您需要取消合成后侦听器，然后强制渲染或等待地图下次重新渲染。如果您想将所有内容保留在您的 InsertToCanvas 命名空间中，这可能会起作用：

var evtkey;
function postcompose() {
    evtkey = map.on('postcompose', function (evt) {
        WriteScaletoCanvas(evt);
    });
}
function unpostcompose() {
    ol.Observable.unByKey(evtkey);
    map.render();
}
return {
    postcompose : postcompose,
    unpostcompose : unpostcompose
};

使用图块打开图层保存 canvas 个地图

save canvas map with a tile Open Layer

javascript

maps

openlayers