OpenLayers使用innerHTML打印

我試圖從我的全屏創建格式化的打印頁面時遇到問題OpenLayers Web應用程序。OpenLayers使用innerHTML打印

當我打電話給我的打印功能時，我使用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應用：

enter image description here

其次截圖顯示了我一個div容器內一個div的innerHTML內容創建文檔。

enter image description here

來源

2014-03-06 Dennis Bauszus

你能使[小提琴]（http://jsfiddle.net）？這將有助於調試。 – Unknown

假設使用「檢查元素」，您可以找出白色覆蓋圖位於地圖左上角的位置，然後對其進行編碼以將整個div重新定位回屏幕左上角（通過給它一個負左上角）。 – OGHaza

我現在通過硬編碼負頂部和左半部分使用地圖畫布寬度減去打印畫布寬度的一半來解決此問題。我不喜歡硬編碼值，但現在必須這樣做。 –

我相信你的問題就在於，如果你使用的innerHTML你什麼也不做，然後只發送相同的請求，你在頁面之前發送。如果你想展示別的東西，你必須改變請求。

的工作流程應該是這樣的：

改變地圖的視圖，中心想要
發送此欣賞到innerHTML的打印對象的
返回到前一個視圖中的多邊形，然後再更改地圖視圖的特徵

第二個機會是在您創建新的地圖視圖的打印對象中，根據該地圖設置地圖的邊界打印功能的邊界。

，或者你可以試試這個： Openlayers Print Function

或這（新的請求，地圖服務器）： http://trac.osgeo.org/openlayers/wiki/Printing

來源

2014-03-13 12:38:50 Mochi

感謝您關注此Mochi。在使用打印功能之前，我已經設置了地圖的視圖。創建一個新的地圖視圖可能會工作，但我將不得不通過所有的地圖視圖設置，而不僅僅是邊界。現在我通過硬編碼左邊和頂部偏移量然後隱藏溢出來解決問題。我知道，硬編碼不是一個優雅的解決方案，所以我沒有發佈這個聽到。 –

打印始終是openLayers（帶有網頁:)）的問題。我們最終在服務器端解決了這個問題，原因正是這些問題。您的mapServer也有可能直接支持打印（例如geoserver）。你只需要在openLayers的幫助下（你當前的地圖對象設置，圖層，選項等等）發送一個請求，然後得到一個你在彈出窗口中打開的圖像，然後調用print（）就可以了;） – Mochi

OpenLayers使用innerHTML打印

回答

相關問題