最近，原项目中的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>方法）