Skip to content

Commit 48186cd

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【新增MapboxGL的交互组件以及图层组件】
1 parent 411d2e7 commit 48186cd

80 files changed

Lines changed: 3317 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -945,6 +945,54 @@
945945
"folder": "vue",
946946
"leaffolder": false,
947947
"childs": [
948+
{
949+
"name": "Vue-图层",
950+
"iconfont": "icon_layers",
951+
"folder": "vue-layer",
952+
"leaffolder": true,
953+
"childs": [
954+
{
955+
"name": "GeoJSON图层",
956+
"file": "geojsonlayer",
957+
"diffcult": "2",
958+
"detail": "",
959+
"icon": "geojsonlayer.png",
960+
"update": "最后更新时间：2021-01-07"
961+
},
962+
{
963+
"name": "图像图层",
964+
"file": "imagelayer",
965+
"diffcult": "2",
966+
"detail": "",
967+
"icon": "imagelayer.png",
968+
"update": "最后更新时间：2021-01-07"
969+
},
970+
{
971+
"name": "画布图层",
972+
"file": "canvaslayer",
973+
"diffcult": "2",
974+
"detail": "",
975+
"icon": "canvaslayer.png",
976+
"update": "最后更新时间：2021-01-07"
977+
},
978+
{
979+
"name": "视频图层",
980+
"file": "videolayer",
981+
"diffcult": "2",
982+
"detail": "",
983+
"icon": "videolayer.png",
984+
"update": "最后更新时间：2021-01-07"
985+
},
986+
{
987+
"name": "栅格图层",
988+
"file": "rasterlayer",
989+
"diffcult": "2",
990+
"detail": "",
991+
"icon": "rasterlayer.png",
992+
"update": "最后更新时间：2021-01-07"
993+
}
994+
]
995+
},
948996
{
949997
"name": "Vue-栅格",
950998
"iconfont": "iconraster",
@@ -975,6 +1023,38 @@
9751023
"icon": "raster.png",
9761024
"update": "最后更新时间：2020-11-27"
9771025
},
1026+
{
1027+
"name": "ArcGIS图层",
1028+
"file": "arcgislayer",
1029+
"diffcult": "2",
1030+
"detail": "",
1031+
"icon": "arcgislayer.png",
1032+
"update": "最后更新时间：2021-01-07"
1033+
},
1034+
{
1035+
"name": "Google图层",
1036+
"file": "googlelayer",
1037+
"diffcult": "2",
1038+
"detail": "",
1039+
"icon": "googlelayer.png",
1040+
"update": "最后更新时间：2021-01-07"
1041+
},
1042+
{
1043+
"name": "天地图图层",
1044+
"file": "tdtlayer",
1045+
"diffcult": "2",
1046+
"detail": "",
1047+
"icon": "tdtlayer.png",
1048+
"update": "最后更新时间：2021-01-07"
1049+
}
1050+
]
1051+
},
1052+
{
1053+
"name": "Vue-OGC",
1054+
"iconfont": "icon_ogc",
1055+
"folder": "vue-ogc",
1056+
"leaffolder": true,
1057+
"childs": [
9781058
{
9791059
"name": "WMTS瓦片",
9801060
"file": "wmts",

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

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
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-GeoJSON</title>
7+
<script include="vue" exclude="plugin" 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+
<mapbox-map
24+
id="map"
25+
:access-token="accessToken"
26+
:map-style="mapStyle"
27+
:zoom="mapZoom"
28+
:center="outerCenter"
29+
:crs="mapCrs"
30+
v-on:load="handleMapLoad">
31+
<mapbox-ogc-wmts-layer
32+
:layer="layerWmts"
33+
:layer-id="layerWmtsId"
34+
:source-id="sourceWmtsId"
35+
:url="wmtsurl">
36+
</mapbox-ogc-wmts-layer>
37+
<canvas id="canvasID" width="400" height="400">Canvas not supported</canvas>
38+
<mapbox-canvas-layer
39+
:source-id="canvasSourceId"
40+
:source="canvasSource"
41+
:layer-id="canvasLayerId"
42+
:layer="canvasLayer"
43+
v-on:layer-source-loading="handCanvasLoad">
44+
</mapbox-canvas-layer>
45+
</mapbox-map>
46+
</div>
47+
<script>
48+
new Vue({
49+
el: '#app',
50+
data() {
51+
return {
52+
mapStyle: {
53+
version: 8,
54+
sources: {},
55+
layers: []
56+
},
57+
mapZoom: 5,
58+
outerCenter: [116.3, 40.5],
59+
mapCrs: 'EPSG:4326',
60+
61+
layerWmts: {},
62+
layerWmtsId: 'ogcwmts_layerId',
63+
sourceWmtsId: 'ogcwmts_sourceId',
64+
wmtsurl: 'http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
65+
66+
canvasSourceId: 'canvassourceid',
67+
canvasSource: {
68+
type: 'canvas',
69+
canvas: 'canvasID',
70+
coordinates: [
71+
[108.7381, 45.6339],
72+
[126.0011, 45.6339],
73+
[126.0011, 34.2583],
74+
[108.7381, 34.2583]
75+
],
76+
animate: true
77+
},
78+
canvasLayerId: 'canvaslayerid',
79+
canvasLayer: {
80+
source: 'canvassourceid',
81+
type: 'raster'
82+
}
83+
};
84+
},
85+
methods: {
86+
handleMapLoad(payload) {
87+
this.map = payload.map;
88+
},
89+
handCanvasLoad() {
90+
console.log('load');
91+
this.initCanvas();
92+
},
93+
initCanvas() {
94+
var canvas = document.getElementById('canvasID');
95+
var ctx = canvas.getContext('2d');
96+
var circles = [];
97+
var radius = 20;
98+
99+
function Circle(x, y, dx, dy, radius, color) {
100+
this.x = x;
101+
this.y = y;
102+
this.dx = dx;
103+
this.dy = dy;
104+
this.radius = radius;
105+
this.draw = function () {
106+
ctx.beginPath();
107+
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
108+
ctx.strokeStyle = color;
109+
ctx.stroke();
110+
};
111+
this.update = function () {
112+
if (this.x + this.radius > 400 || this.x - this.radius < 0) {
113+
this.dx = -this.dx;
114+
}
115+
if (this.y + this.radius > 400 || this.y - this.radius < 0) {
116+
this.dy = -this.dy;
117+
}
118+
this.x += this.dx;
119+
this.y += this.dy;
120+
this.draw();
121+
};
122+
}
123+
for (var i = 0; i < 25; i++) {
124+
var color = '#' + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6);
125+
var x = Math.random() * (400 - radius * 2) + radius;
126+
var y = Math.random() * (400 - radius * 2) + radius;
127+
var dx = (Math.random() - 0.5) * 2;
128+
var dy = (Math.random() - 0.5) * 2;
129+
circles.push(new Circle(x, y, dx, dy, radius, color));
130+
}
131+
function animate() {
132+
requestAnimationFrame(animate);
133+
ctx.clearRect(0, 0, 400, 400);
134+
for (var r = 0; r < 25; r++) {
135+
circles[r].update();
136+
}
137+
}
138+
animate();
139+
}
140+
}
141+
});
142+
</script>
143+
</body>
144+
</html>

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

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
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-GeoJSON</title>
7+
<script include="vue" exclude="plugin" 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+
<mapbox-map
24+
id="map"
25+
:access-token="accessToken"
26+
:map-style="mapStyle"
27+
:zoom="mapZoom"
28+
:center="outerCenter"
29+
:crs="mapCrs"
30+
v-on:load="handleMapLoad"
31+
>
32+
<mapbox-ogc-wmts-layer
33+
:layer="layerWmts"
34+
:layer-id="layerWmtsId"
35+
:source-id="sourceWmtsId"
36+
:url="wmtsurl">
37+
</mapbox-ogc-wmts-layer>
38+
</mapbox-raster-layer>
39+
<mapbox-geojson-layer
40+
:source="geojsonSource"
41+
:source-id="geojsonSourceId"
42+
:layer="circleLayer"
43+
:layer-id="circleLayerId">
44+
</mapbox-geojson-layer>
45+
<mapbox-geojson-layer
46+
:source="geojsonSource"
47+
:source-id="geojsonSourceId"
48+
:layer="lineLayer"
49+
:layer-id="lineLayerId">
50+
</mapbox-geojson-layer>
51+
<mapbox-geojson-layer
52+
:source="geojsonSource"
53+
:source-id="geojsonSourceId"
54+
:layer="fillLayer"
55+
:layer-id="fillLayerId">
56+
</mapbox-geojson-layer>
57+
</mapbox-map>
58+
</div>
59+
<script>
60+
var geojson = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[114.28939819335936,30.594183452544694]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[114.34776306152344,30.623436511269382],[114.32510375976562,30.63909360759635],[114.30673599243164,30.634958017061198],[114.29180145263672,30.629640569460406],[114.28339004516601,30.627424880048103],[114.26467895507812,30.620777507443577],[114.24613952636719,30.616050209185243],[114.23566818237304,30.61073172273802]]}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[114.33454513549805,30.479893814659587],[114.38587188720703,30.479893814659587],[114.38587188720703,30.504596494227247],[114.33454513549805,30.504596494227247],[114.33454513549805,30.479893814659587]]]}}]};
61+
62+
new Vue({
63+
el: '#app',
64+
data() {
65+
return {
66+
mapStyle: {
67+
version: 8,
68+
sources: {},
69+
layers: []
70+
},
71+
mapZoom: 10,
72+
outerCenter: [114.3, 30.5],
73+
mapCrs: 'EPSG:4326',
74+
75+
layerWmts: {},
76+
layerWmtsId: 'ogcwmts_layerId',
77+
sourceWmtsId: 'ogcwmts_sourceId',
78+
wmtsurl: 'http://t0.tianditu.com/DataServer?T=img_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
79+
80+
81+
geojsonSourceId: "geojsonCollections",
82+
geojsonSource: {
83+
type: 'geojson',
84+
data: geojson
85+
},
86+
circleLayerId: 'circleid',
87+
circleLayer: {
88+
"type": "circle",
89+
"source": "geojsonCollections", //必须和上面的geojsonCollections一致
90+
"filter": ["==", "$type", "Point"], //关键点：$type是固定语法，类型是Point、LineString、Polygon
91+
"paint": {
92+
"circle-radius": 15, //半径
93+
"circle-color": "#FFFFFF", //颜色
94+
"circle-opacity": 0.8, //透明度
95+
"circle-stroke-width": 5, //轮廓线宽度
96+
"circle-stroke-color": "#52B883", //轮廓线颜色
97+
"circle-stroke-opacity": 0.7 //轮廓线透明度
98+
//"circle-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
99+
}
100+
},
101+
lineLayerId: 'lineid',
102+
lineLayer: {
103+
"type": "line",
104+
"source": "geojsonCollections", //必须和上面的geojsonCollections一致
105+
"filter": ["==", "$type", "LineString"], //关键点：$type是固定语法，类型是Point、LineString、Polygon
106+
"layout": {
107+
"line-cap": "square", //butt 尖头，round 圆头，square平头
108+
"line-join": "round", //bevel平拐，round 圆拐，miter棱拐
109+
"line-miter-limit": 2, //棱拐的限制，一般用不上
110+
"line-round-limit": 1.05, //圆拐的限制，一般用不上
111+
"visibility": "visible", //是否可见 visible / none
112+
},
113+
"paint": {
114+
"line-width": 10, //宽度
115+
"line-color": "#52B883", //颜色
116+
"line-opacity": 1.0, //透明度
117+
"line-gap-width": 3, //线的沟宽，如果有一条线会变成2条线，中间有条沟
118+
"line-offset": 0, //尽量少用，如果这个值相对大的话在拐角处很容易变形变胖
119+
"line-dasharray": [5, 2], //实线、虚线的组合，可以表示铁路线等
120+
"line-blur": 5, //模糊度，和宽度配合使用，当宽度20，模糊度10时，出现边线模糊的效果，该值要小于线宽度
121+
// "line-pattern": "picture_name", //线的拉伸图片类型，一定要与对应的样式库的图片名字一一对应
122+
//"line-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
123+
}
124+
},
125+
fillLayerId: 'fillid',
126+
fillLayer: {
127+
"type": "fill",
128+
"source": "geojsonCollections", //必须和上面的geojsonCollections一致
129+
"filter": ["==", "$type", "Polygon"], //关键点：$type是固定语法，类型是Point、LineString、Polygon
130+
"layout": {
131+
"visibility": "visible" //是否可见 visible / none
132+
},
133+
"paint": {
134+
"fill-antialias": true, //抗锯齿，true表示针对边界缝隙进行填充
135+
"fill-color": "#FFFFFF", //颜色
136+
"fill-opacity": 0.8, //透明度
137+
"fill-outline-color": "#52B883", //边线颜色，没错,确实没有边线宽度这个选项
138+
//"fill-pattern":"picture_name", //线的拉伸图片类型，一定要与对应的样式库的图片名字一一对应
139+
//"fill-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
140+
}
141+
}
142+
};
143+
},
144+
methods: {
145+
handleMapLoad(payload) {
146+
this.map = payload.map;
147+
}
148+
}
149+
});
150+
</script>
151+
</body>
152+
</html>

0 commit comments

Comments
 (0)