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

最近,原项目中的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

You may also like...