Skip to content

Commit 4822987

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【补充MapboxGL的FPS-JS/Vue组件】
1 parent e089942 commit 4822987

8 files changed

Lines changed: 395 additions & 0 deletions

File tree

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,14 @@
7272
"detail": "卷帘组件-纵轴",
7373
"icon": "compare-hori.png",
7474
"update": "最后更新时间：2020-12-30"
75+
},
76+
{
77+
"name": "FPS组件",
78+
"file": "fps-control",
79+
"diffcult": "1",
80+
"detail": "卷帘组件-纵轴",
81+
"icon": "fps-control.png",
82+
"update": "最后更新时间：2021-01-06"
7583
}
7684
]
7785
},
@@ -384,6 +392,22 @@
384392
"folder": "client-view",
385393
"leaffolder": false,
386394
"childs": [
395+
{
396+
"name": "通用可视化",
397+
"iconfont": "iconapp_mw_cluster",
398+
"folder": "common",
399+
"leaffolder": true,
400+
"childs": [
401+
{
402+
"name": "聚类",
403+
"file": "cluster",
404+
"diffcult": "1",
405+
"detail": "GeoJSON格式的聚类分析",
406+
"icon": "cluster.png",
407+
"update": "最后更新时间：2021-01-05"
408+
}
409+
]
410+
},
387411
{
388412
"name": "矢量瓦片",
389413
"iconfont": "icontile_hover",
@@ -1014,6 +1038,14 @@
10141038
"detail": "卷帘组件-纵轴",
10151039
"icon": "compare-hori.png",
10161040
"update": "最后更新时间：2020-12-30"
1041+
},
1042+
{
1043+
"name": "FPS组件",
1044+
"file": "fps",
1045+
"diffcult": "1",
1046+
"detail": "FPS组件",
1047+
"icon": "fps.png",
1048+
"update": "最后更新时间：2021-01-06"
10171049
}
10181050
]
10191051
}

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<title>聚类显示</title>
6+
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
7+
<script include="" 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+
width: 100%;
19+
}
20+
</style>
21+
</head>
22+
23+
<body>
24+
<div id="map"></div>
25+
<script>
26+
var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
27+
var map = new mapboxgl.Map({
28+
container: 'map',
29+
style: {
30+
version: 8,
31+
sources: {
32+
'tianditu-3857-image': {
33+
//来源类型为栅格瓦片
34+
type: 'raster',
35+
tiles: [
36+
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
37+
'http://t' +
38+
Math.round(Math.random() * 7) +
39+
'.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0' +
40+
'&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
41+
'&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}' +
42+
'&tk=' +
43+
tiandituKey
44+
],
45+
//栅格瓦片的分辨率
46+
tileSize: 256
47+
}
48+
},
49+
layers: [
50+
{
51+
id: 'tianditu-3857-image',
52+
type: 'raster',
53+
source: 'tianditu-3857-image',
54+
minzoom: 0,
55+
maxzoom: 22
56+
}
57+
],
58+
glyphs: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/fonts/{fontstack}/{range}.pbf'
59+
},
60+
center: [108.95, 34.25],
61+
zoom: 3
62+
});
63+
64+
map.on('load', () => {
65+
$.get('./../static/data/geojson/china-city.geojson', (data) => {
66+
addCluster(data);
67+
});
68+
});
69+
70+
function addCluster(geojson) {
71+
// map.add
72+
map.addSource('clusterdata', {
73+
type: 'geojson',
74+
data: geojson,
75+
cluster: true,
76+
clusterMaxZoom: 14, // 聚合最大级别
77+
clusterRadius: 50 // 聚合半径
78+
});
79+
80+
map.addLayer({
81+
id: `clusters-layer`,
82+
type: 'circle',
83+
source: 'clusterdata',
84+
filter: ['has', 'name'],
85+
paint: {
86+
'circle-color': '#51bbd6',
87+
'circle-radius': 20,
88+
'circle-stroke-width': 5, //轮廓线宽度
89+
'circle-stroke-color': '#FFFFFF' //轮廓线颜色
90+
}
91+
});
92+
93+
map.addLayer({
94+
id: 'cluster-count',
95+
type: 'symbol',
96+
source: 'clusterdata',
97+
filter: ['has', 'name'],
98+
layout: {
99+
'text-field': '{name}',
100+
'text-font': ['宋体', '宋体'],
101+
'text-size': 12
102+
}
103+
});
104+
}
105+
</script>
106+
</body>
107+
</html>

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
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+
</style>
22+
</head>
23+
24+
<body>
25+
<div id="wrapper">
26+
<div id="fpsmap" class="map"></div>
27+
</div>
28+
<script>
29+
var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
30+
var map = new mapboxgl.Map({
31+
crs: 'EPSG:4326', //经纬度一定要设置crs参数
32+
maxBounds: [
33+
[-180, -90],
34+
[180, 90]
35+
],
36+
zoom: 3,
37+
container: 'fpsmap',
38+
style: {
39+
version: 8,
40+
sources: {
41+
'tianditu-4326-vector': {
42+
//来源类型为栅格瓦片
43+
type: 'raster',
44+
tiles: [
45+
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
46+
'http://t' +
47+
Math.round(Math.random() * 7) +
48+
'.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
49+
'&TILECOL=' +
50+
'{x}' +
51+
'&TILEROW=' +
52+
'{y}' +
53+
'&TILEMATRIX=' +
54+
'{z}' +
55+
'&tk=' +
56+
tiandituKey
57+
],
58+
//栅格瓦片的分辨率
59+
tileSize: 256
60+
},
61+
'tianditu-4326-symbol': {
62+
//来源类型为栅格瓦片
63+
type: 'raster',
64+
tiles: [
65+
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
66+
'http://t' +
67+
Math.round(Math.random() * 7) +
68+
'.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
69+
'&TILECOL=' +
70+
'{x}' +
71+
'&TILEROW=' +
72+
'{y}' +
73+
'&TILEMATRIX=' +
74+
'{z}' +
75+
'&tk=' +
76+
tiandituKey
77+
],
78+
//栅格瓦片的分辨率
79+
tileSize: 256
80+
}
81+
},
82+
layers: [
83+
{
84+
id: 'tianditu-4326-vector',
85+
type: 'raster',
86+
source: 'tianditu-4326-vector',
87+
minzoom: 0,
88+
maxzoom: 22
89+
},
90+
{
91+
id: 'tianditu-4326-symbol',
92+
type: 'raster',
93+
source: 'tianditu-4326-symbol',
94+
minzoom: 0,
95+
maxzoom: 22
96+
}
97+
]
98+
},
99+
center: [116.35, 30.92]
100+
});
101+
102+
let fps = new mapboxgl.FpsControl(/* { graphHeight: 40, background: '#1890ff', color: '#ffffff' } */);
103+
map.addControl(fps);
104+
</script>
105+
</body>
106+
</html>

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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+
v-bind:access-token="accessToken"
27+
v-bind:map-style="mapStyle"
28+
v-bind:zoom="mapZoom"
29+
v-bind:center="outerCenter"
30+
v-bind:crs="mapCrs"
31+
v-on:load="handleMapLoad"
32+
>
33+
<mapbox-ogc-wmts-layer v-bind:layer="layerWmts" v-bind:layer-id="layerWmtsId" v-bind:source-id="sourceWmtsId" v-bind:url="wmtsurl">
34+
</mapbox-ogc-wmts-layer>
35+
<mapbox-raster-layer
36+
v-bind:layer="layerRaster"
37+
v-bind:layer-id="layerRasterId"
38+
v-bind:source="sourceRaster"
39+
v-bind:source-id="sourceRasterId"
40+
>
41+
</mapbox-raster-layer>
42+
<mapbox-fps-control> </mapbox-fps-control>
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=img_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+
fpsoptions: {
76+
background: 'rgba(0,0,0,0.9)',
77+
barWidth: 4,
78+
color: '#7cf859',
79+
font: 'Monaco, Consolas, Courier, monospace',
80+
graphHeight: 60,
81+
graphWidth: 120,
82+
graphTop: 0,
83+
graphRight: 5,
84+
width: 130
85+
}
86+
};
87+
},
88+
methods: {
89+
handleMapLoad(payload) {
90+
this.map = payload.map;
91+
}
92+
}
93+
});
94+
</script>
95+
</body>
96+
</html>

