Openlayers学习之调用Geoserver发布的地图服务(一)

一、openlayers引用

首先引用js文件，在官网下载类库的压缩包，解压缩在项目目录下。在html文件中引用。

 <link rel="stylesheet" href="../plugins/openlayers4/css/ol.css" type="text/css">
    <script src="../plugins/openlayers4/build/ol.js"></script>

二、创建地图容器

创建dom对象作为地图容器，以承载地图。

<div id="map" class="map">
var viewMap = new ol.View({
    projection: projection,					//地图的投影
});
var map = new ol.Map({
    layers: layers,			//要加载的图层
    target: 'map',			//绑定dom对象
    controls: new ol.control.defaults({
        attribution: false              //去掉右下角Logo
    }),
    view: viewMap					
});

三、加载Geoserver发布的地图服务

在这里使用的地图是EPSG:4528投影，由于openlayers默认支持的投影只有4326和3587，除此之外的投影都需要我们自己定义，这里有两种定义方法：
1、引用proj4.js文件,在http://epsg.io搜索我们需要的地图投影（地图投影可在geoserver中查看），将定义复制在proj4.defs中。

proj4.defs("EPSG:4528", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");        //必须引用proj4
var projection = ol.proj.get("EPSG:4528");

2、不需要引用proj4.js，直接定义（在geoserver预览地图的页面查看源码看到的投影定义方法）

//不需要再引用proj4
var projection = new ol.proj.Projection({
    code: 'EPSG:4528',
    units: 'm',
    axisOrientation: 'neu',
    global: false
});

定义好投影之后，定义要加载的图层，由于调用geoserver的地图需要跨域，所以我们要定义跨域声明。

var format = 'image/png';
var bounds = [40454494.66562566, 3936507.0527703143,
    40530793.66562566, 4002807.0527703143];
var layers = [
    new ol.layer.Image({
        source: new ol.source.ImageWMS({
            ratio: 1,
            url: 'http://localhost:8081/geoserver/test/wms',
            crossOrigin: 'anonymous',           //跨域声明
            params: {
                'FORMAT': format,
                'VERSION': '1.1.1',             //很重要！！！！！！
                "exceptions": 'application/vnd.ogc.se_inimage',
                "LAYERS": 'test:3702110101'
            }
        })
    })
];

四、Geoserver跨域

经过前面的步骤，我们发现仍然存在跨域问题，这是因为我们的geoserver没有设置允许跨域访问，下面我们配置geoserver跨域。首先查看geoserver目录下的lib包下的jetty-serverlets版本，将其copy至Geoserver\webapps\geoserver\WEB-INF\lib下。

下载对应版本的jetty-http和jetty-util包，放至同一路径。下载地址：http://central.maven.org/maven2/org/eclipse/jetty/jetty-servlets/

打开Geoserver\webapps\geoserver\WEB-INF\web.xml文件，搜索cross-origin，找到其所在位置，将相应的跨域设置代码解开注释，同时添加一段设置。

 <!-- Uncomment following filter to enable CORS -->
   <filter>
        <filter-name>cross-origin</filter-name>
        <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
       <init-param>
           <param-name>chainPreflight</param-name>
           <param-value>false</param-value>
       </init-param>
       <init-param>
           <param-name>allowedOrigins</param-name>
           <param-value>*</param-value>
       </init-param>
       <init-param>
           <param-name>allowedMethods</param-name>
           <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
       </init-param>
       <init-param>
           <param-name>allowedHeaders</param-name>
           <param-value>*</param-value>
       </init-param>
    </filter>
   
//需要手动添加的
	<filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

保存之后，重启geoserver。这样就解决了跨域问题。

五、View设置

设置一下地图中心点和缩放等级。

var viewMap = new ol.View({
    projection: projection,
    center: [40492644.16562566, 3969657.0527703143],			//自定义地图显示时的中心点
    zoom: 15			//自定义当前视图的缩放等级
});

最终显示如下：