10. Line 线图层

10. Line 线图层

概述

Line 图层用于渲染线要素（LineString），常用于道路、轨迹、边界等场景。本节学习：

• Line 图层基本用法
• line-width / line-color / line-dasharray / line-cap / line-join 属性
• 路线轨迹绘制实战

---

基本用法

map.addLayer({
  id: 'route-line',
  type: 'line',
  source: 'my-geojson',
  layout: {
    'line-cap': 'round',
    'line-join': 'round'
  },
  paint: {
    'line-color': '#1890ff',
    'line-width': 3
  }
})

---

Paint 属性

属性	类型	默认值	说明
line-color	color	#000000	线颜色
line-width	number	1	线宽（像素）
line-opacity	number	1	透明度
line-dasharray	number[]	无	虚线模式 [实线段, 空白段]
line-blur	number	0	模糊半径
line-gap-width	number	0	线中间的间隙宽度
line-offset	number	0	线偏移（像素）
line-translate	[x, y]	[0, 0]	几何偏移
line-gradient	expression	无	线渐变色

line-dasharray 虚线

paint: {
  'line-dasharray': [4, 2],       // 4px 实线 + 2px 空白
  // 'line-dasharray': [2, 2],    // 等距虚线
  // 'line-dasharray': [4, 2, 1, 2], // 长短交替虚线
}

line-gradient 渐变

// 需要数据源启用 lineMetrics
map.addSource('route', {
  type: 'geojson',
  data: routeGeoJSON,
  lineMetrics: true  // ⚠️ 必须启用
})

map.addLayer({
  id: 'route-gradient',
  type: 'line',
  source: 'route',
  paint: {
    'line-width': 6,
    'line-gradient': [
      'interpolate', ['linear'], ['line-progress'],
      0, '#1890ff',
      0.5, '#52c41a',
      1, '#f5222d'
    ]
  }
})

---

Layout 属性

属性	说明	可选值
line-cap	线端样式	'butt' / 'round' / 'square'
line-join	线连接样式	'bevel' / 'round' / 'miter'
line-sort-key	排序键	number
visibility	显隐	'visible' / 'none'

line-cap 线端样式

• butt：平切（默认）
• round：圆头
• square：方头（比 butt 多出半个线宽）

line-join 连接样式

• miter：尖角（默认）
• round：圆角
• bevel：斜切

---

本课小结

• Line 图层渲染 LineString 和 MultiLineString 要素
• line-dasharray 创建虚线，line-gradient 创建渐变线
• line-cap 控制线端样式，line-join 控制连接样式
• 渐变线需要在数据源中启用 lineMetrics: true

---

📌 上一节：09. Fill 填充图层 📌 下一节：11. Symbol 符号图层