如何将地图导出为全屏方式（使用OpenLayer）？

我有下面的代码和它完美：如何将地图导出为全屏方式（使用OpenLayer）？

<style> 
    .map { 
     width: 100%; 
     height: 350px; 
    } 
    </style> 

    <div id="map" class="map"></div> 

    /* Export map to PNG Format */ 
    var exportPNGElement = document.getElementById('pngFormat'); 

    if ('download' in exportPNGElement) { 
    exportPNGElement.addEventListener('click', function(e) { 
     map.once('postcompose', function(event) { 
     var canvas = event.context.canvas; 
     exportPNGElement.href = canvas.toDataURL('image/png'); 
     }); 
     map.renderSync(); 
    }, false); 
    } else { 
    var info = document.getElementById('no-download'); 
    /** 
    * display error message 
    */ 
    info.style.display = ''; 
    }

但现在，我想这一切都出口到全屏的方式。

我试着插入下面的代码，但它不起作用。

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight;

此外，我试图调整div映射的大小，但没有成功。

var maptoEdit = document.getElementById('map').innerHTML = "<div style='height:100%; width:100%'></div>";

来源

2015-03-02 Javier Muñoz

你的大小调整方式将只需填写元素与空div。地图的来源是什么？ – charlietfl 2015-03-02 16:21:56

什么不起作用？它可能会麻烦与'帆布'和百分比工作。 – A1rPun 2015-03-02 16:22:05

UPDATE：

最后，我能做到这一点在下方式：

//document.getElementById('map').style.width = $(window).width() + 'px'; // Returns width of browser viewport 
//document.getElementById('map').style.height= $(window).height() + 'px'; // Returns height of browser viewport 
document.getElementById('map').style.width = '1280px'; 
document.getElementById('map').style.height = '768px'; 
map.updateSize();

来源

2015-03-02 18:01:58

如何将地图导出为全屏方式（使用OpenLayer）？

回答

相关问题