openlayer 地图导出图片。

最新推荐文章于 2024-12-20 10:13:54 发布

Div.

最新推荐文章于 2024-12-20 10:13:54 发布

阅读量881

点赞数

分类专栏：学习文章标签： openlayer JavaScript

本文链接：https://blog.youkuaiyun.com/jCNCCD/article/details/102947749

版权

学习专栏收录该内容

1 篇文章

订阅专栏

layer中的属性

            new ol.layer.Tile({
                visible:true,
                source:new ol.source.OSM({
                    crossOrigin:'anonymous',
                })
            });

crossOrigin 属性要设置不然导出图片空白

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Div.

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

fxshy的博客

06-02

270

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

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

GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

04-12

1735

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

参与评论您还未登录，请先登录后发表或查看评论

Openlayers 教程 - 地图以及图层数据导出（打印）图片

linzi19900517的博客

10-07

2327

Openlayers 教程 - 地图以及图层数据导出（打印）图片。

OpenLayers3, 导出图片

我哎GIS博客

08-22

1229

本文基于OpenLayers3，canvas转图片实现地图导出图片的功能。以上为基于openlayer3 实现导出图片的简单案例，希望对您有帮助~

五十七、openlayers官网示例Map Export解析——将地图导出为图片

aaa_div的博客

06-24

1131

然后绑定一个点击事件，使用this.map.renderSync()同步渲染一次地图，让地图触发rendercomplete事件。因为openlayers绘制的地图上有好几canvas画布，所以要把它们都拿到，并把图像绘制到一个新的canvas上。比如transform的matrix矩阵属性，若存在，需要将transform重新设置给新的mapContext。也就是说，只要写以下几行代码，就可以实现基本的导出功能。在canvas上绘制图形，并导出为图片。说地图导出前，我们先来看一个例子。

openlayers 导出png格式

qq_45658025的博客

06-19

930

<!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

openlayer4地图及图层导出图片问题小结

pdw521的专栏

11-17

3086

直接使用ol4中的地图导出功能在我们的项目中可能会存在跨域问题，导致地图不能正常的转为二进制。解决方法： 1 //自定义图层中添加crossOrigin，具体如下： var tdtTerLayer = new ol.layer.Tile({ visible: true, source: new ol.source.XYZ(

openlayer map导出

04-24

关于OpenLayers的地图导出功能，它可以通过使用Canvas或者SVG技术将地图以图片或者矢量格式导出。以下是一些常见的OpenLayers地图导出方法： 1. 使用Canvas导出地图图片： OpenLayers提供了`toDataURL()`方法，...

openlayer 图层上下_OpenLayers 之图层(Layers) 详解

weixin_35788914的博客

01-17

1547

声明：文章为本人原创，转载或使用请注明作者和出处！！谢谢！如果不是专业的地图工作者，看到地图，可能觉得地图就是一张将三维世界映射到二维空间，很多信息混杂在一起表示空间信息的动态可交互图片，其实这只是表面现象。实际上地图是由一个或多个图层组成的，使用不同的图层存储不同类型的地物，比如由存储道路的图层，有展示拥堵情况的图层，通常还有一个含有基础地理信息(比如政区划分)的底图图层。在 OpenLayer...

Openlayers中图片导出功能实现及可能存在的问题

高端客户

08-01

3696

openlayers v4.6.5给出的例子 //引用FileSaver.js &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"&gt;&lt;/script&gt; //添加导出按钮 &lt;a id="export-png&

openlayer地图导出指定范围图片文件

java coder https://github.com/pmsyn/ https://gitee.com/pmsyn

07-21

1927

openlayer地图导出指定范围图片文件在gis系统中我们经常遇到将指定区域的地图导出为图片文件，在openlayer官网提供了导出样例https://openlayers.org/en/latest/examples/export-map.html，导出文件格式为base64编码。 but 大家在使用过程中肯能会遇到导出文件失败该问题经过网上查阅资料发现，是由于跨域请求导致，加载地图时未设置允许跨域。设置为允许跨域后一切正常。具体代码如下： let layer = new ol.layer

OpenLayers 截图导出方式 html2canvas 以及直接从地图的导出

Trustport的博客

09-21

6402

自己做一下记录，备忘。方式一：html2canvas截图方式，需要下载对应的js文件。之前遇到的问题截取不出来，导出的图片只看到div id =printcontent 的背景色，不设置背景颜色就可以了。 (html2canvas(document.getElementById("printcontent"), { async: false, allowTaint: true...

029：vue+openlayers:使用MVT格式读取瓦片数据（示例代码）

大剑师兰特的GIS世界

08-11

1280

本示例的目的是介绍演示如何在vue+openlayers中使用MVT读取矢量瓦片数据，并显示图形。直接复制vue+openlayers源代码，操作2分钟即可运行实现效果

openlayers 将地图导出成图片

qq_38000851的博客

07-31

2292

转至：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

1297

openlayers结合PDF和PNG插件将地图转化为图片或者PDF文档

37.在 Vue 3 中使用 OpenLayers 导出地图图片（JPG）

最新发布

小彭的博客

12-20

566

通过本文的讲解，你已经学会如何在 Vue 3 中使用 OpenLayers 实现地图导出为图片的功能。此功能可以为用户提供方便的下载选项，将地图图像保存为 JPG 格式，并可应用于各种地图应用场景，如地理信息展示、数据分析等。你可以根据需要扩展该功能，加入更多的地图交互特性，或者支持不同格式的图片导出。希望本文对你有帮助，祝你在使用 Vue 和 OpenLayers 时一切顺利！

OpenLayers地图打印输出

做GIS梦的人

05-17

5369

最近遇到了在Openlayers上开发地图打印的功能，官网给了两个全图打印的demo。其核心思想是将canvas里的像素提取出来。全图输出，保存为本地图片map.once("postcompose", function(event) { var canvas = event.context.canvas; if (navigator.msSaveBlob) { ...

jsPdf导出openlayers截图

wangwffgqeg的专栏

05-24

295

问题 ol生成图片遇到脏污染无法截图 ol指定范围指定Zoom下显示的宽高问题 jspdf中文乱码问题 1. 脏污染属于浏览器的安全机制，canvas内引入了其他跨域文件，在调用toDataUrl、toBold、getImageData 触发检查。启用了 CORS 的图片 - HTML（超文本标记语言） | MDN 引入外部图层在wms,wmts增加属性允许跨域 2.自动生成宽高参考 getSizeForExtent(extent, zoom) { const reso...

openlayers+geotiff.js实现tiff格式图片导出

qq_45118905的博客

04-07

2081

OpenLayers是一个开源的JavaScript库，用于在Web浏览器中呈现交互式地图。它本身并不提供导出地图为TIFF图片的功能，但可以结合其他库或服务来实现这个功能。一种可能的解决方案是使用Canvas和FileSaver.js库。Canvas可以将网页上的内容渲染为图像，而FileSaver.js库可以将生成的图像保存到本地。在生成TIFF文件上我选择geotiff.js这个库，GeoTIFF.js可以在TIFF图像中嵌入地理元数据，并且支持多种地图投影坐标系。