Question

我有以下代码，它完美无缺：

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

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

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

1 个答案: