在OpenLayers4中将地图及叠加显示的图层生成图片保存到数据库方法

最新推荐文章于 2024-08-13 11:39:10 发布
最新推荐文章于 2024-08-13 11:39:10 发布
阅读量4.2k 收藏 2
点赞数
分类专栏： WebGIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pdw521/article/details/78551937
版权
本文介绍了如何在OpenLayers4中将地图及叠加显示的图层转换为图片并保存到数据库。关键步骤包括设置图层源的跨域属性，使用canvas转换图片为Blob，以及通过JavaScript异步调用服务端接口进行图片保存。示例代码展示了从触发保存事件到调用服务端接口的完整流程。
摘要由CSDN通过智能技术生成

在调用自己发布的图层服务时注意在图层源属性中加入跨域。

new ol.layer.Image({
                   source: new ol.source.ImageArcGISRest({
                       ratio: 1,
                       params: {},
                       crossOrigin: 'anonymous',
                       url: "http://10.5.1.186:6080/arcgis/rest/services/thly/thlyfq/MapServer"
                   })
               })

否则在图片转换时报错。

navigator.msSaveBlob(canvas.msToBlob(), 'map.png'); 中提示canvas.msToBlob()发生严重性错误。

 

openlayers4获取地图及叠加图层的代码如下：

//*****************************************************************************************************
//*****************************************图片持久化转换************************

