Skip to content

Commit e7ed3e9

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

12 files changed

+441
-0
lines changed

‎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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy