使用 innerHTML 进行 OpenLayers 打印答案

【问题标题】：OpenLayers printing using innerHTML使用 innerHTML 进行 OpenLayers 打印
【发布时间】：2014-03-13 20:48:28
【问题描述】：

我在尝试从全屏 OpenLayers Web 制图应用程序创建格式化打印页面时遇到问题。

当我调用打印函数时，我使用 css 样式的 HTML 创建了一个新窗口。我从 OpenLayers 画布中获取 innerHTML 并将内容粘贴到打印页面上的新画布 div 中。

    {
var widthPx = document.getElementById('OpenLayers_canvas').offsetWidth;
var heightPX = document.getElementById('OpenLayers_canvas').offsetHeight;

var html =
    '<html><head>'
    + '<link rel="stylesheet" href="styles/olStyle_printing.css" type="text/css" />'
    + '</head><body>'
    + '<div id="OpenLayers_printcanvas">'
    + '<div style="width:' + widthPx + 'px;height:' + heightPX + 'px" id="OpenLayers_canvas">'
    + document.getElementById('OpenLayers_canvas').innerHTML
    + '</div>'
    + '</div>'
    + '</body></html>';

var w = window.open();
    w.document.write(html);
    w.document.close();
    w.focus();
    w.print();
    //w.close();
}

问题是我不知道如何使内容居中。

地图绑定在左上角。我想要做的是让原始地图的中心位于打印页面框架的中心。

编辑：我添加了一个带边框的容器 div。我可以隐藏溢出。但是，问题是我不知道如何将 div 在其容器中居中。

第一个屏幕截图显示了 OpenLayers 应用程序：

第二个屏幕截图显示了我在容器 div 内的 div 中使用 innerHTML 内容创建的文档。

【问题讨论】：

你能发fiddle吗？对调试很有帮助。
大概使用“检查元素”，您可以找出白色叠加层击中地图左上角的位置，然后对其进行编码以将整个 div 重新定位到屏幕的左上角（通过给它一个负左上角）。
我现在通过使用地图画布宽度的一半减去打印画布宽度的一半来硬编码负顶部和左侧来解决这个问题。我不喜欢硬编码值，但现在必须这样做。

标签： javascript html openlayers

【解决方案1】：

我相信你的问题在于，如果你使用 innerHTML 你什么都不做，那么只需发送与之前在页面中发送的请求相同的请求。如果您想显示其他内容，则必须更改请求。

工作流程应该是这样的：

更改地图视图，以您想要的多边形为中心
将此视图发送到打印对象的 innerHTML
返回上一个视图，在您更改地图视图的特征之前

第二个机会是在您的打印对象中创建新的地图视图，您可以根据打印功能的边界设置地图的边界。

或者你可以试试这个： Openlayers Print Function

或者这个（对地图服务器的新请求）： http://trac.osgeo.org/openlayers/wiki/Printing

【讨论】：

感谢您研究这款麻糬。在使用打印功能之前，我已经设置了地图的视图。创建一个新的地图视图可能会起作用，但我必须传递所有地图视图设置，而不仅仅是边界。我现在通过硬编码左侧和顶部偏移量然后隐藏溢出来解决这个问题。我知道硬编码不是一个优雅的解决方案，所以我没有发布这个。
打印一直是 openLayers 的问题（使用 webPages :)）。由于正是这些问题，我们最终在服务器端解决了这个问题。您的 mapServer 也有可能直接支持打印（例如地理服务器）。您只需发送一个借助 openLayers（您当前的地图对象设置、图层、选项等）生成的请求，然后获取您在弹出窗口中打开的图像，然后调用 print() 即可；）跨度>