使用控制比例尺线保存地图

织梦狗教程前端问题

2022-01-01

Save the map with the control scale-line(使用控制比例尺线保存地图)

本文介绍了使用控制比例尺线保存地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我可以将地图保存为PNG图像，但如何将比例尺线控件添加到此画布？

// export png
document.getElementById('export-png').addEventListener('click', function() {
  map.once('postcompose', function(event) {
    var canvasElement = event.context.canvas;
    var MIME_TYPE = "image/png";
    var imgURL = canvasElement.toDataURL(MIME_TYPE);
    var dlLink = document.createElement('a');
    dlLink.download = "carte"; //fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
  });
  map.renderSync();
});

OpenLayers

请注意，在下一个版本中https://github.com/openlayers/openlayers/blob/master/changelog/upgrade-notes.md推荐答案将从针对所有层的单一画布更改为针对每个层的画布，这将与保存完整地图不兼容。但是，对于5.3和更低版本，ol-ext库包括用于比例线、属性和标题的画布控件https://viglino.github.io/ol-ext/examples/canvas/map.canvas.control.html在许多情况下，可以从源代码复制和定制单个控件的代码，而不需要整个库https://viglino.github.io/ol-ext/dist/ol-ext.js

这篇关于使用控制比例尺线保存地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

地图