概述：
本文讲述Openlayers4中地图的导出，包括调用天地图切片跨域、Geoserver11 WMS跨域等。
效果：
导出图片
页面展示
实现代码：
document.getElementById('export_map').addEventListener('click',function() {map.once('postcompose',function(event) {varcanvas= event.context.canvas;if(navigator.msSaveBlob) {navigator.msSaveBlob(canvas.msToBlob(),'map.png'); }else{canvas.toBlob(function(blob) { saveAs(blob,'map.png'); }); } });map.renderSync();});
注意：
1、此处引用了一个FileSaver.js文件，文件地址为：https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js
跨域处理;
1、天地图切片跨域
在代码中添加crossOrigin: 'anonymous'即可，完整代码如下：
functiongetTdtLayer(lyr){varurl="http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";varlayer=newol.layer.Tile({source:newol.source.XYZ({crossOrigin:'anonymous',url:url}) });returnlayer;}
2、wms跨域
wms的跨域需从Geoserver服务器端解决，具体解决方法如下：
1）从http://central.maven.org/maven2/org/eclipse/jetty/jetty-servlets/下载对应的jar，比如geoserver2.9依赖的jetty版本号是9.2.13.v20150730，那么就下载该版本的jar。
2）将下载好的jetty-servlets-9.2.13.v20150730.jar放到webapps/geoserver下的lib中。
3） 配置下webapps/geoserver/web.xml。
cross-origin
org.eclipse.jetty.servlets.CrossOriginFilter
cross-origin
/*
4）重启geoserver即可。
同样，代码中加入crossOrigin: 'anonymous'即可，代码如下：
varboundry=newol.layer.Image({source:newol.source.ImageWMS({crossOrigin:'anonymous',url:'http://localhost:8080/geoserver/lzugis/wms',params: {'FORMAT':'image/png','VERSION':'1.1.1',STYLES:'',LAYERS:'lzugis:boundry', } }) });
-----------------------------------------------------------------------------------------------
技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
博客园：http://www.cnblogs.com/lzugis/
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式
q q:1004740957
e-mail:[email protected]
公众号:lzugis15
Q Q 群:452117357(webgis)
337469080(Android)
阅读原文