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结果

OpenLayers3 学习心得(六)——WMS服务_第1张图片





你可能感兴趣的:(Openlayers)