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

【问题标题】：How to export a map to fullscreen way (using OpenLayer)?如何将地图导出为全屏方式（使用 OpenLayer）？
【发布时间】：2015-03-07 11:10:43
【问题描述】：

我有以下代码，它运行良好：

  <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>";

【问题讨论】：

您的调整大小方法只会用空 div 填充元素。什么是地图来源？
什么不起作用？使用 canvas 和百分比可能会很麻烦。

标签： javascript jquery canvas openlayers

【解决方案1】：

更新：

最后，我可以用下一个方法：

//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();

【讨论】：