Openlayers4中地图的导出

来源：互联网发布：matlab mac 2015b官方编辑：程序博客网时间：2024/05/17 21:05

概述：

本文讲述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',                 }             })         });