# 常见图层
# 绘图图层
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "point1",
"color": "#00ffff",
"icon": "icon1"
},
"geometry": {
"coordinates": [
6971.5378667085715,
14385.014943907285
],
"type": "Point"
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"name": "polyline1",
"color": "#00ffff"
},
"geometry": {
"coordinates": [
[
3006.0952985307595,
15198.972934052355
],
[
12606.64046359223,
9285.59366571666
],
[
4745.324495099878,
3720.060236694666
],
[
3006.0952985307595,
15198.972934052355
]
],
"type": "LineString"
}
},
{
"id": "3",
"type": "Feature",
"properties": {
"name": "polygon1",
"color": "#ff00ff"
},
"geometry": {
"coordinates": [
[
[
19841.833921319492,
13807.589576796912
],
[
19841.833921319492,
4207.0444117340885
],
[
26172.62819683108,
4207.0444117340885
],
[
26172.62819683108,
13807.589576796912
],
[
19841.833921319492,
13807.589576796912
]
]
],
"type": "Polygon"
}
}
]
}
map.getDrawLayer().set(map.toLngLat(data));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
# 热力图层
let heatmapLayer = new vjmap.Heatmap({
data: geoDatas,
// heatmapWeight：表示一个点对热力图权重的贡献，在贡献越大的地方热力图显示应该越明显
heatmapWeight: [
'interpolate',
['linear'],
['get', 'value'],
0, // 因为上面用了0,100，最小和最大值，把这两个最小和最大值归化到0,1区间
0,
100,
1
],
// heatmapRadius：热力图的一个点计算权重的时候计算的点的半径，单位为像素，默认为30
heatmapRadius: [
'interpolate',
['linear'],
['zoom'],
0, //0级别
10, //半径10
9, // 9级别 (其余级别，线性插值)
50 // 半径50
],
// heatmapColor：热力图的颜色，设置在各个热力图的数值上是什么颜色
heatmapColor: [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(33,102,172,0)',
0.2,
'rgb(103,169,207)',
0.4,
'rgb(209,229,240)',
0.6,
'rgb(253,219,199)',
0.8,
'rgb(239,138,98)',
1,
'rgb(178,24,43)'
],
//heatmapIntensity：热力图强度，有点类似于heatmapWeight属性，但是该属性是设置整体上热力图的强度
heatmapIntensity: [
'interpolate',
['linear'],
['zoom'],
0,
1,
9,
3
],
//heatmapOpacity：热力图的透明度
heatmapOpacity: [
'interpolate',
['linear'],
['zoom'],
7,
1,
9,
0
]
});
heatmapLayer.addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# 背景遮盖层
const background = new vjmap.BackgroundLayer({
backgroundColor: "yellow",
backgroundOpacity: 0.4
}
)
background.addTo(map);
1
2
3
4
5
6
2
3
4
5
6
# 自定义水印背景层
// 注意图片大小必须为2的指数倍，如(2, 4, 8, ..., 512)
await map.loadImageEx(`testwatermark`, `https://vjmap.com/static/assets/images/testwatermark.png`);
let layers = map.getStyle().layers
const background = new vjmap.BackgroundLayer({
backgroundPattern: "testwatermark",
backgroundOpacity: 0.3
})
background.addTo(map);
// 把这个图层放至所有图层的最下面
map.moveLayer(background.layerId, layers[0].id)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 栅格图像图层
const mapBounds = map.getGeoBounds(0.001);
const coords = map.toLngLat(mapBounds.toPointArray());
map.addImageSource("park", {
url: "https://vjmap.com/static/assets/images/park.jpg",
coordinates: coords
})
map.addRasterLayer("parkLayer", "park", {
rasterOpacity: 0.8,
minzoom: 7,
maxzoom: 20
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 天空图层
const sky = new vjmap.SkyLayer({
skyType: 'gradient',
skyGradient: [
'interpolate',
['linear'],
['sky-radial-progress'],
0.8,
'rgba(135, 206, 235, 1.0)',
1,
'rgba(0,0,0,0.1)'
],
skyGradientCenter: [0, 0],
skyGradientRadius: 90,
skyOpacity: [
'interpolate',
['exponential', 0.1],
['zoom'],
0,
0.3,
22,
1
]
}
)
sky.addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 唯杰地图三维图层
# 视频图层
map.addSource("butterfly_src", {
type: 'video',
urls: ["https://vjmap.com/static/assets/video/butterfly.mp4"],
coordinates: map.toLngLat(mapBounds.toPointArray())
});
map.addLayer({
'id': 'video_layer',
'type': 'raster',
'source': 'butterfly_src'
});
let video = map.getSource('butterfly_src');
// 播放
// video.play();
// 暂停
// video.pause();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15