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

在gis系统中我们经常遇到将指定区域的地图导出为图片文件,在openlayer官网提供了导出样例https://openlayers.org/en/latest/examples/export-map.html,导出文件格式为base64编码。

but 大家在使用过程中肯能会遇到导出文件失败
在这里插入图片描述
该问题经过网上查阅资料发现,是由于跨域请求导致,加载地图时未设置允许跨域。设置为允许跨域后一切正常。

具体代码如下:

   let layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: url,
			extent:_map.getView().getProjection().getExtent(),
			crossOrigin: 'anonymous',
        }),
        
    });
    map.addLayer(layer);
    //导出图片文件
	exportMapImg(callback){
				let map = this.map();
				map.once('rendercomplete', function() {
				    var mapCanvas = document.createElement('canvas');
				    var size = map.getSize();
				    mapCanvas.width = size[0];
				    mapCanvas.height = size[1];
				    var mapContext = mapCanvas.getContext('2d');
				    Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
				      if (canvas.width > 0) {
				        var opacity = canvas.parentNode.style.opacity;
				        mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
				        var transform = canvas.style.transform;
				        var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
				        CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
				        mapContext.drawImage(canvas, 0, 0);
				      }
				    });
				    var data;
				    if (navigator.msSaveBlob) {
				    	data = mapCanvas.toDataURL();
				    } else {
				      data = mapCanvas.toDataURL();
				    }
				    callback(data);
				  });
				map.renderSync();
			}
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenLayers是一个开源的JavaScript库,用于在Web浏览器中显示交互式地图。它提供了丰富的功能和工具,可以轻松地在网页上集成地图,并实现各种地图操作和交互。 关于OpenLayers地图导出功能,它可以通过使用Canvas或者SVG技术将地图图片或者矢量格式导出。以下是一些常见的OpenLayers地图导出方法: 1. 使用Canvas导出地图图片OpenLayers提供了`toDataURL()`方法,可以将当前地图视图导出为一个Base64编码的图片URL。你可以使用这个URL来显示地图图片或者保存到本地。 示例代码: ```javascript var map = new ol.Map({ // 地图配置 }); // 导出地图图片 map.once('rendercomplete', function() { var canvas = document.createElement('canvas'); var size = map.getSize(); canvas.width = size[0]; canvas.height = size; var context = canvas.getContext('2d'); Array.prototype.forEach.call( document.querySelectorAll('.ol-layer canvas'), function(canvas) { if (canvas.width > 0) { var opacity = canvas.parentNode.style.opacity; context.globalAlpha = opacity === '' ? 1 : Number(opacity); var transform = canvas.style.transform; // Get the transform parameters from the style's transform matrix var matrix = transform .match(/^matrix\(([^\(]*)\)$/) .split(',') .map(Number); // Apply the transform to the export map context CanvasRenderingContext2D.prototype.setTransform.apply( context, matrix ); context.drawImage(canvas, 0, 0); } } ); var dataURL = canvas.toDataURL('image/png'); console.log(dataURL); }); ``` 2. 使用SVG导出地图矢量数据: OpenLayers提供了`toGeoJSON()`方法,可以将当前地图视图导出为GeoJSON格式的矢量数据。你可以将这些数据保存到本地或者用于其他用途。 示例代码: ```javascript var map = new ol.Map({ // 地图配置 }); // 导出地图矢量数据 var geojson = new ol.format.GeoJSON(); var features = map.getLayers().getArray().getSource().getFeatures(); var data = geojson.writeFeatures(features); console.log(data); ``` 这些是OpenLayers地图导出的基本方法,你可以根据具体需求进行调整和扩展。如果你有其他关于OpenLayers地图导出的问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值