OpenLayers地图转PDF时页眉重叠问题求助

核心思路 #

先为页眉（含Logo）预留顶部空间，再将地图画布绘制到预留空间下方，最后单独添加页眉文本和Logo元素，从绘制顺序和空间分配上避免重叠。

具体实现步骤 #

1. 定义页面尺寸与页眉预留高度 #

先明确PDF页面的基础尺寸，同时指定页眉区域的高度，为后续绘制预留空间：

const pdfWidth = 210; // A4宽度，单位mm
const pdfHeight = 297; // A4高度，单位mm
const headerHeight = 50; // 页眉预留高度，单位mm
const mmToPx = 72 / 25.4; // mm转jsPDF像素（默认72dpi）
const mapStartY = headerHeight * mmToPx; // 地图绘制的起始Y坐标

2. 适配地图画布尺寸并渲染 #

调整OpenLayers地图导出的画布尺寸，使其高度刚好填充页面剩余空间（页面总高度减去页眉高度）：

const map = new ol.Map({/* 你的地图配置 */});
// 计算地图导出的目标尺寸
const mapExportWidth = pdfWidth * mmToPx;
const mapExportHeight = (pdfHeight - headerHeight) * mmToPx;
// 创建对应尺寸的画布并渲染地图
const mapCanvas = document.createElement('canvas');
mapCanvas.width = mapExportWidth;
mapCanvas.height = mapExportHeight;
const mapContext = mapCanvas.getContext('2d');
// 缩放画布匹配地图尺寸比例
mapContext.scale(mapExportWidth / map.getSize()[0], mapExportHeight / map.getSize()[1]);
map.renderSync(mapContext);

3. 将地图添加到PDF的预留位置 #

把渲染好的地图画布添加到PDF时，指定Y坐标为mapStartY，确保从页眉下方开始绘制：

const pdf = new jsPDF('portrait', 'px', [pdfWidth * mmToPx, pdfHeight * mmToPx]);
// 添加地图到PDF
pdf.addImage(
  mapCanvas,
  'PNG',
  0, // X坐标：左对齐
  mapStartY, // Y坐标：从页眉下方开始
  mapExportWidth,
  mapExportHeight
);

4. 添加页眉Logo与文本 #

在地图绘制完成后，单独绘制页眉元素，避免被地图覆盖：

• 添加Logo：

// 假设logoImg是已加载完成的Logo图片对象
pdf.addImage(
  logoImg,
  'PNG',
  10 * mmToPx, // Logo左侧边距
  10 * mmToPx, // Logo顶部边距
  30 * mmToPx, // Logo宽度
  30 * mmToPx // Logo高度
);

• 添加页眉文本：

pdf.setFontSize(14);
pdf.setTextColor(33, 33, 33);
// 文本位置与Logo错开，放在右侧或居中
pdf.text('地图导出报告', 50 * mmToPx, 25 * mmToPx);

5. 保存PDF #

最后执行保存操作即可得到带页眉和Logo的地图PDF：

pdf.save('map-with-header.pdf');

内容的提问来源于stack exchange，提问作者Rushabh Gandhi