# TMS方式
# 栅格数据切片
<!DOCTYPE html>
<html>
<head>
<title>openLayers使用TMS方式加载栅格切片服务</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<style>
html, body {
overflow: hidden;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var url = "http://192.168.1.253:8181/geoserver/gwc/service/tms/1.0.0/zykj%3Asizhen2@EPSG%3A4326@png/";
// var url="http://weixiuyizhan.wicp.vip:54368/geoserver/gwc/service/tms/1.0.0/zykj%3Asizhen2@EPSG%3A4326@png/";
var resolutions = [];
for (var i = 0; i < 19; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var projection = new ol.proj.get("EPSG:4326");
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({source:new ol.source.OSM(),id:"电子地图",visible:true}),
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: projection,
tileGrid: ol.tilegrid.createXYZ({extent: projection.getExtent()}),
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.png';
}
})
})
],
view: new ol.View({
projection: projection,
center: [119.232926, 31.922242],
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
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
# 矢量数据切片
<!DOCTYPE html>
<html>
<head>
<title>openLayers使用TMS方式加载shp切片服务</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<style>
html,body{
overflow: hidden;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#map{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var url="http://192.168.1.253:8181/geoserver/gwc/service/tms/1.0.0/zykj%3Achina@EPSG%3A4326@png/";
// var url="http://weixiuyizhan.wicp.vip:54368/geoserver/gwc/service/tms/1.0.0/zykj%3Achina@EPSG%3A4326@png/";
var resolutions = [];
for (var i = 0; i < 19; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var projection=new ol.proj.get("EPSG:4326");
var map = new ol.Map({
target: 'map',
layers: [
// new ol.layer.Tile({source:new ol.source.OSM(),id:"电子地图",visible:true}),
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: projection,
tileGrid: ol.tilegrid.createXYZ({extent: projection.getExtent()}),
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
return url+(tileCoord[0]-1)+ '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.png';
}
})
})
],
view: new ol.View({
projection: projection,
center:[119.232926,31.922242],
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
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