# 增加图层的三种写法

提示

以下三种写法效果一样,只是封装程度不同

以增加线图层为例

线数据示例如下

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

# 写法一

提示

属性用基于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

# 写法二

提示

属性用驼峰式大小写,不用区分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

# 写法三

提示

更进一步简化,封装省了传递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