Openlayers学习之调用Geoserver发布的地图服务(一)c17854254215的博客-openlayers 3587

一、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文件,在https://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: 'https://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至GeoserverwebappsgeoserverWEB-INFlib下。

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

打开GeoserverwebappsgeoserverWEB-INFweb.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   //自定义当前视图的缩放等级 }); 

最终显示如下：