OL3 和以 OSM 为背景层的 geoserver 打印模块答案

【问题标题】：OL3 and geoserver print module with OSM as background layerOL3 和以 OSM 为背景层的 geoserver 打印模块
【发布时间】：2015-10-02 08:55:27
【问题描述】：

我有一个内置在 OL3 和 geoserver 中的应用程序。我在我的应用程序中使用 bootstrap 和 jQuery。

我正在尝试以 pdf 格式打印地图。我将 OSM 作为应用程序的基础层，其他层来自我的本地地理服务器。

现在我需要以 pdf 格式打印地图（包含所有可见图层和 OSM 图层）。

我已经在我的地理服务器中安装了打印插件，它工作正常我已经使用以下代码测试了我的打印模块：

http://localhost:8080/geoserver/pdf/print.pdf?spec={
    "layout":"A4 portrait",
    "srs":"EPSG:4326",
    "units":"degrees",
    "dpi":300,
    "outputFilename": "map",
    "mapTitle":"This is the map title",
    "layers":[
    {
        "baseURL":"http://localhost:8080/geoserver/genesis/wms",
        "opacity":0.5,
        "singleTile":false,
        "type":"WMS",
        "layers":["District_Boundary", "DevelopmentRegions"],
        "format":"image/png",
        "styles":[]
    } 
    ],
    "pages":[
    {
        "center":[84.25,28.1],
        "mapTitle":"",
        "comment":"",
        "scale":4000000,
        "rotation":0
    }
    ] }

但问题是我应该如何在其中打印我的 OSM 层？我没有在我的应用程序中使用 Extjs，所以我不想仅仅将它用于我的打印功能。

谁能建议我应该如何只使用 jQuery 和 bootstrap 以及没有 Extjs 的纯 javascript？？

谢谢。

【问题讨论】：

还没有？？有人知道怎么做吗？？
没有进展或解决方案我的朋友？？没有人遇到过这个问题？？

标签： openlayers-3 geoserver

【解决方案1】：

您只需像这样将 osm 作为另一层添加到您的请求负载中

http://localhost:8080/geoserver/pdf/print.pdf?spec={
    "layout":"A4 portrait",
    "srs":"EPSG:4326",
    "units":"degrees",
    "dpi":300,
    "outputFilename": "map",
    "mapTitle":"This is the map title",
    "layers":[
       {  
         "baseURL":"http://a.tile.openstreetmap.org",
         "maxExtent":[  
            //your extent of map in the correct projection
         ],
         "tileSize":[  
            256,
            256
         ],
         "extension":"png",
         "type":"OSM",
         "opacity":1
      },{
        "baseURL":"http://localhost:8080/geoserver/genesis/wms",
        "opacity":0.5,
        "singleTile":false,
        "type":"WMS",
        "layers":["District_Boundary", "DevelopmentRegions"],
        "format":"image/png",
        "styles":[]
    }
    ],
    "pages":[
    {
        "center":[84.25,28.1],
        "mapTitle":"",
        "comment":"",
        "scale":4000000,
        "rotation":0
    }
    ] }

您需要根据需要更改范围

一旦您发送请求，Geoserver 将填充 osm 瓦片并将其放在地图上

请注意，您应该将 osm 层放在 json 字符串中的其他层之前，否则它将被放置在打印地图中的其他层之上。

【讨论】：

【解决方案2】：

Geoserver Print 插件仅适用于 geoserver 数据。在您的情况下，您应该将 OSM 数据作为地理服务器实例中的一个层来处理。不可能只通过地理服务器“代理”OSM 切片，您必须将 OSM 数据导入数据库。请检查这篇文章： http://blog.geoserver.org/2009/01/30/geoserver-and-openstreetmap/

当您使用 OL3（画布支持）时，您可以考虑浏览器端打印。从画布获取图像非常简单： https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

您还可以使用 JavaScript 生成 PDF： https://github.com/MrRio/jsPDF

【讨论】：