Skip to content

Commit 3f7daae

Browse files
author
潘卓然ParnDeedlit
committed
【站点】【MapboxGL】【新增mapboxgl的矢量瓦片组件】
1 parent 96ab9a5 commit 3f7daae

File tree

6 files changed

+235
-0
lines changed

6 files changed

+235
-0
lines changed

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,30 @@
147147
}
148148
]
149149
},
150+
{
151+
"name": "Vue-矢量瓦片",
152+
"iconfont": "iconraster",
153+
"folder": "vue-vectortile",
154+
"leaffolder": true,
155+
"childs": [
156+
{
157+
"name": "整体样式MVT",
158+
"file": "mvtstyle",
159+
"diffcult": "2",
160+
"detail": "",
161+
"icon": "mvtstyle.png",
162+
"update": "最后更新时间：2021-06-07"
163+
},
164+
{
165+
"name": "单图层",
166+
"file": "layer",
167+
"diffcult": "2",
168+
"detail": "",
169+
"icon": "layer.png",
170+
"update": "最后更新时间：2021-06-07"
171+
}
172+
]
173+
},
150174
{
151175
"name": "Vue-OGC",
152176
"iconfont": "icon_ogc",

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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,antd,v-contextmenu" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
9+
<style type="text/css">
10+
#app {
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+
<mapgis-web-map id="map" :map-style="mapStyle" :zoom="mapZoom" :center="outerCenter" :crs="mapCrs" v-on:load="handleMapLoad">
25+
<mapgis-arcgis-map-layer
26+
layer-id="ArcGIS地图图层"
27+
base-url="http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer">
28+
</mapgis-arcgis-map-layer>
29+
<mapgis-arcgis-tile-layer
30+
layer-id="ArcGIS瓦片图层"
31+
base-url="http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer" >
32+
</mapgis-arcgis-map-layer>
33+
<mapgis-document>
34+
</mapgis-document>
35+
</mapgis-web-map>
36+
</div>
37+
<script>
38+
new Vue({
39+
el: '#app',
40+
data() {
41+
return {
42+
mapStyle: {
43+
//设置版本号，一定要设置
44+
version: 8,
45+
//添加来源
46+
sources: {},
47+
//设置加载并显示来源的图层信息
48+
layers: []
49+
}, // 地图样式
50+
mapZoom: 3, // 地图初始化级数
51+
outerCenter: [116.39, 40.2], // 地图显示中心
52+
mapCrs: 'EPSG:3857'
53+
};
54+
},
55+
methods: {
56+
handleMapLoad(payload) {
57+
this.map = payload.map;
58+
}
59+
}
60+
});
61+
</script>
62+
</body>
63+
</html>

‎website/public/static/demo/vue-mapboxgl/example/vue-vectortile/layer.htm‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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-点</title>
7+
<script include="vue" exclude="plugin,mapboxgl" src="./static/libs/include-mapboxgl-local.js"></script>
8+
<style type="text/css">
9+
#main {
10+
margin: 0 0;
11+
width: 100%;
12+
height: 100vh;
13+
}
14+
#map {
15+
height: 100vh;
16+
width: 100%;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<div id="app">
23+
<mapgis-web-map id="map"
24+
:map-style="mapStyle"
25+
:zoom="mapZoom"
26+
:center="outerCenter"
27+
:crs="mapCrs"
28+
v-on:load="handleMapLoad"
29+
>
30+
<mapgis-vector-layer
31+
:layer="layerVector"
32+
:layer-id="layerVectorId"
33+
:source="sourceVector"
34+
:source-id="sourceVectorId">
35+
</mapgis-vector-layer>
36+
</mapgis-web-map>
37+
</div>
38+
<script>
39+
new Vue({
40+
el: '#app',
41+
data() {
42+
return {
43+
mapStyle: {
44+
version: 8, //设置版本号，一定要设置
45+
sources: {}, //添加来源
46+
layers: [], //设置加载并显示来源的图层信息
47+
//特别注意，这里是字体库，下面的sprite才是样式库
48+
glyphs: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/fonts/{fontstack}/{range}.pbf',
49+
//特别注意，这里是真正的图片样式库
50+
sprite: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/sprite'
51+
}, // 地图样式
52+
mapZoom: 3, // 地图初始化级数
53+
outerCenter: [114.39960479736327, 30.495722001885323], // 地图显示中心
54+
mapCrs: 'EPSG:4326',
55+
56+
sourceVectorId: 'vector_source_id',
57+
layerVectorId: 'china_bound_id',
58+
sourceVector: {
59+
type: 'geojson',
60+
data: 'http://develop.smaryun.com/static/data/geojson/china.geojson'
61+
},
62+
layerVector: {
63+
type: 'fill',
64+
source: 'vector_source_id', //必须和上面的layerVectorId一致
65+
paint: {
66+
'fill-antialias': true, //抗锯齿，true表示针对边界缝隙进行填充
67+
'fill-color': '#000000', //颜色
68+
'fill-opacity': 1.0, //透明度
69+
'fill-outline-color': '#FF0000' //边线颜色，没错,确实没有边线宽度这个选项
70+
}
71+
}
72+
};
73+
},
74+
methods: {
75+
handleMapLoad(payload) {
76+
let map = payload.map;
77+
}
78+
}
79+
});
80+
</script>
81+
</body>
82+
</html>

‎website/public/static/demo/vue-mapboxgl/example/vue-vectortile/mvtstyle.htm‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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-点</title>
7+
<script include="vue" exclude="plugin,mapboxgl" src="./static/libs/include-mapboxgl-local.js"></script>
8+
<style type="text/css">
9+
#main {
10+
margin: 0 0;
11+
width: 100%;
12+
height: 100vh;
13+
}
14+
#map {
15+
height: 100vh;
16+
width: 100%;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<div id="app">
23+
<mapgis-web-map id="map"
24+
:map-style="mapStyle"
25+
:zoom="mapZoom"
26+
:center="outerCenter"
27+
:crs="mapCrs"
28+
v-on:load="handleMapLoad"
29+
>
30+
<mapgis-mvt-style-layer
31+
:mvt-style="styleUrl"
32+
:mode="styleMode"
33+
>
34+
</mapgis-mvt-style-layer>
35+
</mapgis-web-map>
36+
</div>
37+
<script>
38+
new Vue({
39+
el: '#app',
40+
data() {
41+
return {
42+
mapStyle: {
43+
version: 8, //设置版本号，一定要设置
44+
sources: {}, //添加来源
45+
layers: [], //设置加载并显示来源的图层信息
46+
//特别注意，这里是字体库，下面的sprite才是样式库
47+
glyphs: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/fonts/{fontstack}/{range}.pbf',
48+
//特别注意，这里是真正的图片样式库
49+
sprite: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/sprite'
50+
}, // 地图样式
51+
mapZoom: 3, // 地图初始化级数
52+
outerCenter: [114.39960479736327, 30.495722001885323], // 地图显示中心
53+
mapCrs: 'EPSG:4326',
54+
styleUrl: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/styles/OSM全中国经纬度.json',
55+
styleMode: 'add', // add set
56+
};
57+
},
58+
methods: {
59+
handleMapLoad(payload) {
60+
let map = payload.map;
61+
}
62+
}
63+
});
64+
</script>
65+
</body>
66+
</html>

‎website/public/static/demo/vue-mapboxgl/gallery/vue-vectortile/layer.png‎

18.9 KB
Loading

‎website/public/static/demo/vue-mapboxgl/gallery/vue-vectortile/mvtstyle.png‎

91.8 KB
Loading

0 commit comments

Comments
 (0)