Skip to content

Commit 7689953

Browse files
luoxiao-supermapluoxiao-supermap
committed
【update】新增天地图自组件例子 review by liq
1 parent fff5d9e commit 7689953

19 files changed

Lines changed: 8619 additions & 3965 deletions

‎dist/mapboxgl/iclient9-mapboxgl-vue.css‎

Lines changed: 2780 additions & 286 deletions
Large diffs are not rendered by default.

‎dist/mapboxgl/iclient9-mapboxgl-vue.js‎

Lines changed: 5315 additions & 3655 deletions
Large diffs are not rendered by default.

‎dist/mapboxgl/iclient9-mapboxgl-vue.min.css‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mapboxgl/iclient9-mapboxgl-vue.min.js‎

Lines changed: 11 additions & 23 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/component/components_tianditu_home_vue.html‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_componentsTianditu_home_Vue"></title>
9+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10+
<script include="iclient9-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
11+
<style>
12+
.container {
13+
margin: 0 auto;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
.nav-header {
18+
width: 100%;
19+
height: 63px;
20+
background-color: #fff;
21+
border-bottom: 1px solid #ccc;
22+
z-index: 12;
23+
transition: 0.3s;
24+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
25+
border-collapse: separate;
26+
display: flex;
27+
align-items: center;
28+
}
29+
.nav-header .logo {
30+
display: block;
31+
width: 80px;
32+
height: 40px;
33+
margin: 0 20px;
34+
float: left;
35+
cursor: pointer;
36+
}
37+
.nav-header .logo-image {
38+
width: 100%;
39+
height: 100%;
40+
}
41+
.nav-header .imagesLink {
42+
list-style: none;
43+
display: flex;
44+
align-items: center;
45+
height: 100%;
46+
font-size: 15px;
47+
margin-bottom: 0;
48+
}
49+
.nav-header .imagesLink li {
50+
display: inline-block;
51+
padding: 0 10px;
52+
}
53+
.nav-header .imagesLink li a {
54+
color: #333;
55+
}
56+
.nav-header .imagesLink li a:hover {
57+
color: #3385ff;
58+
}
59+
60+
#main {
61+
width: 100%;
62+
height: calc(100% - 63px);
63+
}
64+
</style>
65+
</head>
66+
67+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
68+
<div class="container">
69+
<div class="nav-header">
70+
<a href="https://www.tianditu.gov.cn/" class="logo"
71+
><image class="logo-image" src="../img/tianditu/tianditu.png"></image
72+
></a>
73+
<ul class="imagesLink">
74+
<li><a href="https://www.tianditu.gov.cn/" target="_blank">首页</a></li>
75+
<li><a href="https://zhfw.tianditu.gov.cn/" target="_blank">专题图层</a></li>
76+
<li><a href="http://lbs.tianditu.gov.cn/" target="_blank">开发资源</a></li>
77+
<li><a href="https://app.tianditu.gov.cn/" target="_blank">典型应用</a></li>
78+
<li><a href="https://service.tianditu.gov.cn/" target="_blank">服务资源</a></li>
79+
<li><a href="http://yjfw.tianditu.gov.cn/" target="_blank">应急服务</a></li>
80+
</ul>
81+
</div>
82+
<div id="main">
83+
<sm-web-map :map-options="mapOptions">
84+
<!-- 天地图路线查询组件: sm-tdt-route
85+
天地图搜索组件：sm-tdt-search -->
86+
<sm-tdt-route position="top-right"></sm-tdt-route>
87+
<sm-tdt-search position="top-right"></sm-tdt-search>
88+
<sm-tdt-map-switcher position="top-right"></sm-tdt-map-switcher>
89+
</sm-web-map>
90+
</div>
91+
</div>
92+
93+
<script>
94+
new Vue({
95+
el: '#main',
96+
data() {
97+
return {
98+
mapOptions: {
99+
center: [126.64318, 45.74141],
100+
zoom: 11,
101+
style: {
102+
version: 8,
103+
sources: {
104+
baseLayer: {
105+
type: 'raster',
106+
tiles: [
107+
'http://support.supermap.com.cn:8092/apps/viewer/getUrlResource.png?url=http%3A%2F%2Ft0.tianditu.com%2Fimg_w%2Fwmts%3Ftk%3D979370626f38396281484293eb175e2e%26service%3DWMTS%26request%3DGetTile%26version%3D1.0.0%26style%3Ddefault%26tilematrixSet%3Dw%26format%3Dtiles%26width%3D256%26height%3D256%26layer%3Dimg%26tilematrix%3D{z}%26tilerow%3D{y}%26tilecol%3D{x}',
108+
],
109+
tileSize: 256
110+
},
111+
labelLayer: {
112+
type: 'raster',
113+
tiles: [
114+
'http://support.supermap.com.cn:8092/apps/viewer/getUrlResource.png?url=http%3A%2F%2Ft0.tianditu.com%2Fcia_w%2Fwmts%3Ftk%3D979370626f38396281484293eb175e2e%26service%3DWMTS%26request%3DGetTile%26version%3D1.0.0%26style%3Ddefault%26tilematrixSet%3Dw%26format%3Dtiles%26width%3D256%26height%3D256%26layer%3Dcia%26tilematrix%3D{z}%26tilerow%3D{y}%26tilecol%3D{x}',
115+
],
116+
tileSize: 256
117+
}
118+
},
119+
layers: [
120+
{
121+
id: 'baseLayer',
122+
type: 'raster',
123+
source: 'baseLayer',
124+
minzoom: 0,
125+
maxzoom: 18
126+
},
127+
{
128+
id: 'labelLayer',
129+
type: 'raster',
130+
source: 'labelLayer',
131+
minzoom: 0,
132+
maxzoom: 18
133+
}
134+
]
135+
},
136+
renderWorldCopies: false
137+
}
138+
};
139+
}
140+
});
141+
</script>
142+
</body>
143+
</html>

