Openlayers4中地图的导出

概述：

本文讲述Openlayers4中地图的导出，包括调用天地图切片跨域、Geoserver11 WMS跨域等。

效果：

导出图片

页面展示

实现代码：

document.getElementById('export_map').addEventListener('click', function() { map.once('postcompose', function (event) { var canvas = 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'即可，完整代码如下：

function getTdtLayer(lyr){ var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}"; var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ crossOrigin: 'anonymous', url:url }) }); return layer; }

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。 <filter>        <filter-name>cross-origin</filter-name>        <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>    </filter>    <filter-mapping>        <filter-name>cross-origin</filter-name>        <url-pattern>/*</url-pattern>    </filter-mapping> 4）重启geoserver即可。 同样，代码中加入crossOrigin: 'anonymous'即可，代码如下：

var boundry = new ol.layer.Image({ source: new ol.source.ImageWMS({ crossOrigin: 'anonymous', url: 'http://localhost:8080/geoserver/lzugis/wms', params: {'FORMAT': 'image/png', 'VERSION': '1.1.1', STYLES: '', LAYERS: 'lzugis:boundry', } }) });

-----------------------------------------------------------------------------------------------

技术博客

：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:niujp08@qq.com

公众号:lzugis15

Q Q 群:452117357(webgis)

             337469080(Android)

LZU-GIS 认证博客专家 牛老师 lzugis webgis 12年毕业于兰州大学地理信息系统专业。毕业至今，一直在从事着GIS开发相关的工作，精通GIS与webgis原理，精通openlayers、leaflet、mapbox等webgis框架，精通PostGIS、OracleSpatial等空间数据库，熟练掌握html、css、js等前端技术。