Skip to content

Commit e7ed3e9

Browse files
ParnDeedlitParnDeedlit
committed
增加中国2000经纬度坐标系的栅格瓦片&矢量瓦片示例
1 parent c7aa2f0 commit e7ed3e9

12 files changed

Lines changed: 441 additions & 0 deletions

‎demo/mapbox/example/crs/4326_raster_img.htm‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>导航栏控件</title>
7+
<script exclude="mapboxgl" include="crs" src="../../libs/zondyclient/include-mapboxgl-local.js"></script>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
#map {
15+
position: absolute;
16+
top: 0;
17+
bottom: 0;
18+
width: 100%;
19+
}
20+
21+
.navigation-box {
22+
height: 25px;
23+
width: 25px;
24+
position: absolute;
25+
top: 10px;
26+
right: 5px;
27+
background-color: rgba(255, 255, 255, 1);
28+
padding: 5px;
29+
border-radius: 5px;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
<div id="map"></div>
36+
<script>
37+
//一定要去mapbox注册一个key,这个key会失效的
38+
mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
39+
var tiandituKey = "f5347cab4b28410a6e8ba5143e3d5a35";
40+
var img_c_source = {
41+
//来源类型为栅格瓦片
42+
"type": "raster",
43+
'tiles': [
44+
//来源请求地址，请求天地图提供的全球影像图WMTS服务
45+
"http://t3.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles"
46+
+ "&TILECOL=" + '{x}' + "&TILEROW=" + '{y}' + "&TILEMATRIX=" + '{z}'
47+
+ "&tk=" + tiandituKey
48+
],
49+
//栅格瓦片的分辨率
50+
'tileSize': 256
51+
};
52+
var cia_c_source = {
53+
//来源类型为栅格瓦片
54+
"type": "raster",
55+
'tiles': [
56+
//来源请求地址，请求天地图提供的全球影像图WMTS服务
57+
"http://t3.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles"
58+
+ "&TILECOL=" + '{x}' + "&TILEROW=" + '{y}' + "&TILEMATRIX=" + '{z}'
59+
+ "&tk=" + tiandituKey
60+
],
61+
//栅格瓦片的分辨率
62+
'tileSize': 256
63+
};
64+
65+
var map = new mapboxgl.Map({
66+
container: 'map',
67+
style: {
68+
//设置版本号，一定要设置
69+
"version": 8,
70+
//添加来源
71+
"sources": {
72+
"天地图2000影像": img_c_source,
73+
"天地图2000注记": cia_c_source,
74+
},
75+
//设置加载并显示来源的图层信息
76+
"layers": [
77+
{
78+
//图层id，要保证唯一性
79+
"id": "天地图2000影像",
80+
//图层类型
81+
"type": "raster",
82+
//连接图层来源
83+
"source": "天地图2000影像",
84+
//图层最小缩放级数
85+
"minzoom": 0,
86+
//图层最大缩放级数
87+
"maxzoom": 22
88+
},{
89+
//图层id，要保证唯一性
90+
"id": "天地图2000注记",
91+
//图层类型
92+
"type": "raster",
93+
//连接图层来源
94+
"source": "天地图2000注记",
95+
//图层最小缩放级数
96+
"minzoom": 0,
97+
//图层最大缩放级数
98+
"maxzoom": 22
99+
}
100+
]
101+
},
102+
zoom: 2,
103+
pitch: 30,
104+
center: [114.39958333969115, 30.467706575758285]
105+
});
106+
107+
var navigationControl = new mapboxgl.NavigationControl();
108+
109+
map.addControl(navigationControl, 'top-left');
110+
</script>
111+
</body>
112+
113+
</html>

‎demo/mapbox/example/crs/4326_raster_ter.htm‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>导航栏控件</title>
7+
<script exclude="mapboxgl" include="crs" src="../../libs/zondyclient/include-mapboxgl-local.js"></script>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
#map {
15+
position: absolute;
16+
top: 0;
17+
bottom: 0;
18+
width: 100%;
19+
}
20+
21+
.navigation-box {
22+
height: 25px;
23+
width: 25px;
24+
position: absolute;
25+
top: 10px;
26+
right: 5px;
27+
background-color: rgba(255, 255, 255, 1);
28+
padding: 5px;
29+
border-radius: 5px;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
<div id="map"></div>
36+
<script>
37+
//一定要去mapbox注册一个key,这个key会失效的
38+
mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
39+
var tiandituKey = "f5347cab4b28410a6e8ba5143e3d5a35";
40+
var ter_c_source = {
41+
//来源类型为栅格瓦片
42+
"type": "raster",
43+
'tiles': [
44+
//来源请求地址，请求天地图提供的全球影像图WMTS服务
45+
"http://t3.tianditu.gov.cn/ter_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles"
46+
+ "&TILECOL=" + '{x}' + "&TILEROW=" + '{y}' + "&TILEMATRIX=" + '{z}'
47+
+ "&tk=" + tiandituKey
48+
],
49+
//栅格瓦片的分辨率
50+
'tileSize': 256
51+
};
52+
53+
var map = new mapboxgl.Map({
54+
container: 'map',
55+
style: {
56+
//设置版本号，一定要设置
57+
"version": 8,
58+
//添加来源
59+
"sources": {
60+
"天地图2000地形": ter_c_source
61+
},
62+
//设置加载并显示来源的图层信息
63+
"layers": [
64+
{
65+
//图层id，要保证唯一性
66+
"id": "天地图2000地形",
67+
//图层类型
68+
"type": "raster",
69+
//连接图层来源
70+
"source": "天地图2000地形",
71+
//图层最小缩放级数
72+
"minzoom": 0,
73+
//图层最大缩放级数
74+
"maxzoom": 22
75+
}
76+
]
77+
},
78+
zoom: 2,
79+
pitch: 30,
80+
center: [114.39958333969115, 30.467706575758285]
81+
});
82+
83+
var navigationControl = new mapboxgl.NavigationControl();
84+
85+
map.addControl(navigationControl, 'top-left');
86+
</script>
87+
</body>
88+
89+
</html>

‎demo/mapbox/example/crs/4326_raster_vec.htm‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>导航栏控件</title>
7+
<script exclude="mapboxgl" include="crs" src="../../libs/zondyclient/include-mapboxgl-local.js"></script>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
#map {
15+
position: absolute;
16+
top: 0;
17+
bottom: 0;
18+
width: 100%;
19+
}
20+
21+
.navigation-box {
22+
height: 25px;
23+
width: 25px;
24+
position: absolute;
25+
top: 10px;
26+
right: 5px;
27+
background-color: rgba(255, 255, 255, 1);
28+
padding: 5px;
29+
border-radius: 5px;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
<div id="map"></div>
36+
<script>
37+
//一定要去mapbox注册一个key,这个key会失效的
38+
mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
39+
var tiandituKey = "f5347cab4b28410a6e8ba5143e3d5a35";
40+
var vec_c_source = {
41+
//来源类型为栅格瓦片
42+
"type": "raster",
43+
'tiles': [
44+
//来源请求地址，请求天地图提供的全球影像图WMTS服务
45+
"http://t3.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles"
46+
+ "&TILECOL=" + '{x}' + "&TILEROW=" + '{y}' + "&TILEMATRIX=" + '{z}'
47+
+ "&tk=" + tiandituKey
48+
],
49+
//栅格瓦片的分辨率
50+
'tileSize': 256
51+
};
52+
var cva_c_source = {
53+
//来源类型为栅格瓦片
54+
"type": "raster",
55+
'tiles': [
56+
//来源请求地址，请求天地图提供的全球影像图WMTS服务
57+
"http://t3.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles"
58+
+ "&TILECOL=" + '{x}' + "&TILEROW=" + '{y}' + "&TILEMATRIX=" + '{z}'
59+
+ "&tk=" + tiandituKey
60+
],
61+
//栅格瓦片的分辨率
62+
'tileSize': 256
63+
};
64+
65+
var map = new mapboxgl.Map({
66+
container: 'map',
67+
style: {
68+
//设置版本号，一定要设置
69+
"version": 8,
70+
//添加来源
71+
"sources": {
72+
"天地图2000矢量": vec_c_source,
73+
"天地图2000注记": cva_c_source,
74+
},
75+
//设置加载并显示来源的图层信息
76+
"layers": [
77+
{
78+
//图层id，要保证唯一性
79+
"id": "天地图2000矢量",
80+
//图层类型
81+
"type": "raster",
82+
//连接图层来源
83+
"source": "天地图2000矢量",
84+
//图层最小缩放级数
85+
"minzoom": 0,
86+
//图层最大缩放级数
87+
"maxzoom": 22
88+
},{
89+
//图层id，要保证唯一性
90+
"id": "天地图2000注记",
91+
//图层类型
92+
"type": "raster",
93+
//连接图层来源
94+
"source": "天地图2000注记",
95+
//图层最小缩放级数
96+
"minzoom": 0,
97+
//图层最大缩放级数
98+
"maxzoom": 22
99+
}
100+
]
101+
},
102+
zoom: 2,
103+
pitch: 30,
104+
center: [114.39958333969115, 30.467706575758285]
105+
});
106+
107+
var navigationControl = new mapboxgl.NavigationControl();
108+
109+
map.addControl(navigationControl, 'top-left');
110+
</script>
111+
</body>
112+
113+
</html>

‎demo/mapbox/example/crs/4326_vector.htm‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>导航栏控件</title>
7+
<script exclude="mapboxgl" include="crs" src="../../libs/zondyclient/include-mapboxgl-local.js"></script>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
#map {
15+
position: absolute;
16+
top: 0;
17+
bottom: 0;
18+
width: 100%;
19+
}
20+
21+
.navigation-box {
22+
height: 25px;
23+
width: 25px;
24+
position: absolute;
25+
top: 10px;
26+
right: 5px;
27+
background-color: rgba(255, 255, 255, 1);
28+
padding: 5px;
29+
border-radius: 5px;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
<div id="map"></div>
36+
<script>
37+
//一定要去mapbox注册一个key,这个key会失效的
38+
mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
39+
40+
var map = new mapboxgl.Map({
41+
container: 'map',
42+
style: "http://localhost:6163/igs/rest/mrms/vtiles/styles/经纬度中国-id.json",
43+
zoom: 2,
44+
pitch: 30,
45+
center: [114.39958333969115, 30.467706575758285]
46+
});
47+
48+
var navigationControl = new mapboxgl.NavigationControl();
49+
50+
map.addControl(navigationControl, 'top-left');
51+
</script>
52+
</body>
53+
54+
</html>

‎demo/mapbox/gallery/crs/4326_raster_img.png‎

243 KB
Loading

‎demo/mapbox/gallery/crs/4326_raster_ter.png‎

235 KB
Loading

‎demo/mapbox/gallery/crs/4326_raster_vec.png‎

139 KB
Loading

‎demo/mapbox/gallery/crs/4326_vector.png‎

138 KB
Loading

‎demo/mapbox/markdown/crs/4326_raster_img.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
### 新版天地图需要key
2+
3+
> [Key地址](http://lbs.tianditu.gov.cn/)
4+
5+
6+
### mapboxgl中国2000坐标系支持
7+
8+
> 这里请注意，这里的mapboxgl与github上有点不同，这里的是特别编译的版本主要针对经纬度投影使用。
9+
10+
``` js
11+
<script exclude="mapboxgl" include="crs" src="../../libs/zondyclient/include-mapboxgl-local.js"></script>
12+
```
13+
14+
#### 注意事项
15+
16+
> `exclude`="mapboxgl" ~~~排除~~~ 默认加载的github上的**官方的mapboxgl**
17+
18+
> `include`="crs" **引入** 特别编译的**mapboxgl**

0 commit comments

Comments
 (0)