一、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 //自定义当前视图的缩放等级
});
最终显示如下: