开源GIS(十六)——openlayers地图打印

目录

 

一、引言

二、地图打印实现

三、服务端跨域设置

四、总结


一、引言

 

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

 

 

二、地图打印实现

 

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




    
    Title
    
    
    
    
    
    
    



        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
/*

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

 

 

四、总结

 

  • 地图打印实现;

 

  • 服务端跨域设置,客户端跨域设置;

 

 

 

你可能感兴趣的:(GIS,OpenLayers)