开源GIS（十六）——openlayers地图打印

目录

 

一、引言

二、地图打印实现

三、服务端跨域设置

四、总结

---

一、引言

 

        系统地图打印是比较常用的功能，因为经常会把当前的视图作为图片保存，用于方便自己或者他人查看当前地图的情况，截图效果不是很好，直接使用openlayers官网例子。

 

 

二、地图打印实现

 

        上代码，主要核心代码是在最后点击事件中

    
    
    
    
    
    
    
    
    


123

    

        打印
    

        1、注意这里保存图片使用了saveAs函数，引用了外部的js文件

        2、在source中要添加crossOrigin，客户端跨域设置

    var tilePolyline = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:polyline'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            },
            crossOrigin: 'anonymous'
        })
    });

        不添加的话会出现下面的错误

 

 

三、服务端跨域设置

 

        当我们使用自己geoserver发布的wms服务的时候，使用上面的方法仍然没有成功保存地图，这是因为我们的服务端没有设置cors，如果想解决这个问题必须在服务端设置cors，可以考虑在geoserver中的web.xml中或者tomcat中的web.xml中配置添加如下：

CorsFilter
org.apache.catalina.filters.CorsFilter


CorsFilter
/*

        这样的话就可以从根本上解决跨域问题了。

 

 

四、总结

 

• 地图打印实现；

 

• 服务端跨域设置，客户端跨域设置；