# OpenLayers加载GeoServer发布的WMS图层
# 矢量服务
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.js" type="text/javascript"></script>
<title>openLayers使用WMS方式加载shp服务</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
</div>
<script type="text/javascript">
var format = 'image/png';
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://192.168.1.253:8181/geoserver/zykj/wms',
params: {
'FORMAT': format,
'VERSION': '1.1.1',
"LAYERS": 'zykj:china',
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});
var tiled = new ol.layer.Tile({
visible: false,
source: new ol.source.TileWMS({
url: 'http://192.168.1.253:8181/geoserver/zykj/wms',
params: {
'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
"LAYERS": 'zykj:china',
"exceptions": 'application/vnd.ogc.se_inimage',
tilesOrigin: 109.62469100000001 + "," + 20.061807999999967
}
})
});
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu',
global: true
});
var map = new ol.Map({
target: 'map',
layers: [
untiled,
tiled
],
view: new ol.View({
projection: projection,
center: [109.62469, 30.06180],
zoom: 5
})
});
</script>
</body>
</html>
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
# 栅格服务
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.js"></script>
<title>openLayers使用WMS方式加载栅格服务</title>
<style>
html,body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
</div>
<script type="text/javascript">
var format = 'image/png';
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://192.168.1.253:8181/geoserver/zykj/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
"LAYERS": 'zykj:sizhen2',
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});
var tiled = new ol.layer.Tile({
visible: false,
source: new ol.source.TileWMS({
url: 'http://192.168.1.253:8181/geoserver/zykj/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
"LAYERS": 'zykj:sizhen2',
"exceptions": 'application/vnd.ogc.se_inimage',
tilesOrigin: 40424987.811917014 + "," + 3501805.439903641
}
})
});
var projection = new ol.proj.Projection({
code: 'EPSG:4528',
units: 'm',
axisOrientation: 'neu',
global: false
});
var map = new ol.Map({
target: 'map',
layers: [
untiled,
tiled
],
view: new ol.View({
projection: projection,
center:[40424917.48536, 3525223.30211],
zoom:10
})
});
</script>
</body>
</html>
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71