Skip to content

Commit fa40efb

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【新增MapboxGl卷帘组件示例】
1 parent bd5e009 commit fa40efb

29 files changed

Lines changed: 489 additions & 3 deletions

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

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,30 @@
5151
}
5252
]
5353
},
54+
{
55+
"name": "控件",
56+
"iconfont": "iconcontrol1",
57+
"folder": "control",
58+
"leaffolder": true,
59+
"childs": [
60+
{
61+
"name": "卷帘组件",
62+
"file": "compare",
63+
"diffcult": "1",
64+
"detail": "卷帘组件",
65+
"icon": "compare.png",
66+
"update": "最后更新时间：2020-12-30"
67+
},
68+
{
69+
"name": "卷帘组件-纵轴",
70+
"file": "compare-hori",
71+
"diffcult": "1",
72+
"detail": "卷帘组件-纵轴",
73+
"icon": "compare-hori.png",
74+
"update": "最后更新时间：2020-12-30"
75+
}
76+
]
77+
},
5478
{
5579
"name": "OGC",
5680
"iconfont": "iconstandard1",
@@ -899,8 +923,8 @@
899923
"childs": [
900924
{
901925
"name": "Vue-栅格",
902-
"iconfont": "iconhand_draw",
903-
"folder": "raster",
926+
"iconfont": "iconraster",
927+
"folder": "vue-raster",
904928
"leaffolder": true,
905929
"childs": [
906930
{
@@ -956,7 +980,7 @@
956980
{
957981
"name": "Vue-交互",
958982
"iconfont": "iconhand_draw",
959-
"folder": "control",
983+
"folder": "vue-control",
960984
"leaffolder": true,
961985
"childs": [
962986
{

‎website/public/static/demo/mapboxgl/example/control/compare-hori.htm‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>插值</title>
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
7+
<script include="compare" src="./static/libs/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+
height: 100%;
19+
width: 100%;
20+
}
21+
.controls {
22+
position: absolute;
23+
background: #ffffff;
24+
top: 20px;
25+
right: 20px;
26+
padding: 12px;
27+
border-radius: 6px;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<div id="wrapper">
34+
<div id="before" class="map"></div>
35+
<div id="after" class="map"></div>
36+
<div class="controls" id="close-button">取消</div>
37+
</div>
38+
<script>
39+
var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
40+
var before = new mapboxgl.Map({
41+
crs: 'EPSG:4326', //经纬度一定要设置crs参数
42+
maxBounds: [
43+
[-180, -90],
44+
[180, 90]
45+
],
46+
zoom: 3,
47+
container: 'before',
48+
style: {
49+
version: 8,
50+
sources: {
51+
'tianditu-4326-vector': {
52+
//来源类型为栅格瓦片
53+
type: 'raster',
54+
tiles: [
55+
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
56+
'http://t' +
57+
Math.round(Math.random() * 7) +
58+
'.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
59+
'&TILECOL=' +
60+
'{x}' +
61+
'&TILEROW=' +
62+
'{y}' +
63+
'&TILEMATRIX=' +
64+
'{z}' +
65+
'&tk=' +
66+
tiandituKey
67+
],
68+
//栅格瓦片的分辨率
69+
tileSize: 256
70+
}
71+
},
72+
layers: [
73+
{
74+
id: 'tianditu-4326-vector',
75+
type: 'raster',
76+
source: 'tianditu-4326-vector',
77+
minzoom: 0,
78+
maxzoom: 22
79+
}
80+
]
81+
},
82+
center: [116.35, 30.92]
83+
});
84+
var after = new mapboxgl.Map({
85+
crs: 'EPSG:4326', //经纬度一定要设置crs参数
86+
maxBounds: [
87+
[-180, -90],
88+
[180, 90]
89+
],
90+
zoom: 3,
91+
container: 'after',
92+
style: {
93+
version: 8,
94+
sources: {
95+
'tianditu-4326-image': {
96+
//来源类型为栅格瓦片
97+
type: 'raster',
98+
tiles: [
99+
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
100+
'http://t' +
101+
Math.round(Math.random() * 7) +
102+
'.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0' +
103+
'&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
104+
'&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}' +
105+
'&tk=' +
106+
tiandituKey
107+
],
108+
//栅格瓦片的分辨率
109+
tileSize: 256
110+
}
111+
},
112+
layers: [
113+
{
114+
id: 'tianditu-4326-image',
115+
type: 'raster',
116+
source: 'tianditu-4326-image',
117+
minzoom: 0,
118+
maxzoom: 22
119+
}
120+
]
121+
},
122+
center: [116.35, 30.92]
123+
});
124+
125+
var wrapperSelector = '#wrapper';
126+
var options = {
127+
// mousemove: true,
128+
orientation: 'horizontal'
129+
};
130+
131+
window.compare = new mapboxgl.Compare(
132+
before,
133+
after,
134+
wrapperSelector,
135+
options
136+
);
137+
138+
var closeButton = document.getElementById('close-button');
139+
140+
closeButton.addEventListener('click', function (e) {
141+
after.getContainer().style.display = 'none';
142+
window.compare.remove();
143+
after.remove();
144+
});
145+
</script>
146+
</body>
147+
</html>

‎website/public/static/demo/mapboxgl/example/control/compare.htm‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>插值</title>
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
7+
<script include="compare" src="./static/libs/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+
height: 100vh;
19+
width: 100%;
20+
}
21+
.controls {
22+
position: absolute;
23+
background: #ffffff;
24+
top: 20px;
25+
right: 20px;
26+
padding: 12px;
27+
border-radius: 6px;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<div id="wrapper">
34+
<div id="before" class="map"></div>
35+
<div id="after" class="map"></div>
36+
<div class="controls" id="close-button">取消</div>
37+
</div>
38+
<script>
39+
var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
40+
var before = new mapboxgl.Map({
41+
crs: 'EPSG:4326', //经纬度一定要设置crs参数
42+
maxBounds: [
43+
[-180, -90],
44+
[180, 90]
45+
],
46+
zoom: 3,
47+
container: 'before',
48+
style: {
49+
version: 8,
50+
sources: {
51+
'tianditu-4326-vector': {
52+
//来源类型为栅格瓦片
53+
type: 'raster',
54+
tiles: [
55+
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
56+
'http://t' +
57+
Math.round(Math.random() * 7) +
58+
'.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
59+
'&TILECOL=' +
60+
'{x}' +
61+
'&TILEROW=' +
62+
'{y}' +
63+
'&TILEMATRIX=' +
64+
'{z}' +
65+
'&tk=' +
66+
tiandituKey
67+
],
68+
//栅格瓦片的分辨率
69+
tileSize: 256
70+
}
71+
},
72+
layers: [
73+
{
74+
id: 'tianditu-4326-vector',
75+
type: 'raster',
76+
source: 'tianditu-4326-vector',
77+
minzoom: 0,
78+
maxzoom: 22
79+
}
80+
]
81+
},
82+
center: [116.35, 30.92]
83+
});
84+
var after = new mapboxgl.Map({
85+
crs: 'EPSG:4326', //经纬度一定要设置crs参数
86+
maxBounds: [
87+
[-180, -90],
88+
[180, 90]
89+
],
90+
zoom: 3,
91+
container: 'after',
92+
style: {
93+
version: 8,
94+
sources: {
95+
'tianditu-4326-image': {
96+
//来源类型为栅格瓦片
97+
type: 'raster',
98+
tiles: [
99+
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
100+
'http://t' +
101+
Math.round(Math.random() * 7) +
102+
'.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0' +
103+
'&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
104+
'&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}' +
105+
'&tk=' +
106+
tiandituKey
107+
],
108+
//栅格瓦片的分辨率
109+
tileSize: 256
110+
}
111+
},
112+
layers: [
113+
{
114+
id: 'tianditu-4326-image',
115+
type: 'raster',
116+
source: 'tianditu-4326-image',
117+
minzoom: 0,
118+
maxzoom: 22
119+
}
120+
]
121+
},
122+
center: [116.35, 30.92]
123+
});
124+
125+
var wrapperSelector = '#wrapper';
126+
var options = {
127+
mousemove: true,
128+
orientation: 'horizontal'
129+
};
130+
131+
window.compare = new mapboxgl.Compare(
132+
before,
133+
after,
134+
wrapperSelector
135+
// options
136+
);
137+
138+
var closeButton = document.getElementById('close-button');
139+
140+
closeButton.addEventListener('click', function (e) {
141+
after.getContainer().style.display = 'none';
142+
window.compare.remove();
143+
after.remove();
144+
});
145+
</script>
146+
</body>
147+
</html>

website/public/static/demo/mapboxgl/example/vue/control/compare.htm renamed to website/public/static/demo/mapboxgl/example/vue/vue-control/compare-diff.htm

File renamed without changes.

0 commit comments

Comments
 (0)