‎examples/component/components_tianditu_route_vue.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_componentsTianditu_route_Vue"></title>
9+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10+
<script include="iclient9-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
11+
<style>
12+
#main {
13+
margin: 0 auto;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
</style>
18+
</head>
19+
20+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;">
21+
22+
<div id="main" style="position: absolute">
23+
<sm-web-map :map-options="mapOptions">
24+
<!-- 天地图路线查询组件: sm-tdt-route, 参数： token, busUrl, carUrl, searchUrl, position, theme -->
25+
<sm-tdt-route position="top-left"></sm-tdt-route>
26+
</sm-web-map>
27+
</div>
28+
29+
<script>
30+
new Vue({
31+
el: '#main',
32+
data() {
33+
return {
34+
mapOptions: {
35+
center: [126.64318, 45.74141],
36+
zoom: 11,
37+
style: {
38+
version: 8,
39+
sources: {
40+
baseLayer: {
41+
type: 'raster',
42+
tiles: [
43+
'http://support.supermap.com.cn:8092/apps/viewer/getUrlResource.png?url=http%3A%2F%2Ft0.tianditu.com%2Fimg_w%2Fwmts%3Ftk%3D979370626f38396281484293eb175e2e%26service%3DWMTS%26request%3DGetTile%26version%3D1.0.0%26style%3Ddefault%26tilematrixSet%3Dw%26format%3Dtiles%26width%3D256%26height%3D256%26layer%3Dimg%26tilematrix%3D{z}%26tilerow%3D{y}%26tilecol%3D{x}',
44+
],
45+
tileSize: 256
46+
},
47+
labelLayer: {
48+
type: 'raster',
49+
tiles: [
50+
'http://support.supermap.com.cn:8092/apps/viewer/getUrlResource.png?url=http%3A%2F%2Ft0.tianditu.com%2Fcia_w%2Fwmts%3Ftk%3D979370626f38396281484293eb175e2e%26service%3DWMTS%26request%3DGetTile%26version%3D1.0.0%26style%3Ddefault%26tilematrixSet%3Dw%26format%3Dtiles%26width%3D256%26height%3D256%26layer%3Dcia%26tilematrix%3D{z}%26tilerow%3D{y}%26tilecol%3D{x}',
51+
],
52+
tileSize: 256
53+
}
54+
},
55+
layers: [
56+
{
57+
id: 'baseLayer',
58+
type: 'raster',
59+
source: 'baseLayer',
60+
minzoom: 0,
61+
maxzoom: 18
62+
},
63+
{
64+
id: 'labelLayer',
65+
type: 'raster',
66+
source: 'labelLayer',
67+
minzoom: 0,
68+
maxzoom: 18
69+
}
70+
]
71+
},
72+
renderWorldCopies: false
73+
}
74+
};
75+
}
76+
});
77+
</script>
78+
</body>
79+
</html>

