OpenLayers3 学习心得（六）——WMS服务

最近，有同学问如何加载geoserver发布的wms服务，不知道如何设置zoom和extent，首先讲解下这两个属性的含义：

zoom：将地图缩放到某一级别，个人理解为level；

extent：图层渲染的范围，超过这个范围图层将不可见（这个是layer中的属性，其他请参考相应版本的api）；

下面进入正题，如何加载wms服务。由于ol3默认的坐标系为EPSG:3875以及EPSG:2836对应前面一种的转换，所以分两种情况举例

1.坐标系为EPSG:3875

注意发布服务的时候要将坐标系设置为编码为3875的坐标系，这样在ol.View中直接设置显示的中心点和zoom级别就可以了。

function init(){
            var extent=[968000,200000,990000,225000];//图层显示的最大范围，超过这个范围后不显示
            var layers=[
                    new ol.layer.Tile({
                        extent:extent,
                        source:new ol.source.TileWMS({
                            url:'http://localhost:8080/geoserver/houwork/wms',
                            params:{
                                'LAYERS':'houwork:nyc_roads',
                                'TILED':true
                            },
                            serverType:'geoserver'
                        })
                    })
            ];
            var map=new ol.Map({

                layers:layers,
                target:'map',
                view:new ol.View({
                    //projection:projection,
                    center:[988000,214000],
                    //extent:extent,
                    zoom:12

                })
            });
        }

2.其他坐标系

若加载其他坐标系的服务，要替换view的默认投影，这里我们加载一个EPSG:26713的服务

2.1新建投影

                    projection:new ol.proj.Projection({
                        code:'EPSG:26713',
                        units:ol.proj.Units.METERS
                    })

2.2 创建新的视图

view:new ol.View({
                    projection:new ol.proj.Projection({
                        code:'EPSG:26713',
                        units:ol.proj.Units.METERS

                    }),
                    center:[599167,4921980],
                    zoom:12

                })

2.3整体

function init2(){
            var layers=[
                new ol.layer.Tile({
                    source:new ol.source.TileWMS({
                        url:'http://localhost:8080/geoserver/sf/wms',
                        params:{
                            'LAYERS':'sf:roads',
                            'TILED':true
                        },
                        serverType:'geoserver'
                    })
                })
            ];
            var map=new ol.Map({

                layers:layers,
                target:'map',
                view:new ol.View({
                    projection:new ol.proj.Projection({
                        code:'EPSG:26713',
                        units:ol.proj.Units.METERS

                    }),
                    center:[599167,4921980],
                    //extent:extent,
                    zoom:12

                })
            });
        }

2.4结果