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

How to export a map to fullscreen way (using OpenLayer)?

本文关键字：方式 使用 OpenLayer 地图      更新时间：2024-08-07

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

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

更新：

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

//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();
相关文章：