‎examples/component/components_tianditu_search_vue.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_componentsTianditu_search_Vue"></title>
9+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10+
<script include="iclient9-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
11+
<style>
12+
#main {
13+
margin: 0 auto;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
</style>
18+
</head>
19+
20+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;">
21+
22+
<div id="main">
23+
<sm-web-map :map-options="mapOptions">
24+
<!-- 天地图搜索组件：sm-tdt-search -->
25+
<sm-tdt-search position="top-left"></sm-tdt-search>
26+
</sm-web-map>
27+
</div>
28+
29+
30+
<script>
31+
new Vue({
32+
el: '#main',
33+
data() {
34+
return {
35+
mapOptions: {
36+
center: [126.64318, 45.74141],
37+
zoom: 11,
38+
style: {
39+
version: 8,
40+
sources: {
41+
baseLayer: {
42+
type: 'raster',
43+
tiles: [
44+
'http://support.supermap.com.cn:8092/apps/viewer/getUrlResource.png?url=http%3A%2F%2Ft0.tianditu.com%2Fimg_w%2Fwmts%3Ftk%3D979370626f38396281484293eb175e2e%26service%3DWMTS%26request%3DGetTile%26version%3D1.0.0%26style%3Ddefault%26tilematrixSet%3Dw%26format%3Dtiles%26width%3D256%26height%3D256%26layer%3Dimg%26tilematrix%3D{z}%26tilerow%3D{y}%26tilecol%3D{x}',
45+
],
46+
tileSize: 256
47+
},
48+
labelLayer: {
49+
type: 'raster',
50+
tiles: [
51+
'http://support.supermap.com.cn:8092/apps/viewer/getUrlResource.png?url=http%3A%2F%2Ft0.tianditu.com%2Fcia_w%2Fwmts%3Ftk%3D979370626f38396281484293eb175e2e%26service%3DWMTS%26request%3DGetTile%26version%3D1.0.0%26style%3Ddefault%26tilematrixSet%3Dw%26format%3Dtiles%26width%3D256%26height%3D256%26layer%3Dcia%26tilematrix%3D{z}%26tilerow%3D{y}%26tilecol%3D{x}',
52+
],
53+
tileSize: 256
54+
}
55+
},
56+
layers: [
57+
{
58+
id: 'baseLayer',
59+
type: 'raster',
60+
source: 'baseLayer',
61+
minzoom: 0,
62+
maxzoom: 18
63+
},
64+
{
65+
id: 'labelLayer',
66+
type: 'raster',
67+
source: 'labelLayer',
68+
minzoom: 0,
69+
maxzoom: 18
70+
}
71+
]
72+
},
73+
renderWorldCopies: false
74+
}
75+
};
76+
}
77+
});
78+
</script>
79+
</body>
80+
</html>

‎examples/component/components_tianditu_switch_vue.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_componentsTianditu_switch_Vue"></title>
9+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10+
<script include="iclient9-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
11+
<style>
12+
#main {
13+
margin: 0 auto;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
</style>
18+
</head>
19+
20+
<body
21+
style=" margin: 0;overflow: hidden;background: #fff;color:#000;width: 100%;height:100%;"
22+
>
23+
<div id="main">
24+
<sm-web-map :map-options="mapOptions">
25+
<!-- 天地图切换组件：sm-tdt-map-switcher -->
26+
<sm-tdt-map-switcher position="top-left"></sm-tdt-map-switcher>
27+
</sm-web-map>
28+
</div>
29+
30+
<script>
31+
new Vue({
32+
el: '#main',
33+
data() {
34+
return {
35+
mapOptions: {
36+
center: [126.64318, 45.74141],
37+
zoom: 11,
38+
style: {
39+
version: 8,
40+
sources: {
41+
baseLayer: {
42+
type: 'raster',
43+
tiles: [
44+
'http://support.supermap.com.cn:8092/apps/viewer/getUrlResource.png?url=http%3A%2F%2Ft0.tianditu.com%2Fimg_w%2Fwmts%3Ftk%3D979370626f38396281484293eb175e2e%26service%3DWMTS%26request%3DGetTile%26version%3D1.0.0%26style%3Ddefault%26tilematrixSet%3Dw%26format%3Dtiles%26width%3D256%26height%3D256%26layer%3Dimg%26tilematrix%3D{z}%26tilerow%3D{y}%26tilecol%3D{x}'
45+
],
46+
tileSize: 256
47+
},
48+
labelLayer: {
49+
type: 'raster',
50+
tiles: [
51+
'http://support.supermap.com.cn:8092/apps/viewer/getUrlResource.png?url=http%3A%2F%2Ft0.tianditu.com%2Fcia_w%2Fwmts%3Ftk%3D979370626f38396281484293eb175e2e%26service%3DWMTS%26request%3DGetTile%26version%3D1.0.0%26style%3Ddefault%26tilematrixSet%3Dw%26format%3Dtiles%26width%3D256%26height%3D256%26layer%3Dcia%26tilematrix%3D{z}%26tilerow%3D{y}%26tilecol%3D{x}'
52+
],
53+
tileSize: 256
54+
}
55+
},
56+
layers: [
57+
{
58+
id: 'baseLayer',
59+
type: 'raster',
60+
source: 'baseLayer',
61+
minzoom: 0,
62+
maxzoom: 18
63+
},
64+
{
65+
id: 'labelLayer',
66+
type: 'raster',
67+
source: 'labelLayer',
68+
minzoom: 0,
69+
maxzoom: 18
70+
}
71+
]
72+
},
73+
renderWorldCopies: false
74+
}
75+
};
76+
}
77+
});
78+
</script>
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)