OpenLayers 导出带有比例尺的 png 地图画布

Posted 2023-03-28

【中文标题】OpenLayers 导出带有比例尺的 png 地图画布

【英文标题】：OpenLayers export png map canvas with scale bar

【发布时间】：2022-01-01 07:54:22

【问题描述】：

我正在尝试启动一个使用比例尺导出 .png 地图的选项。

到目前为止，我使用了以下示例：

Save the map with the control scale-line

而我的代码如下所示：

document.getElementById('export-png').addEventListener('click', function() 
 map.once('postcompose', function(event) 
 var canvas = document.createElement('canvas');
 var size = map.getSize();
 canvas.width = size[0];
 canvas.height = size[1];
 var mapContext = canvas.getContext('2d');
 mapContext.strokeStyle = "#0000FF";
 mapContext.lineWidth = 5;
 mapContext.beginPath();
 mapContext.moveTo(10, size[1]-10);
 mapContext.lineTo(200/map.getView().getResolution(), size[1]-10);
 mapContext.stroke();
 mapContext.font = "20px Arial";
 mapContext.fillText("200m", 10, size[1]-10);
 Array.prototype.forEach.call(
  document.querySelectorAll('.ol-layer canvas'),
  function (canvas) 
    if (canvas.width > 0) 
      var opacity = canvas.parentNode.style.opacity;
      mapContext.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(
        mapContext,
        matrix
      );
      mapContext.drawImage(canvas, 0, 0);
    
  
);
if (navigator.msSaveBlob) 
  // link download attribuute does not work on MS browsers
  var imgName = prompt("Please provide the name", "survey_map");
  navigator.msSaveBlob(canvas.msToBlob(), imgName + '.png');
   else 
  var link = document.getElementById('image-download');
  link.href = canvas.toDataURL();
  link.click();
 
 );
 map.renderSync();
);

但尽管 new ol.control.ScaleLine(bar: true) 设置为地图属性，但它并未显示在导出的 .png 地图中。

我也试过这个例子：

https://www.kreidefossilien.de/webgis/dokumentation/beispiele/export-map-to-png-with-scale

how to export openlayer3 map to png with its scale bar using js

但它会引发错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'beginPath')

此处有类似问题的提示：

Uncaught TypeError: Cannot read property 'beginPath' of undefined

很遗憾对我没有帮助

如何在 .pdf 导出中包含地图比例？

你可以在这里找到完整的代码和情况：

https://mlearnweb.online/

【问题讨论】：

您可以使用 html2canvas 创建地图的画布副本，包括 openlayers.org/en/latest/examples/print-to-scale.html 中的控件或叠加层，但不要将画布添加到 pdf 中，通过 canvas.msToBlob() 或画布将其导出为 png .toDataURL() 在您的代码中

我看到了 scale 变量，但我不知道如何将它与我的代码相匹配。

【参考方案1】：

Openlayers ol-ext 扩展库具有可以导出并打印在地图上的画布控件。 参见示例：https://viglino.github.io/ol-ext/examples/canvas/map.canvas.control.html

【讨论】：

我使用了这个例子但没有成功。