Skip to content

Commit b955094

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【新增Mapbox的Vue常用控件组件】
1 parent a46bfd0 commit b955094

23 files changed

Lines changed: 1488 additions & 1 deletion

File tree

‎website/public/static/demo/config/config-mapboxgl.json‎

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1007,13 +1007,29 @@
10071007
"folder": "vue-control",
10081008
"leaffolder": true,
10091009
"childs": [
1010+
{
1011+
"name": "Maker组件",
1012+
"file": "marker",
1013+
"diffcult": "2",
1014+
"detail": "",
1015+
"icon": "marker.png",
1016+
"update": "最后更新时间：2021-01-07"
1017+
},
1018+
{
1019+
"name": "Popup组件",
1020+
"file": "popup",
1021+
"diffcult": "2",
1022+
"detail": "",
1023+
"icon": "popup.png",
1024+
"update": "最后更新时间：2021-01-07"
1025+
},
10101026
{
10111027
"name": "绘制组件",
10121028
"file": "draw",
10131029
"diffcult": "2",
10141030
"detail": "",
10151031
"icon": "draw.png",
1016-
"update": "最后更新时间：2020-10-26"
1032+
"update": "最后更新时间：2020-11-23"
10171033
},
10181034
{
10191035
"name": "测量组件",
@@ -1046,6 +1062,46 @@
10461062
"detail": "FPS组件",
10471063
"icon": "fps.png",
10481064
"update": "最后更新时间：2021-01-06"
1065+
},
1066+
{
1067+
"name": "导航组件",
1068+
"file": "navigation",
1069+
"diffcult": "1",
1070+
"detail": "导航组件",
1071+
"icon": "navigation.png",
1072+
"update": "最后更新时间：2021-01-07"
1073+
},
1074+
{
1075+
"name": "属性组件",
1076+
"file": "attribution",
1077+
"diffcult": "1",
1078+
"detail": "属性组件",
1079+
"icon": "attribution.png",
1080+
"update": "最后更新时间：2021-01-07"
1081+
},
1082+
{
1083+
"name": "全屏组件",
1084+
"file": "fullscreen",
1085+
"diffcult": "1",
1086+
"detail": "导航组件",
1087+
"icon": "fullscreen.png",
1088+
"update": "最后更新时间：2021-01-07"
1089+
},
1090+
{
1091+
"name": "地址组件",
1092+
"file": "geolocate",
1093+
"diffcult": "1",
1094+
"detail": "地址组件",
1095+
"icon": "geolocate.png",
1096+
"update": "最后更新时间：2021-01-07"
1097+
},
1098+
{
1099+
"name": "比例尺组件",
1100+
"file": "scale",
1101+
"diffcult": "1",
1102+
"detail": "比例尺组件",
1103+
"icon": "scale.png",
1104+
"update": "最后更新时间：2021-01-07"
10491105
}
10501106
]
10511107
}

