【GIS交互:打印地图】openlayers加载geoserver的wfs地图服务并打印地图

已被阅读 1493 次 | 文章分类:OpenLayers | 2021-10-31 17:50

openlayers加载geoserver的wfs地图服务并实现打印地图;实现对底图以及地图上所有元素的打印操作;

1 注意事项

有两点需要注意:

第一 加载wfs地图服务,重点是wfs请求参数的设置,如下:

                                        
//参数字段  
    var wfsParams = {    
        service : 'WFS',    
        version : '1.0.0',    
        request : 'GetFeature',    
        typeName : 'HTYgc:bou1_4p',      
        outputFormat : 'text/javascript', 
        format_options : 'callback:loadFeatures'  //回调函数声明  
    };
                                        
                                    

第二打印地图关键在于服务端和前端要同时设置跨域配置;因为截图的本质是操作canvas,所以会出发跨域策略;服务器端打开geoserver的跨域配置,可自行查询;前端配置jsonp方式配置跨域

                                        
//使用jsonp,可以解决跨域的问题,GeoServer中的web.xml文件关于jsonp的注释要去掉,就可以支持跨域了
     var vectorSource = new ol.source.Vector({    
         format: new ol.format.GeoJSON(),    
         loader: function(extent, resolution, projection) {  //加载函数  
             var url = 'http://localhost:8081/geoserver/wfs';    
             $.ajax({    
                 url: url,    
                 data : $.param(wfsParams),     //传参  
                 type : 'GET',    
                 dataType: 'jsonp',            //解决跨域的关键  
                 jsonpCallback:'loadFeatures'  //回调  

             });    
         },    
         strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({    
             maxZoom: 25    
         })),    
         projection: 'EPSG:4326'    
     });
                                        
                                    

2 打印地图

通过postcompose事件,获取openlayers地图的canvas,然后将canvas转换为图片下载即可;

                                        
// 打印地图
    document.getElementById('export-png').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();
    });
                                        
                                    

canvas转换图片这里引用直接调用saveAs(blob, 'map.png')方法即可,其实也可以通过canvas.toDataURL("image/png")实现

3 全部代码

全部代码可直接运行

                                        
<!DOCTYPE html>
<html>

<head>
    <title>openlayers加载geoserver的wfs地图服务并打印地图</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <script
        src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
    <script src="ol.js"></script>
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
    <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> 打印当前地图</a>
    <div id="map" class="map"></div>
    <script>
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });
    //参数字段  
    var wfsParams = {    
        service : 'WFS',    
        version : '1.0.0',    
        request : 'GetFeature',    
        typeName : 'HTYgc:bou1_4p',      
        outputFormat : 'text/javascript', 
        format_options : 'callback:loadFeatures'  //回调函数声明  
    };    

     //使用jsonp,可以解决跨域的问题,GeoServer中的web.xml文件关于jsonp的注释要去掉,就可以支持跨域了
     var vectorSource = new ol.source.Vector({    
         format: new ol.format.GeoJSON(),    
         loader: function(extent, resolution, projection) {  //加载函数  
             var url = 'http://localhost:8081/geoserver/wfs';    
             $.ajax({    
                 url: url,    
                 data : $.param(wfsParams),     //传参  
                 type : 'GET',    
                 dataType: 'jsonp',            //解决跨域的关键  
                 jsonpCallback:'loadFeatures'  //回调  

             });    
         },    
         strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({    
             maxZoom: 25    
         })),    
         projection: 'EPSG:4326'    
     });    
    //回调函数使用  
    window.loadFeatures = function(response) {   
         //坐标转换,将返回的数据的坐标转换到当前使用地图的坐标系,否则,无法正常显示
         vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response,{
             dataProjection: 'EPSG:4326',     // 设定JSON数据使用的坐标系
            // featureProjection: 'EPSG:3857' // 设定当前地图使用的feature的坐标系
         }));  //载入要素  

     };    
     var vectorLayer = new ol.layer.Vector({    
         source: vectorSource  
     });    
     map.addLayer(vectorLayer);         

    document.getElementById('export-png').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();
    });
    </script>
</body>
</html>
                                        
                                    

QQ:3410192267 | 技术支持 微信:popstarqqsmall

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号