Openlayers 打印功能答案

【问题标题】：Openlayers Print FunctionOpenlayers 打印功能
【发布时间】：2013-09-02 09:03:08
【问题描述】：

我想为我的 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: 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);
            }
        });
    };

【问题讨论】：

标签： javascript openlayers

【解决方案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 似乎无法正确绘制所有这些。特别是 WMS 图层，当尝试自行绘制时，会返回错误。您可以尝试在地图中渲染其中一个子 div，但这对我不起作用。不过，如果您只使用简单的矢量图形，它可能对您有用。

【讨论】：

不幸的是，我的地图确实有来自 MapQuest 的 WMS 图层。

【解决方案2】：

好的，我现在已经花了几个小时来解决这个问题，我想出的最好的方法是对@Kenny806 的答案进行了改进，基本上是this one。

它似乎确实接收了 WMS 和矢量图层：

    function exportMap() {

        var mapElem = document.getElementById('map'); // the id of your map div here

        // html2canvas not able to render css transformations (the container holding the image tiles uses a transform)
        // so we determine the values of the transform, and then apply them to TOP and LEFT 
        var transform=$(".gm-style>div:first>div").css("transform");
        var comp=transform.split(","); //split up the transform matrix
        var mapleft=parseFloat(comp[4]); //get left value
        var maptop=parseFloat(comp[5]);  //get top value
        $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
          "transform":"none",
          "left":mapleft,
          "top":maptop,
        });

        html2canvas(mapElem, {
          useCORS: true,
          onrendered: function(canvas) {
             mapImg = canvas.toDataURL('image/png');

            // reset the map to original styling
            $(".gm-style>div:first>div").css({
              left:0,
              top:0,
              "transform":transform
            });

            // do something here with your mapImg
            // e.g. I then use the dataURL in a pdf using jsPDF...
            // createPDFObject();
          }
        });
    }

备注

仅在 Chrome 和 Firefox 上测试
这是一个 hacky 解决方案（不幸的是，我正在努力寻找适合我情况的其他选择）
如果您可以选择使用 Openlayers 3，似乎有更好的画布支持，而且我还看到了一个令人信服的 toBlob 示例：http://codepen.io/barbalex/pen/raagKq

【讨论】：

【解决方案3】：

WMS 绘图工作正常，但您必须实现一个代理才能使用 AJAX 下载 WMS 切片。 “代理”（不是http代理）的实现细节见html2canvas的PHP代理示例。

【讨论】：