‎website/public/static/demo/mapboxgl/example/client-view/common/cluster.htm‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
var map = new mapboxgl.Map({
2828
container: 'map',
2929
crs: 'EPSG:4326',
30+
maxBounds: [[-180, -90], [180, 90]],
3031
style: {
3132
version: 8,
3233
sources: {

‎website/public/static/demo/mapboxgl/example/vue/vue-control/attribution.htm‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>Vue-FPS</title>
7+
<!--引入第三方的jquery脚本库-->
8+
<script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
9+
<style type="text/css">
10+
#main {
11+
margin: 0 0;
12+
width: 100%;
13+
height: 100vh;
14+
}
15+
#map {
16+
height: 100vh;
17+
width: 100%;
18+
}
19+
</style>
20+
</head>
21+
22+
<body>
23+
<div id="app">
24+
<mapbox-map
25+
id="map"
26+
:access-token="accessToken"
27+
:map-style="mapStyle"
28+
:zoom="mapZoom"
29+
:center="outerCenter"
30+
:crs="mapCrs"
31+
v-on:load="handleMapLoad"
32+
>
33+
<mapbox-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl">
34+
</mapbox-ogc-wmts-layer>
35+
<mapbox-raster-layer
36+
:layer="layerRaster"
37+
:layer-id="layerRasterId"
38+
:source="sourceRaster"
39+
:source-id="sourceRasterId"
40+
>
41+
</mapbox-raster-layer>
42+
<mapbox-attribution-control :position="position" :compact="compact" :custom-attribution="attrbution"/>
43+
</mapbox-map>
44+
</div>
45+
<script>
46+
new Vue({
47+
el: '#app',
48+
data() {
49+
return {
50+
mapStyle: {
51+
//设置版本号，一定要设置
52+
version: 8,
53+
//添加来源
54+
sources: {},
55+
//设置加载并显示来源的图层信息
56+
layers: []
57+
}, // 地图样式
58+
mapZoom: 3, // 地图初始化级数
59+
outerCenter: [116.39, 40.2], // 地图显示中心
60+
mapCrs: 'EPSG:4326',
61+
62+
layerWmts: {},
63+
layerWmtsId: 'ogcwmts_layerId',
64+
sourceWmtsId: 'ogcwmts_sourceId',
65+
wmtsurl: 'http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
66+
67+
layerRaster: {},
68+
sourceRaster: {
69+
type: 'raster',
70+
tiles: ['http://t0.tianditu.com/DataServer?T=cia_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752']
71+
},
72+
layerRasterId: 'raster_layerId',
73+
sourceRasterId: 'raster_sourceId',
74+
75+
position: 'bottom-left',
76+
compact: true,
77+
attrbution: '中地数码-司马云'
78+
};
79+
},
80+
methods: {
81+
handleMapLoad(payload) {
82+
this.map = payload.map;
83+
}
84+
}
85+
});
86+
</script>
87+
</body>
88+
</html>

‎website/public/static/demo/mapboxgl/example/vue/vue-control/fullscreen.htm‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>Vue-FPS</title>
7+
<!--引入第三方的jquery脚本库-->
8+
<script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
9+
<style type="text/css">
10+
#main {
11+
margin: 0 0;
12+
width: 100%;
13+
height: 100vh;
14+
}
15+
#map {
16+
height: 100vh;
17+
width: 100%;
18+
}
19+
.custom {
20+
height: 100vh;
21+
background: #FFFFFF;
22+
padding: 12px;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<div id="app">
29+
<mapbox-map
30+
id="map"
31+
:access-token="accessToken"
32+
:map-style="mapStyle"
33+
:zoom="mapZoom"
34+
:center="outerCenter"
35+
:crs="mapCrs"
36+
v-on:load="handleMapLoad"
37+
>
38+
<mapbox-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl">
39+
</mapbox-ogc-wmts-layer>
40+
<mapbox-raster-layer
41+
:layer="layerRaster"
42+
:layer-id="layerRasterId"
43+
:source="sourceRaster"
44+
:source-id="sourceRasterId"
45+
>
46+
</mapbox-raster-layer>
47+
<mapbox-fullscreen-control :position="position" :container="container">
48+
</mapbox-fullscreen-control>
49+
</mapbox-map>
50+
<div class="custom" ref="custom">自定义样式,屏蔽后默认显示地图组件</div>
51+
</div>
52+
<script>
53+
new Vue({
54+
el: '#app',
55+
data() {
56+
return {
57+
mapStyle: {
58+
//设置版本号，一定要设置
59+
version: 8,
60+
//添加来源
61+
sources: {},
62+
//设置加载并显示来源的图层信息
63+
layers: []
64+
}, // 地图样式
65+
mapZoom: 3, // 地图初始化级数
66+
outerCenter: [116.39, 40.2], // 地图显示中心
67+
mapCrs: 'EPSG:4326',
68+
69+
layerWmts: {},
70+
layerWmtsId: 'ogcwmts_layerId',
71+
sourceWmtsId: 'ogcwmts_sourceId',
72+
wmtsurl: 'http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
73+
74+
layerRaster: {},
75+
sourceRaster: {
76+
type: 'raster',
77+
tiles: ['http://t0.tianditu.com/DataServer?T=cia_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752']
78+
},
79+
layerRasterId: 'raster_layerId',
80+
sourceRasterId: 'raster_sourceId',
81+
82+
position: 'top-right',
83+
container: undefined
84+
};
85+
},
86+
methods: {
87+
handleMapLoad(payload) {
88+
this.map = payload.map;
89+
let custom = this.$refs.custom;
90+
this.container = custom;
91+
console.log('custom', custom);
92+
}
93+
}
94+
});
95+
</script>
96+
</body>
97+
</html>

‎website/public/static/demo/mapboxgl/example/vue/vue-control/geolocate.htm‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>Vue-FPS</title>
7+
<!--引入第三方的jquery脚本库-->
8+
<script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
9+
<style type="text/css">
10+
#main {
11+
margin: 0 0;
12+
width: 100%;
13+
height: 100vh;
14+
}
15+
#map {
16+
height: 100vh;
17+
width: 100%;
18+
}
19+
</style>
20+
</head>
21+
22+
<body>
23+
<div id="app">
24+
<mapbox-map
25+
id="map"
26+
:access-token="accessToken"
27+
:map-style="mapStyle"
28+
:zoom="mapZoom"
29+
:center="outerCenter"
30+
:crs="mapCrs"
31+
v-on:load="handleMapLoad"
32+
>
33+
<mapbox-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl">
34+
</mapbox-ogc-wmts-layer>
35+
<mapbox-raster-layer
36+
:layer="layerRaster"
37+
:layer-id="layerRasterId"
38+
:source="sourceRaster"
39+
:source-id="sourceRasterId"
40+
>
41+
</mapbox-raster-layer>
42+
<mapbox-geolocate-control :track-user-location="track" :show-user-location="user" />
43+
</mapbox-map>
44+
</div>
45+
<script>
46+
new Vue({
47+
el: '#app',
48+
data() {
49+
return {
50+
mapStyle: {
51+
//设置版本号，一定要设置
52+
version: 8,
53+
//添加来源
54+
sources: {},
55+
//设置加载并显示来源的图层信息
56+
layers: []
57+
}, // 地图样式
58+
mapZoom: 3, // 地图初始化级数
59+
outerCenter: [116.39, 40.2], // 地图显示中心
60+
mapCrs: 'EPSG:4326',
61+
62+
layerWmts: {},
63+
layerWmtsId: 'ogcwmts_layerId',
64+
sourceWmtsId: 'ogcwmts_sourceId',
65+
wmtsurl: 'http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
66+
67+
layerRaster: {},
68+
sourceRaster: {
69+
type: 'raster',
70+
tiles: ['http://t0.tianditu.com/DataServer?T=cia_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752']
71+
},
72+
layerRasterId: 'raster_layerId',
73+
sourceRasterId: 'raster_sourceId',
74+
75+
position: 'bottom-left',
76+
track: true,
77+
user: true
78+
};
79+
},
80+
methods: {
81+
handleMapLoad(payload) {
82+
this.map = payload.map;
83+
}
84+
}
85+
});
86+
</script>
87+
</body>
88+
</html>

0 commit comments

Comments
 (0)