‎website/public/static/demo/mapboxgl/gallery/control/fps-control.png‎

120 KB
Loading

‎website/public/static/demo/mapboxgl/gallery/vue/vue-control/fps.png‎

312 KB
Loading

‎website/public/static/demo/mapboxgl/markdown/control/fps-control.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# 参数
2+
3+
| 名称 | 说明 | 类型 | 默认 |
4+
| :---------- | :------------- | :----- | :----------------------------------- |
5+
| background | 背景色 | 颜色值 | rgba(0,0,0,0.9) |
6+
| barWidth | 每帧显示宽度 | 数值型 | 4 |
7+
| color | 字体颜色 | 颜色值 | #7cf859 |
8+
| font | 字体 | 字符串 | Monaco, Consolas, Courier, monospace |
9+
| graphHeight | 绘制内容高度 | 数值型 | 60 |
10+
| graphWidth | 绘制内容宽度 | 数值型 | 120 |
11+
| graphTop | 绘制内容上间距 | 数值型 | 0 |
12+
| graphRight | 绘制内容右间距 | 数值型 | 5 |
13+
| width | 整体宽度 | 数值型 | 130 |
14+
15+
```javascript
16+
{
17+
background: "rgba(0,0,0,0.9)",
18+
barWidth: 4 * dpr,
19+
color: "#7cf859",
20+
font: "Monaco, Consolas, Courier, monospace",
21+
graphHeight: 60 * dpr,
22+
graphWidth: 120 * dpr,
23+
graphTop: 0,
24+
graphRight: 5 * dpr,
25+
width: 130 * dpr,
26+
};
27+
```

0 commit comments

Comments
 (0)