它使用此代码进行打印，但是该代码实际上无法获取 map 实际加载的 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 项目链接。
最佳答案
问题是因为当您截取屏幕截图时，WebGL 绘图缓冲区已被换出。发生这种情况是出于性能原因，您可以在此处阅读更多相关信息:
https://stackoverflow.com/a/32641456/1278023
通过更改一些代码行解决了该问题，如下所示:
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
关于javascript - 打印或导出Cesium图加载部门，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54985128/