LineLayer

线图层

shape

线图层支持 4 种 shape

  • line 绘制路径图，
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
  • arc3d 3d 弧线地图 3D 视角

⚠️ 弧线只需要设置起始点坐标即可

  1.         new LineLayer()
  2.         .source(data, {
  3.           parser: {
  4.             type: 'csv',
  5.             x: 'lng1',
  6.             y: 'lat1',
  7.             x1: 'lng2',
  8.             y1: 'lat2',
  9.           }
  10.         })

如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

  1. {
  2.   "type": "FeatureCollection",
  3.   "features": [
  4.     {
  5.       "type": "Feature",
  6.       "properties": {},
  7.       "geometry": {
  8.         "type": "LineString",
  9.         "coordinates": [
  10.           [
  11.             106.5234375,
  12.             57.51582286553883
  13.           ],
  14.           [
  15.             136.40625,
  16.             61.77312286453146
  17.           ]
  18.         ]
  19.       }
  20.     }
  21.   ]
  22. }

size

线图层 可以设置高度

  • size 类型为 number 则表示 line 的宽度
  • size 类型为 [number , number] 分别表示宽度和高度
  1. lineLayer.size(1); // 线的宽度为 1
  2. lineLayer.size([1, 2]); // 宽度为1，高度2

style

  • lineType dash | solid 线类型实线和虚线
  • dashArray 虚线配置项 [ 5, 5] 
  1. layer.style({
  2.   lineType: 'dash',
  3.   dashArray: [5, 5],
  4. });