OpenLayers入门，OpenLayers导出整幅地图为png图片并保存下载

原创 已于 2023-05-28 22:51:12 修改 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#OpenLayers #gis地图开发 #地图导出为图片 #整幅地图导出图片 #base64转图片

于 2023-04-12 15:30:30 首次发布
本文介绍了如何使用OpenLayers将整幅地图及其所有图层内容导出为PNG图片并进行下载。详细讲解了依赖安装、Vue中集成OpenLayers的方法，以及导出、转换和下载图片的步骤。通过示例代码展示了实现该功能的过程，同时提醒注意跨域问题。

专栏目录：
OpenLayers入门教程汇总目录

前言

有时候截图只能截一部分地图，而我们想要整幅地图和上面叠加的所有图层内容全部导出来，本章就是结局的这个问题，简单写一下OpenLayers保存整幅地图为png图片并下载功能。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
了解本专栏 订阅专栏 解锁全文
Openlayers实战：绘制图形，导出geojson文件
大剑师兰特的GIS世界
07-22 901
GeoJSON格式数据在GIS中具有非常重要的地位，大多数时候都会用geojson来存储数据。在本Openlayer实战中，我们自己绘制矩形，然后通过file-saver导出数据。
43-OpenLayers6入门-OpenLayers导出整幅地图为png图片并保存下载
fxshy的博客
06-02 415
43-OpenLayers6入门-OpenLayers导出整幅地图为png图片并保存下载
Photoshop-Scripts
05-03
Photoshop-LayersToPNG_JH 使您能够轻松地对纹理分辨率进行更多优化。 您可以在Photoshop中为特定图层设置导出比例和旋转值，并在导入到Spine后保持附件的大小和旋转，与在Photoshop中看到的相同。 如何使用 您可以通过在图层名称中添加后缀来定义比例和旋转。 通过在图层名称中添加后缀'#s'来定义比例。 通过在图层名称中添加后缀'#r'来定义旋转。 前任。 'thisislayername＃s0.5' （比例= 50％） 'thisislayername＃s0.8＃r-12' （比例= 80％，旋转= -12度） 发行说明 v1.1.0 防止因错误的后缀而导致错误。 通过“另存为Web”导出图像。 按层边界计算数据。 是否允许尸体离开画布。 修复了图层旋转后位置不正确的问题。 在Spine中导入数据后正确设置模板附件。 v1.0
告别地图打印混乱：OpenLayers标准化模板系统让输出格式一键统一
最新发布
gitblog_00439的博客
10-14 896
你是否还在为地图打印格式不统一、比例尺偏差、要素错位而头疼？运营报告中地图尺寸忽大忽小，客户会议上打印地图模糊不清，现场勘查时坐标与实际位置偏差显著——这些问题不仅影响工作效率，更可能导致决策失误。本文将带你从零构建OpenLayers地图打印模板系统，通过标准化输出流程，实现一键生成符合行业规范的地图文档。读完本文，你将掌握模板设计、样式配置、批量导出的全流程技能，彻底解决地图打印格式混乱难题。...
Spine_快速入门 Quick Start
10-13
Spine_快速入门 Quick Start
Openlayers 教程 - 地图以及图层数据导出（打印）图片
非科班Java出身GISer的博客
10-07 2630
Openlayers 教程 - 地图以及图层数据导出（打印）图片。
openlayer 地图导出图片。
房东的猫的博客
11-07 925
layer中的属性 new ol.layer.Tile({ visible:true, source:new ol.source.OSM({ crossOrigin:'anonymous', }) }); cros...
Vue+OpenLayers7入门到实战：OpenLayers导出整幅地图为png图片并保存下载
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-26 640
本章介绍如何使用OpenLayers7地图导出整幅地图为png图片并保存下载。有时候截图只能截一部分地图，而我们想要整幅地图和上面叠加的所有图层内容全部导出来，本章就是结局的这个问题，简单写一下OpenLayers保存整幅地图为png图片并下载功能。
OpenLayers3, 导出图片
我哎GIS博客
08-22 1449
本文基于OpenLayers3，canvas转图片实现地图导出图片的功能。以上为基于openlayer3 实现导出图片的简单案例，希望对您有帮助~
五十七、openlayers官网示例Map Export解析——将地图导出为图片
aaa_div的博客
06-24 1428
然后绑定一个点击事件，使用this.map.renderSync()同步渲染一次地图，让地图触发rendercomplete事件。因为openlayers绘制的地图上有好几canvas画布，所以要把它们都拿到，并把图像绘制到一个新的canvas上。比如transform的matrix矩阵属性，若存在，需要将transform重新设置给新的mapContext。也就是说，只要写以下几行代码，就可以实现基本的导出功能。在canvas上绘制图形，并导出为图片。说地图导出前，我们先来看一个例子。
vue+openlayers导出整幅地图为image图片（附源码）
whs15193553607的博客
06-27 851
vue+openlayers导出整幅地图为image图片（附源码）
Openlayers根据分辨率和纸张尺寸下载地图为JPG和PDF
qq_38241330的博客
02-23 498
【代码】Openlayers根据分辨率和纸张尺寸下载地图为JPG和PDF。
openlayers 导出png格式
qq_45658025的博客
06-19 969
<!DOCTYPE html> <html> <head> <title>Map Export</title> <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments
openlayer地图导出指定范围图片文件
java coder https://github.com/pmsyn/ https://gitee.com/pmsyn
07-21 2019
openlayer地图导出指定范围图片文件 在gis系统中我们经常遇到将指定区域的地图导出为图片文件，在openlayer官网提供了导出样例https://openlayers.org/en/latest/examples/export-map.html，导出文件格式为base64编码。 but 大家在使用过程中肯能会遇到导出文件失败 该问题经过网上查阅资料发现，是由于跨域请求导致，加载地图时未设置允许跨域。设置为允许跨域后一切正常。 具体代码如下： let layer = new ol.layer
OpenLayer+Vue2实现离线地图-地图图层下载
weixin_45706529的博客
12-25 1652
在使用openlayer技术实现离线地图的前提，需要对地图图层瓦片的下载。
Openlayers中图片导出功能实现及可能存在的问题
高端客户
08-01 3828
openlayers v4.6.5给出的例子 //引用FileSaver.js &amp;lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; //添加导出按钮 &amp;lt;a id=&quot;export-png&
OpenLayers 截图导出方式 html2canvas 以及 直接从地图的导出
Trustport的博客
09-21 6571
自己做一下记录，备忘。 方式一：html2canvas截图方式，需要下载对应的js文件。之前遇到的问题截取不出来，导出的图片只看到div id =printcontent 的背景色，不设置背景颜色就可以了。 (html2canvas(document.getElementById("printcontent"), {         async: false, allowTaint: true...
openlayers 将地图导出成图片
qq_38000851的博客
07-31 2378
转至：https://blog.youkuaiyun.com/u013240519/article/details/81330021 在做完应急指挥地图后，心血来潮想着将应急指挥地图导出成图片，然后在导出图片时出现一个错误。 Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 这是由于在导出图片时，涉及到了跨域的问题。 解决办法是给天地图的s
OpenLayers教程09_打印地图：导出地图为图片或PDF
w131552的博客
11-18 1895
openlayers结合PDF和PNG插件将地图转化为图片或者PDF文档
openlayers有没有将地图导出图片的方法
09-25
一种常见的做法是利用HTML5的Canvas元素结合OpenLayers提供的坐标转换功能，先在Canvas上绘制地图内容，然后从Canvas获取图像数据并保存为图片。以下是一个简单的示例： ```javascript var map = ... // 初始化好的...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值