打印或导出铯地图加载部

Question

它用这段代码打印，但是，代码实际上无法获取地图实际加载的 div 的内容。我正在使用 toDataURL() 来满足需求。

我的HTML如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script href="script.js" type="text/javascript"></script>

</head>

<body>

    <div id="cesiumContainer">

    </div>

    <button id="printVoucher" onclick="print();">Print</button>

    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTAwMTYzZi1kOGFjLTQyMDQtYjI0Ny03MWQ5ZTM1OGE2NjYiLCJpZCI6Nzc4Niwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MDQ3NDQ4OX0.LRLrZO7tSId3sR7xYPOxkS1ODfaQuyQygD9mwWQ1TGQ';
        var viewer = new Cesium.Viewer('cesiumContainer');
    </script>

</body>
</html>

我的CSS如下：

body
{ 
    background-color: wheat;
}

canvas
{
    border:1px solid red;
    width: 100%;
    height: 100px;
}

#cesiumContainer
{
    width: 100%;
    height: 500px;
}

我的JavaScript如下：

$(function()
{
    var viewer = document.getElementById("cesiumContainer");
    function print_voucher()
    {   
        var win = window.open();
        win.document.write("<br><img src='"+viewer.toDataURL()+"'/>");
        win.print();
        win.location.reload();
    }
    $("#printVoucher").click(function(){ print_voucher(); });
});

See the Output what I get with this above code.

单击 here 访问 GitHub 项目 Link。

Answer 1

问题是因为在您截取屏幕截图时，WebGL 绘图缓冲区已被换出。这是出于性能原因，您可以在此处阅读更多相关信息：

问题已通过如下更改部分代码行得到解决：

var viewer = new Cesium.Viewer('cesiumContainer', {
                     contextOptions: {
                     webgl: {
                            preserveDrawingBuffer: true
                            }
    }
});

这里是完整的 HTML 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script href="script.js" type="text/javascript"></script>

</head>

<body>

    <div id="cesiumContainer">

    </div>

    <button id="printVoucher" onclick="print();">Print</button>

    <script>
        Cesium.Ion.defaultAccessToken = 'XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX';
        var viewer = new Cesium.Viewer('cesiumContainer', {
                     contextOptions: {
                     webgl: {
                            preserveDrawingBuffer: true
                            }
    }
});
    </script>

</body>
</html>

找到更新后的 GitHub 项目 Link

打印或导出铯地图加载部

Print or Export Cesium Map Loading Division

javascript

jquery

canvas

cesium