openlayers加载geoserver的wms服务

情景应用

本次使用openlayers加载geoserver的目的是在geoserver上发布公司项目的街道背景图作为底图，配合postgis发布离线地图（自定义的地图）。

geoserver使用教程

安装解压

先到官方上下载geoserver的压缩包

我使用的是–version = 2.18-SNAPSHOT

本地解压后，确认两件事

1.安装jdk环境

2.安装tomcat环境，geoserver的启动是基于tomcat服务器启动的。

windows下启动执行：D:\geoserver\bin下的startup.bat

linux下启动执行：D:\geoserver\bin下的startup.sh

启动后在页面输入：http://localhost:8080/geoserver/web/

在这里插入图片描述

初始登陆的账号密码：

username:admin

password:geoserver

发布服务

发布单图层

添加工作区间
在这里插入图片描述

在这里插入图片描述

再次进入到工作区

在这里插入图片描述

添加数据存储

更多介绍查看: https://blog.csdn.net/gis0911178/article/details/88636466

在这里插入图片描述

GIS概念中有相当多的数据文件格式，我们经常接触到的数据格式可以大致分为“栅格数据”与“矢量数据”这两类。

这两类数据分别对应着不同的应用场景，我们通常使用“栅格数据”来当作底图，示意地理构造物（如山地、河流、湖泊、建筑物、道路等）的空间形态（如形状、位置、大小等），并可以进行一些简易的空间分析；

使用“矢量数据”来参与业务逻辑的实现与分析，进行复杂的空间分析。

在这里插入图片描述

本次以矢量数据为例：发布shapefiles单个图层

在这里插入图片描述

就此发布完成。

发布多图层

发布多图层的话首先发布多个单图层，对于：创建工作区–添加数据存储–发布，这些跟前面是一样的。

然后，点击多图层

在这里插入图片描述

然后就可以在Layer Preview里预览了

在这里插入图片描述

openlayers使用教程

openlayers加载WMS格式总的来说有两种方式：ol.layer.Image+ol.source.ImageWMS和ol.layer.Tile+ol.source+TileWMS

这两种方式加载都需要设定bounds（bbox）和projection。具体的写法下面开始介绍。

如果需要在angular中使用openlayers,请查看我的angular文档。

openlayers下载

下载地址

https://github.com/openlayers/workshop/releases

在这里插入图片描述

启动

下载之后，切换到工程里…\openlayers-workshop-en内部执行

npm start;// 启动服务

添加页面