最低0.47元/天 解锁文章
David_SIAT
关注
专栏目录
Openlayers 教程 14 - 叠加天地图WMTS图层 - 中国近海海洋等深面图层服务
linzi19900517的博客
08-31 456
Openlayers 叠加天地图-中国近海海洋等深面图层服务。
OpenLayers入门，webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 1434
上一章中《OpenLayers入门，使用webgl图层叠加大量点要素，解决OpenLayers地图中叠加大量点导致浏览器卡住变慢的问题》已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题，本章补充一下叠加图片图标到地图的情况下。
openlayers编辑地图图层并保存到geoserver
05-09
次程序是openlayers和geoserver的一个demo程序，可以实现在地图文件上编辑，修改，新增 区域，并保存，可以在地图区域上，标点，画多边形区域
openlayers3中如何叠加png图片
weixin_30824277的博客
05-09 934
概述本文讲述如何在OL3中叠加展示PNG图片。实现思路在OL3中，可通过ImageStatic资源来添加展示一个PNG图片，代码如下： image = new ol.layer.Image({ source: new ol.source.ImageStatic({ url: "img/china2.png", ...
vue+openlayers直接前端加载tif文件，不需要geoserver发布
最新发布
天干地支甲
08-13 307
【代码】vue+openlayers直接前端加载tif文件，不需要geoserver发布。
Openlayers将绘画保存到后台
￡Duan’yi!
11-06 743
保存绘画一般是要素的Geojson或者kml格式数据。 保存Geojson数据格式要通过ol.format类从Feature转换。
基于openlayers3生成专题图
09-03
由于OL3本身不具有专题图生成功能，本程序借助第三方js库生成专题图，可选择分级方法和分级数。为方面大家，源程序里的页面文件、CSS文件和JS文件都放到文档中了，并添加了生成的效果图。
OpenLayers 静态图（雷达拼图）叠加
weixin_33795093的博客
10-21 2685
本文介绍雷达拼图在 OpenLayers 上的叠加显示，雷达拼图是由中国气象局气象探测中心在《天气雷达拼图v3.0》系统中发布的，每个观测时次一幅 PNG 透明图片。对于静态图片加载，OpenLayers 提供了 ol.source.ImageStatic 来支持，可以参考官方的 demo Image Reprojection，demo ...
openlayers天地图叠加geoserver发布的图层
v_loading的博客
06-17 483
#叠加效果 #实现 ##在geoserver发布画好的图层 地址：http://localhost:8080/geoserver/workspace/wms ##vue项目中调用 //叠加geoserver发布的wms图层 //workspace:test001 为图层name var geoserverUrl = "http://localhost:8080/geoserver/workspace/wms"; var wmsSource = new TileWMS(
OpenLayers入门，OpenLayers导出整幅地图为png图片并保存下载
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-12 1536
有时候截图只能截一部分地图，而我们想要整幅地图和上面叠加的所有图层内容全部导出来，本章就是结局的这个问题，简单写一下OpenLayers保存整幅地图为png图片并下载功能。
openlayers加载静态图片地图
10-31
openlayers加载静态图片作为底图，操作图片流畅，可控显示范围和等级
基于openlayers雷达图的叠加显示
pdw521的专栏
08-13 4183
本文介绍雷达拼图在 OpenLayers 上的叠加显示，雷达拼图是由中国气象局气象探测中心在《天气雷达拼图v3.0》系统中发布的，每个观测时次一幅 PNG 透明图片。对于静态图片加载，OpenLayers 提供了 ol.source.ImageStatic 来支持，可以参考官方的 demo Image Reprojection，demo 演示了图片叠加以及投影调整的具体实现。在具体实现雷达拼图的过...
vue+openlayers导出整幅地图为image图片（附源码）
whs15193553607的博客
06-27 490
vue+openlayers导出整幅地图为image图片（附源码）
OpenLayers入门，OpenLayers如何使用gifler库来实现gif动态图图片叠加到地图上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
02-01 1308
OpenLayer本身不支持gif图片作为图标要素显示，所以需要通过其他办法来实现支持gif图片。本章使用gifler库先生成canvas画板，然后通过canvas画板的重绘事件来重新渲染地图来达到实现OpenLayergif动态图的功能。
openlayers：实现将地图导出为PNG图像 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-29 212
openlayers：实现将地图导出为PNG图像 (附完整源码）
openlayer地图导出指定范围图片文件
java coder https://github.com/pmsyn/ https://gitee.com/pmsyn
07-21 1792
openlayer地图导出指定范围图片文件 在gis系统中我们经常遇到将指定区域的地图导出为图片文件，在openlayer官网提供了导出样例https://openlayers.org/en/latest/examples/export-map.html，导出文件格式为base64编码。 but 大家在使用过程中肯能会遇到导出文件失败 该问题经过网上查阅资料发现，是由于跨域请求导致，加载地图时未设置允许跨域。设置为允许跨域后一切正常。 具体代码如下： let layer = new ol.layer
五十七、openlayers官网示例Map Export解析——将地图导出为图片
aaa_div的博客
06-24 899
然后绑定一个点击事件，使用this.map.renderSync()同步渲染一次地图，让地图触发rendercomplete事件。因为openlayers绘制的地图上有好几canvas画布，所以要把它们都拿到，并把图像绘制到一个新的canvas上。比如transform的matrix矩阵属性，若存在，需要将transform重新设置给新的mapContext。也就是说，只要写以下几行代码，就可以实现基本的导出功能。在canvas上绘制图形，并导出为图片。说地图导出前，我们先来看一个例子。
使用OpenLayers叠加天地图
专注GIS软件开发。
08-30 2359
用到的js库： jquery.min.js OpenLayers.js HTML关键代码： js关键代码： var olMap = { mapCenter:null, changeBaseLayer : function() { $(".changeBaseLayer").bind('click',function(e){ var lyrName = '天地图矢
openlayers 初次加载叠加图片图层
06-01
要在OpenLayers中初次加载叠加图片图层，可以使用Image图层。以下是一个简单的示例代码： ```javascript // 创建地图 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([116.39, 39.9]), zoom: 10 }) }); // 创建Image图层 var imageLayer = new ol.layer.Image({ source: new ol.source.ImageStatic({ url: 'path/to/image.png', // 图片路径 imageSize: [width, height], // 图片大小 projection: map.getView().getProjection(), // 投影 imageExtent: [left, bottom, right, top] // 图片范围 }) }); map.addLayer(imageLayer); ``` 在上面的示例中，我们首先创建了一个地图，并且添加了一个OSM图层。然后，我们创建了一个Image图层，并将其添加到地图中。我们使用ImageStatic源来指定要叠加的图片，需要提供图片的路径、大小、投影和范围。最后，我们将Image图层添加到地图中，这样图片就会显示在地图上了。 希望这个示例能对你有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值