javascript - 使用控制比例线保存 map

标签 javascript openlayers

我可以将 map 保存为 PNG 图像,但如何将比例线控件添加到此 Canvas 上?

// 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();
});

最佳答案

请注意,在下一个版本中https://github.com/openlayers/openlayers/blob/master/changelog/upgrade-notes.md OpenLayers 将从所有图层使用单个 Canvas 更改为每个图层使用一个 Canvas ,这与保存完整 map 不兼容。然而,对于 5.3 及更低版本,ol-ext 库包含用于比例线、属性和标题的 Canvas 控件 https://viglino.github.io/ol-ext/examples/canvas/map.canvas.control.html在许多情况下,可以从源复制各个控件的代码并进行自定义,而不需要整个库 https://viglino.github.io/ol-ext/dist/ol-ext.js

关于javascript - 使用控制比例线保存 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54615242/

相关文章:

javascript - 如何从 txt 文档中的列表中获取文本字符串?

javascript - 如何查看 AngularJS 发送的 HTTP 请求?

javascript - 使用openlayers在给定坐标的 map 上绘制点?

android - openlayers 到 native android 应用程序

zooming - Openlayers 放大或缩小

javascript - 将辅助函数分配(或不分配)给一个对象需要权衡什么?

javascript - 未捕获的类型错误 : Cannot read property '_props' of undefined

javascript - Firefox 和 Chrome 的 CORS 错误

openlayers - 创建 map 图例以匹配 OpenLayers.Style

java - 在 OpenLayers 中取消选择选定的标记/vector