Skip to content

Commit cbb6469

Browse files
author
潘卓然-中地数码台式机
committed
2 parents ffe9def + 1758057 commit cbb6469

16 files changed

Lines changed: 552 additions & 65 deletions

‎config/config-mapboxgl.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,43 @@ var MAPBOXGL_CONFIG = config = {
33
title: "MapGIS WebClinet-MapboxGL演示网站",
44
mapmode: "mapbox",
55
childs: [
6+
{
7+
name: "中国2000坐标",
8+
materialicon: "map",
9+
folder: "crs",
10+
leaffolder: true,
11+
childs: [{
12+
name: "2000坐标系-栅格影像",
13+
file: "4326_raster_img",
14+
diffcult: "1",
15+
detail: "2000坐标系-栅格影像",
16+
icon: "4326_raster_img.png",
17+
update: "最后更新时间：2019-01-16"
18+
},
19+
{
20+
name: "2000坐标系-栅格矢量",
21+
file: "4326_raster_vec",
22+
diffcult: "1",
23+
detail: "2000坐标系-栅格矢量",
24+
icon: "4326_raster_vec.png",
25+
update: "最后更新时间：2019-01-16"
26+
},
27+
{
28+
name: "2000坐标系-栅格地形",
29+
file: "4326_raster_ter",
30+
diffcult: "1",
31+
detail: "2000坐标系-栅格地形",
32+
icon: "4326_raster_ter.png",
33+
update: "最后更新时间：2019-01-16"
34+
},{
35+
name: "2000坐标系-矢量瓦片",
36+
file: "4326_vector",
37+
diffcult: "1",
38+
detail: "2000坐标系-矢量瓦片",
39+
icon: "4326_vector.png",
40+
update: "最后更新时间：2019-01-16"
41+
}]
42+
},
643
{
744
name: "地图功能",
845
materialicon: "map",

‎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>

0 commit comments

Comments
 (0)