首页/GIS/列表

openlayers3配置geoserver(WMS),获取已渲染ImageWMS底图详解

来源:  2018-04-19 09:03:34    评论:0点击:

最近,原项目中的openlayers2进行框架升级为openlayers3,因为openlayers3相当于进行了完全重构,导致项目升级遇到了一些问题。而网上大部分资料,对extent,center等参数讲解不详细,这里主要讲一下,在通过openlayers3获取geoserver服务器(WMS)中image底图时,具体步骤和需要注意的一些细节。

一、首先,geoserver(版本2.5.5)地图发布。基本步骤不讲,主要两点:

<1>增加数据源我选择的底图类型为WorldImage;

<2>图层发布SRS设置为EPSG:4326;

<3>图层图片为含有坐标数据的png

配置好geoserver,地图发布成功。


二、openlayers3中主要参数详解

新建一个ol.map类,var map=new ol.map(options);而构造函数的参数options中与openlayer2区别很大。

options中的主要三个参数:

<1>target:存放地图的div,值为div的id

<2>layers:图层数组,按数组顺序加载各图层。从geoserver获取wms图层主要是在这里面配置

<3>view:图层展示,确定缩放级别zoom,展示中心点center等,而center的值,通过ol中的方法将地图坐标值进行转换获得。

                  代码示例:( 代码根据官方demo进行修改而成,地图为geoserver2.5.5中的示例地图,安装后已自动发布):
 
    <!DOCTYPE html>  
    <html>  
      <head>  
        <title>Single Image WMS</title>  
        <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">  
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->  
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>  
        <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>  
      </head>  
      <body>  
        <div id="map" class="map"></div>  
        <script>  
          
          var extent=[-130.85168,20.7052,-62.0054,54.1141];//BBOX范围值  
            
          var projection=new ol.proj.Projection({//地图投影类型  
              code:'EPSG:4326',  
              units:'degrees',  
              extent:extent  
          });  
            
          var layers = [  
              
            new ol.layer.Image({  
              //extent:extent, //可注释  
               
          source: new ol.source.ImageWMS({  
            url: 'http://localhost:8000/geoserver/wms',  
                params: {'LAYERS': 'nurc:Img_Sample','VERSION':'1.1.0'},  
                serverType: 'geoserver'  
              })  
            })  
          ];  
            
            
            
          var map = new ol.Map({  
            layers: layers,  
            target: 'map',  
              
        view: new ol.View({  
            projection:projection,  
                center:ol.extent.getCenter(extent), //<1>设置固定中心点  
                zoom: 2  
            })  
          });  
            
          //map.getView().setCenter(ol.extent.getCenter(extent));    // <2>动态设置中心点  
        </script>  
      </body>  
    </html>  




三、特别注意

1.其中extent(ol2中的bounds)就是坐标范围值和geoserver地图图层发布中bbox(Bounding Box)的值对应一致。

2.最重要的是:view投影中心点center的设置,有两种方法

 <1>直接在view中设置 (见代码中的<1>方法)

<2>动态设置 (见代码中的<2>方法)


来源: https://blog.csdn.net/u010786902/article/details/53207399
为您推荐

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