Question

我有一个正常运行的OpenLayers地图。我需要在javascript中使用按钮打印地图，但是当我执行print（）函数时，地图不会显示。我已经搜索了一个解决方案（GeoEXT，MapFish），但我是网络映射的新手，我还没有找到解决方案。有没有简单的解决方案？

感谢您的帮助。

Answer 1

GeoEXT提供了MapFish和Geoserver打印模块 - 请注意，这两个方面都涉及设置服务器以进行实际打印，请参阅http://api.geoext.org/1.1/examples/print-preview-osm.html。

另一个选项可能是phantomJS，它是一个带有光栅化组件的无头Webkit浏览器，请参阅http://phantomjs.org/examples/index.html上的rasterize.js，并允许您将页面渲染为png，jpg或pdf，如果你想完全留在javascript世界。

您可能需要提供有关设置的更多信息以获取更具体的帮助。

Answer 2

您可以创建一个新页面并复制OpenLayers画布的内容，如下所示：

function printDiv() {
var widthPx = document.getElementById('OpenLayers_canvas').offsetWidth;
var heightPX = document.getElementById('OpenLayers_canvas').offsetHeight;
var html =
    '<html><head>'
    + '<link rel="stylesheet" href="styles/printing.css" type="text/css" />'
    + '</head><body onload="window.focus();window.print();window.close();">'
    + '<div id="pageFrame">'
    + '<div id="pageTitle">My sample map print</div>'
    + '<div id="OpenLayers_printcanvas">'
    + '<div style="width:' + widthPx + 'px;height:' + heightPX + 'px;left:-'+ ((widthPx/2) - 396) +'px" id="OpenLayers_canvas">'
    + document.getElementById('OpenLayers_canvas').innerHTML
    + '</div>'
    + '</div>'
    + '</div>'
    + '</body></html>';
var w = window.open();
    w.document.write(html);
    w.document.close();
}

我使用页面框架来定义所需的输出格式。

这是printing.css的内容：

#pageFrame {
width:816px;
height:1056px;
position:absolute;
margin:auto;
border:1px solid black;
}

#pageTitle {
display:block;
text-align:center;
font-family:'Helvetica Light','Helvetica',Arial,sans-serif;
font-size:30px;
padding:10px;
}

#OpenLayers_printcanvas {
display:block;
margin:10px;
border:1px solid black;
overflow:hidden;
z-index:999;
}

#OpenLayers_canvas {
position:relative;
}

发布打印开放层街道地图

2 个答案: