openlayers4加载Esri和GeoServer的各类服务图层

图层的加载是gis应用中最基本的操作，很多时候在api的使用中，没出问题觉得简单至极，但哪里参数没配置对，就是一道迈不过去的坎。俺在实践中加载geoserver和esri的各类图层，就此记录下，也供学习交流。

ol加载esri服务图层

1、ol加载Esri的mapserver服务

// url为MapServer服务地址var lyr = new ol.layer.Tile({            source:new ol.source.TileArcGISRest({                projection:'EPSG:4326',                url:url            })    });

2、ol加载Esri的wms服务

//url为wms服务地址var lyr = new ol.layer.Tile({            source:new ol.source.TileWMS({                params:{'LAYERS':'0'},                projection:"EPSG:4326",                url:url            })    });

3、ol加载Esri的瓦片服务

//url为mapserver服务地址，z为瓦片级数var lyr = new ol.layer.Tile({        source:new ol.source.XYZ({            url:url + '/tile/{z}/{y}/{x}'        })     });

4、ol加载Esri的wfs服务

加载wfs服务遇到问题就是，url中以EPSG:4326获取数据，ol解析数据的时候会将数据坐标解析为y,x,z的形式从而加载不上，以EPSG:3857获取数据，解析数据坐标字段为x,y,z形式没问题，但底图使用经纬度的话也加载不上，需要投影吧(没验证)

lyr = new ol.layer.Vector({        source:new ol.source.Vector({                strategy:ol.loadingstrategy.bbox,                url:function(extent){                        return 'https://localhost:6443/arcgis/services/highway/mapserver/wfsserver?service=wfs&version=1.1.0&request=getfeature&typename=highway&outputFormat=gml2&EPSG:4326&bbox=' + extent.join(',');                        },                format:new ol.format.WFS({                        gmlFormat:new ol.format.GML2({                        srsName:'EPSG:4326',        featureNS:'http://localhost:6080/arcgis/services/highway/MapServer/WFSServer',                        featureType:'highway'                        })                })            }),                style:new ol.style.Style({...})

ol加载GeoServer服务图层

1、ol加载GeoServer的wms服务

//url为geoserver的wms服务地址lyr = new ol.layer.Tile({            source:new ol.source.TileWMS({                        extent:[112,22,114,24],                        params:{                            'LAYERS':'test:highway',                            'VERSION':'1.1.0',                            'BBOX':[113.029319763184,22.7097873687744,113.95068359375,23.7140617370605],                            'CRS':'EPSG:4326',                            'WIDTH':704,                            'HEIGHT':768                        },                        projection:"EPSG:4326",                        url:url                        })                });

2、ol加载GeoServer的wfs服务(GeoJSON格式)

lyr = new ol.layer.Vector({            source:new ol.source.Vector({                url:function(extent,resolution,projection){                        return 'http://localhost:8089/geoserver/test/ows?service=wfs&version=1.0.0&request=getfeature&typename=test:highway&outputFormat=application/json&bbox=' + extent.join(',');                    },                format:new ol.format.GeoJSON(),                strategy:ol.loadingstrategy.bbox            }),            style:new ol.style.Style({                stroke:new ol.style.Stroke({                    color:'rgba(0,0,255,1.0)',                    width:2                })            })    })

3、ol加载geoserver的WMTS服务

var matrixIds = [],resolutions = [];//maxExtent为发布的图层范围var maxExtent = [109.66140013800003,20.22346267200004,117.3041534420001,25.520298004000036];var maxResolution = ol.extent.getWidth(maxExtent) / 256;//切片级数根据各自情况，此处4个级别的切片，matrixId为每一级的idfor(var i = 0;i <= 3;i++){    matrixIds[i] = 'grid_gdxzqh:'+i;    resolutions[i] = maxResolution / Math.pow(2,i);}lyr = new ol.layer.Tile({    source:new ol.source.WMTS({            url:'http://localhost:8089/geoserver/gwc/service/wmts',            layer:'test:gdxzqh',            tileGrid:new ol.tilegrid.WMTS({                        extent:maxExtent,                        resolutions:resolutions,                        matrixIds:matrixIds            }),            matrixSet:'grid_gdxzqh',            format:'image/png',            projection:'EPSG:4326'    })})

不过这个WMTS叠加之后和底图有偏移，不知为何，同样的数据叠加wms服务却可以叠加的，这个问题待研究，也欢迎看到此文的伙伴们指点出来。
总之，图层加载不上的话，注意两点：
1、图层中的参数；比如加载esri的WFS时候，featureType不带前缀和带的时候，featureNS写法相应的是不一样的
2、geoserver端；projection参数很关键，配这个参数后，通过浏览器调试观察请求的参数，和geoserver直接访问的参数是否一致。