Openlayers 打印功能

Question

我想为我的 Openlayers 地图创建一个打印按钮，它会抓取地图图像并创建一个漂亮的图像文件。我试过http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/exportMapCanvas.html 但它看起来像是实验性的。我还查看了http://trac.osgeo.org/openlayers/wiki/Printing， 但我不希望涉及任何服务器。我还检查了http://html2canvas.hertzen.com/但无法让它工作。我收到以下错误，未捕获的类型错误：无法读取未定义的属性“图像”，html2canvas.js

<button onclick="printFunction()">Click me</button>

function printFunction() {

        html2canvas(('#map'), {
            onrendered: function (canvas) {
                var img = canvas.toDataURL("image/png")
                window.open(img);
            }
        });
    };

Answer 1

尝试

function printFunction() {

    html2canvas(document.getElementById("map"), {
        onrendered: function (canvas) {
            var img = canvas.toDataURL("image/png")
            window.open(img);
        }
    });

这对我有用。主题标签识别仅适用于 jQuery，我花了一段时间才弄清楚:-)

不过有一个小问题。html2canvas 没有渲染背景 WMS 图层 - 仅渲染地图窗口和标记，因此仍需要进行一些调整。

更新：我对此做了一些摆弄，我认为它不适用于 openlayers。由于openlayers地图是由许多div组成的，因此html2canvas似乎无法正确绘制所有这些div。特别是 WMS 图层，当尝试单独绘制时，会返回错误。您可以尝试渲染地图中的子 div 之一，但这对我不起作用。不过，如果您只使用简单的矢量图形，它可能适合您。