OpenLayer导出映射到图像

var map = new ol.Map({
  // 地图的配置参数
});

// 导出地图为图像
map.once('rendercomplete', function() {
  var canvas = document.createElement('canvas');
  var size = map.getSize();
  canvas.width = size[0];
  canvas.height = size[1];
  var context = canvas.getContext('2d');
  Array.prototype.forEach.call(
    document.querySelectorAll('.ol-layer canvas'),
    function(canvas) {
      if (canvas.width > 0) {
        var opacity = canvas.parentNode.style.opacity;
        context.globalAlpha = opacity === '' ? 1 : Number(opacity);
        var transform = canvas.style.transform;
        // Get the transform parameters from the style's transform matrix
        var matrix = transform
          .match(/^matrix\(([^\(]*)\)$/)[1]
          .split(',')
          .map(Number);
        // Apply the transform to the export map context
        CanvasRenderingContext2D.prototype.setTransform.apply(
          context,
          matrix
        );
        context.drawImage(canvas, 0, 0);
      }
    }
  );

  // 将地图导出为图像文件
  canvas.toBlob(function(blob) {
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'map.png';
    link.click();
  });
});

// 加载地图图层和其他配置