# 增加图层的三种写法
提示
以下三种写法效果一样，只是封装程度不同
以增加线图层为例
线数据示例如下
var geoLines = {
"type": "LineString",
"properties":{
"prop0": "value0"
},
"coordinates": [
[
10,
30
],
[
50,
30
],
[
110,
40
]
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 写法一
提示
属性用基于kebab-case写法
map.addSource("lines", {
type: "geojson",
data: geoLines
});
map.addLayer({
id: 'route',
source: 'lines',
type: 'line',
"layout": {
"line-cap": "square", //butt 尖头，round 圆头，square平头
"line-join": "round" //bevel平拐，round 圆拐，miter棱拐
},
"paint": {
"line-width": 20, //宽度
"line-color": "#FF0000", //颜色
"line-opacity": 0.8 //透明度
}})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 写法二
提示
属性用驼峰式大小写，不用区分layout还是paint属性，更详细的写法参考数据源和图层
map.addGeoJSONSource("lines", geoLines);
map.addLineLayer("route", "lines", {
lineCap: "square", //butt 尖头，round 圆头，square平头
lineJoin: "round", //bevel平拐，round 圆拐，miter棱拐
lineWidth: 20, //宽度
lineColor: "#FF0000", //颜色
lineOpacity: 0.8 //透明度
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 写法三
提示
更进一步简化，封装省了传递sourceID和layerID
let polylines = new vjmap.Polyline({
data: geoLines,
lineCap: "square", //butt 尖头，round 圆头，square平头
lineJoin: "round", //bevel平拐，round 圆拐，miter棱拐
lineWidth: 20, //宽度
lineColor: "#FF0000", //颜色
lineOpacity: 0.8 //透明度
});
polylines.addTo(map);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9