Openlayers3 加载 GeoServer WFS的实现

最近在学习GeoServer，今天尝试了用Openlayer 3加载WFS服务，总体上还算顺利，下面以一个完整的示例来进行说明。

var map=new ol.Map({
              target:'map',    
              view:new ol.View({    
                  projection: 'EPSG:4326', 
                  center:[102.73333,25.05],      
                  zoom:7 
              }) 
          }); 

     var wfsParams = {    
            service : 'WFS',    
            version : '1.0.0',    
            request : 'GetFeature',    
            typeName : 'postgis:yunnan,postgis:procity,postgis:loccity',  //图层名称，可以是单个或多个     
            outputFormat : 'text/javascript',  //重点，不要改变  
            format_options : 'callback:loadFeatures'  //回调函数声明  
        };    
      
     var vectorSource = new ol.source.Vector({    
         format: new ol.format.GeoJSON(),    
         loader: function(extent, resolution, projection) {  //加载函数  
             var url = 'http://localhost:8089/geoserver/wfs';    
             $.ajax({    
                 url: url,    
                 data : $.param(wfsParams),   //传参  
                 type : 'GET',    
                 dataType: 'jsonp',   //解决跨域的关键  
                 jsonpCallback:'loadFeatures'  //回调  
                     
             });    
         },    
         strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({    
             maxZoom: 20 
         })),    
         projection: 'EPSG:4326'    
     });    
      //回调函数使用  
     window.loadFeatures = function(response) {    
         vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response));  //载入要素  
             
     };    
     var vectorLayer = new ol.layer.Vector({    
         source: vectorSource  
     });    
     map.addLayer(vectorLayer); 

重点说明上述参数中的typeName，可以是单个图层，或者是图层组，这样可以一次加载多个图层达到地图叠加的效果。

转载自：https://blog.csdn.net/shaxiaozilove/article/details/60615714