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',
                 }
             })
         });