Skip to content

Commit 7689953

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

19 files changed

+8619
-3965
lines changed

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