在index.html里编写代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers</title>
<style>
html, body{
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
#map-container{
height: 506px;
width: 768px;
border: 1px solid;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>

添加js代码块

安装模块

在工程里安装ol模块：npm install ol@beta

导入相关包

1
2
3
4
5
6

import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
import Projection from 'ol/proj/Projection';
import XYZSource from 'ol/source/XYZ';
import Layer from 'ol/layer/Layer';
import Tile from 'ol/layer/Tile';

加载XYZSource

在main.js里添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// openlayers官方教程
new Map({
target: 'map-container',
layers: [
new TileLayer({
source: new XYZSource({
url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});

运行查看页面

在这里插入图片描述

加载ImageWMS之WorldImage

这里使用的是geoserver上发布存储类型为WorldImage，样式为raster

在main.js里添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 调用geoserver的服务http://localhost:8080/geoserver/nurc/wms
// openlayers官方教程-图
// WorldImage
// success
new Map({
target: 'map-container',
layers: [
new Image({
source: new ImageWMS({
url: 'http://localhost:8080/geoserver/nurc/wms',
params: {
'layers': 'nurc:Img_Sample'
}
})
})
],
view: new View({
center: [0, 0],
zoom: 3,
projection: 'EPSG:4326'
})
});

运行查看页面

在这里插入图片描述

加载ImageWMS之ArcGrid

这里使用的是geoserver上发布存储类型为ArcGrid，样式为rain

在main.js里添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 调用geoserver的服务http://localhost:8080/geoserver/nurc/wms
// openlayers官方教程-图
// ArcGrid
// success
new Map({
target: 'map-container',
layers: [
new Image({
source: new ImageWMS({
url: 'http://localhost:8080/geoserver/nurc/wms',
params: {
'layers': 'nurc:Arc_Sample'
}
})
})
],
view: new View({
center: [0, 0],
zoom: 3,
projection: 'EPSG:4326'
})
});

加载ImageWMS之GeoTIFF

这里使用的是geoserver上发布存储类型为GeoTIFF，样式为rain

在main.js里添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// // 加载geotiff格式
const bounds = [589980, 4913700,
609000, 4928010];
const projection = new Projection({
code: 'EPSG:26713',
units: 'm',
axisOrientation: 'neu',
global: false
});
const map = new Map({
target: 'map-container',
layers: [
new Image({
source: new ImageWMS({
url: 'http://localhost:8080/geoserver/sf/wms',
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'sf:sfdem'
}
})
})
],
view: new View({
projection: projection
})
});
map.getView().fit(bounds, map.getSize());

运行查看页面

在这里插入图片描述

加载ImageWMS之shapefiles1

这里使用的是geoserver上发布存储类型为Directory of spatial files (shapefiles),样式为line（线）

在main.js里添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//调用geoserver的服务http://localhost:8080/geoserver/sf/wms
//openlayers官方教程-线
//Shapefile
//success
const bounds = [589434.8564686741, 4914006.337837095,
609527.2102150217, 4928063.398014731];
const projection = new Projection({
code: 'EPSG:26713',
units: 'm',
axisOrientation: 'neu',
global: false
});
const map = new Map({
target: 'map-container',
layers: [
new Image({
source: new ImageWMS({
url: 'http://localhost:8080/geoserver/sf/wms',
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'sf:roads'
}
})
})
],
view: new View({
projection: projection
})
});
map.getView().fit(bounds, map.getSize())

运行查看页面

在这里插入图片描述

加载ImageWMS之shapefiles2

这里使用的是geoserver上发布存储类型为Directory of spatial files (shapefiles),样式为line（线）

在main.js里添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

//tiger:tiger_roads
//调用geoserver的服务http:http://localhost:8080/geoserver/tiger/wms
//openlayers官方教程-线
//Shapefile
//success
const bounds = [-74.02722, 40.684221,
-73.907005, 40.878178];
const projection = new Projection({
code: 'EPSG:4326',
units: 'm',
axisOrientation: 'neu',
global: false
});
const map = new Map({
target: 'map-container',
layers: [
new Image({
source: new ImageWMS({
url: 'http://localhost:8080/geoserver/tiger/wms',
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'tiger:tiger_roads'
}
})
})
],
view: new View({
projection: projection
})
});
map.getView().fit(bounds, map.getSize());

运行查看页面

在这里插入图片描述

加载TileWMS之shapefiles1

这里使用的是geoserver上发布存储类型为Directory of spatial files (shapefiles),样式为poi（点）

在main.js里添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

//调用geoserver的服务http://localhost:8080/geoserver/tiger/wms
//openlayers官方教程-点
//Shapefile
//succcess
const bounds = [-74.0118315772888, 40.70754683896324,
-74.00153046439813, 40.719885123828675];
const projection = new Projection({
code: 'EPSG:4326',
units: 'degrees'
});
const map = new Map({
target: 'map-container',
layers: [
new Tile({
source: new TileWMS({
url: 'http://localhost:8080/geoserver/tiger/wms',
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'tiger:poi'
}
})
})
],
view: new View({
projection: projection
})
});
map.getView().fit(bounds, map.getSize())

运行查看页面

在这里插入图片描述

加载TileWMS之shapefiles2

这里使用的是geoserver上发布存储类型为Directory of spatial files (shapefiles),样式为line（线）

在main.js里添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//调用geoserver的服务http://localhost:8080/geoserver/tiger/wms
//openlayers官方教程-点
//Shapefile
//succcess
const bounds = [-74.047185, 40.679648,
-73.90782, 40.882078];
const projection = new Projection({
code: 'EPSG:4326',
units: 'degrees'
});
const upmap = new Tile({
source: new TileWMS({
url: 'http://localhost:8080/geoserver/tiger/wms',
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'tiger:tiger_roads'
}
})
})
const map = new Map({
target: 'map-container',
layers: [
upmap
],
view: new View({
projection: projection
})
});
map.getView().fit(bounds, map.getSize())

运行查看页面

在这里插入图片描述

加载叠加图层

这里使用的是geoserver上发布存储类型为Directory of spatial files (shapefiles)，样式由line和raster组合

在main.js里添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//调用geoserver的服务http://localhost:8080/geoserver/tiger/wms
//openlayers官方教程-点
//Shapefile
//succcess
const bounds = [-74.047185, 40.679648,
-73.90782, 40.882078];
const projection = new Projection({
code: 'EPSG:4326',
units: 'degrees'
});
const lowmap = new Tile({
source: new TileWMS({
url: 'http://localhost:8080/geoserver/tiger/wms',
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'tiger:poly_landmarks'
}
})
})
const upmap = new Tile({
source: new TileWMS({
url: 'http://localhost:8080/geoserver/tiger/wms',
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'tiger:tiger_roads'
}
})
})
const map = new Map({
target: 'map-container',
layers: [
lowmap, upmap
],
view: new View({
projection: projection
})
});
map.getView().fit(bounds, map.getSize())

运行查看页面

在这里插入图片描述

区别ImageWMS和TileWMS

本次结果主要是展示叠加图层，先说这两个叠加后的效果：
- 两个图层都使用TileWMS叠加后，对于shapefiles的line和raster组合，会随着放缩完美的融合在一块，并对应各自的点。（是我要的结果）。
- 两个图层都使用ImageWMS叠加图层后，对于shapefiles的line和raster组合，只能先缩小不能放大，不能查看具体街道。

在这里插入图片描述

一个使用ImageWMS，一个使用TileWMS，对于shapefiles的line和raster组合，只能先缩小不能放大，不能查看具体街道。

在这里插入图片描述

上菜-大众观点

（1）切片方式（TileWMS）：动态地图在GIS Server生成后，以切片的方式返回到前端，优点是将地图切分，每个切片的数据量很小，便于数据的传输，适用于网络状况不佳的环境；缺点是在地图切片的过程中，可能会造成我遇到的标注多次出现的问题。

（2）图像方式（ImageWMS）：地图生成后，直接以一个整体返回到前端显示，优点是不会出现标注重复出现的问题，确定是对网络状况不佳的环境，可能出现请求失败的问题。

总结

使用总结

关于WMS有两种加载方式

方式一、ol.layer.Image+ol.source.ImageWMS

方式二、ol.layer.Tile+ol.source+TileWMS

通用的模式都是：至于使用ImageWMS，还是TileWMS，对应换掉layer和source就行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

叠加图层的时候，可以不同类型，不同样式，也可以ImageWMS和TileWMS混合使用，但是具体能不能实现效果，得尝试了才能知道符合自己的要求不。

尝试了以上类型，目前发现只有XYZSource，ArcGrid和WorldImage可以不设置边界bbox，其他的都要设置才行，否则就会提示下面的2，3两个问题。
对于上面的ImageWMS写了两个，shapefile1和shapefile2，是因为这两个类型一样，样式一样，坐标系不一样导致一个图可以正常缩放，一个不行，缩放异常，因此在选择坐标系的时候，需要根据具体情况来定。
项目地址：

暂时还没弄好自己的git管理，后面补上。