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

如您所见，我仅下载画布，并且画布内部没有磁贴info。如何在一个图像上下载两个图像？带有地图的源代码如下所示：

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

图块的概念取自示例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
};

使用图块开放层保存画布地图

1 个答案: