首页/GIS/列表

OpenLayers3 学习心得(六)——WMS服务

来源:  2018-04-19 08:59:56    评论:0点击:

最近,有同学问如何加载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整体



注意上面标红部分就是wms图层名字


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




来源:https://blog.csdn.net/xiaohou66/article/details/41481635

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权