openlayer3 系列 3 - 加载 geoserver 图层

1.加载geoserver wms服务

//url为geoserver的wms服务地址
lyr = new ol.layer.Tile({
            source:new ol.source.TileWMS({
                        extent:[112,22,114,24],
                        params:{
                            'LAYERS':'test:a_river',
                            '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.加载geoserver wfs服务

lyr = new ol.layer.Vector({
            source:new ol.source.Vector({
                url:function(extent,resolution,projection){
                        return 'http://localhost:8088/geoserver/test/ows?service=wfs&version=1.0.0&request=getfeature&typename=test:a_river&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.加载gerserver wmts服务

var matrixIds = [],resolutions = [];
//maxExtent为发布的图层范围
var maxExtent = [109.66140013800003,20.22346267200004,117.3041534420001,25.520298004000036];

var maxResolution = ol.extent.getWidth(maxExtent) / 256;
//切片级数根据各自情况，此处4个级别的切片，matrixId为每一级的id
for(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:imagermap',
            tileGrid:new ol.tilegrid.WMTS({
                        extent:maxExtent,
                        resolutions:resolutions,
                        matrixIds:matrixIds
            }),
            matrixSet:'grid_imagemap',
            format:'image/png',
            projection:'EPSG:4326'
    })
})

将不定期更新资源，欢迎持续关注

---

想获得更多的学习知识请关注微信公众号：西北码农或扫下方二维码