Openlayers打印功能 [英] Openlayers Print Function

问题描述

我想为我的Openlayers地图创建一个打印按钮，它可以抓取地图图像并创建一个漂亮的图像文件。我试过 http://dev.openlayers.org/sandbox/ camptocamp / canvas / openlayers / examples / exportMapCanvas.html
但它接缝就像是实验性的。我还查看了 http://trac.osgeo.org/openlayers/wiki/Printing
但我不想要任何服务器。我还查看了 http://html2canvas.hertzen.com/ 但无法使其正常运行。我收到以下错误，Uncaught TypeError：无法读取未定义的属性'images'，html2canvas.js

I would like to create a print button for my Openlayers map which grabs the map image and creates a nice image file. I have tried http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/exportMapCanvas.html but it seams like it is experimental. I have also looked at http://trac.osgeo.org/openlayers/wiki/Printing but I don't want any server involved. I also checked out http://html2canvas.hertzen.com/ but can't get it to work. I get the following error, Uncaught TypeError: Cannot read property 'images' of undefined, html2canvas.js

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

function printFunction() {

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

推荐答案

尝试

function printFunction() {

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

这对我有用。标签标识仅适用于jQuery，花了我一段时间才弄明白： - ）

This works for me. The hashtag identification only works for jQuery, took me a while to figure that out :-)

但是有一个小问题。 html2canvas没有呈现背景WMS图层 - 只有地图窗口和标记，因此仍需要进行一些调整。

There is a slight problem though. The html2canvas did not render the background WMS layer - only the map window and markers, so some tweaking still needs to be done.

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

Update : I have done some fiddling with this, and I do not think that it will work with openlayers. Since the openlayers map is a composition of many divs, it seems that the html2canvas is not capable of drawing all of them properly. Specifically a WMS layer, which, when attempted to be drawn on its own, returns an error. You can try rendering one of the children divs in the map, but that has not worked for me. Although, if you are only using simple vector graphic, it could work for you.

这篇关于Openlayers打印功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！