（六）Mapbox GL 中图层`layout`的使用方法和使用场景初识

在 Mapbox GL 中，layout 是图层 (Layer) 的重要配置，用于控制图层的布局和样式。它决定了元素如何在地图上呈现。下面通过代码示例和常见使用场景来详细讲解 layout 的配置和使用。

---

常见图层类型及 layout 配置项

1. Symbol 图层

主要用于显示点标记、图标或文字。

常用的 layout 配置项：

• icon-image: 设置图标的名称。
• icon-size: 图标缩放比例。
• text-field: 文本内容。
• text-size: 文本大小。
• text-anchor: 文本锚点位置。
• text-offset: 文本的偏移量。

代码示例：

map.addLayer({
  id: 'symbol-layer',
  type: 'symbol',
  source: 'points-source', // 数据源
  layout: {
    'icon-image': 'marker-15', // 使用内置图标
    'icon-size': 1.5,          // 图标放大1.5倍
    'text-field': '{name}',    // 显示属性数据中的 name 字段
    'text-size': 12,           // 文本大小
    'text-anchor': 'top',      // 文本显示在图标上方
    'text-offset': [0, 0.6]    // 偏移一定距离避免重叠
  }
});

应用场景：

• 地图标记点（如商店位置）。
• 显示地名、区域名称或标签。

---

2. Line 图层

用于绘制线条，如道路、河流。

常用的 layout 配置项：

• line-cap: 线条的端点样式，可选值为 butt（平端）、round（圆端）、square（方端）。
• line-join: 线条的拐角样式，可选值为 bevel（斜角）、round（圆角）、miter（斜接）。
• visibility: 控制图层是否可见。

代码示例：

map.addLayer({
  id: 'line-layer',
  type: 'line',
  source: 'lines-source', // 数据源
  layout: {
    'line-cap': 'round',     // 圆角端点
    'line-join': 'round',    // 圆角拐点
    'visibility': 'visible' // 默认显示图层
  },
  paint: {
    'line-color': '#ff0000', // 红色线条
    'line-width': 4          // 线条宽度
  }
});

应用场景：

• 绘制道路、河流、边界。
• 展示交通路径或线路规划。

---

3. Fill 图层

用于绘制多边形区域，如湖泊、建筑区域。

常用的 layout 配置项：

• visibility: 控制图层的显示和隐藏。

代码示例：

map.addLayer({
  id: 'fill-layer',
  type: 'fill',
  source: 'polygons-source', // 数据源
  layout: {
    'visibility': 'visible' // 显示图层
  },
  paint: {
    'fill-color': '#00ff00', // 绿色填充
    'fill-opacity': 0.5      // 半透明
  }
});

应用场景：

• 显示区域边界（如行政区划）。
• 表示生态区域、禁行区等。

---

4. Circle 图层

用于绘制点数据，且支持根据属性数据动态调整点样式。

常用的 layout 配置项：

• visibility: 控制图层显示与隐藏。

代码示例：

map.addLayer({
  id: 'circle-layer',
  type: 'circle',
  source: 'points-source', // 数据源
  layout: {
    'visibility': 'visible' // 显示图层
  },
  paint: {
    'circle-radius': 8,         // 圆点半径
    'circle-color': '#0000ff',  // 蓝色圆点
    'circle-opacity': 0.8       // 半透明
  }
});

应用场景：

• 热点展示（如POI点）。
• 动态大小点样式（如人口密度）。

---

动态控制 layout

可以通过 setLayoutProperty 动态修改 layout 属性。

示例：动态显示或隐藏图层

// 隐藏图层
map.setLayoutProperty('symbol-layer', 'visibility', 'none');

// 显示图层
map.setLayoutProperty('symbol-layer', 'visibility', 'visible');

示例：动态调整文本大小

map.setLayoutProperty('symbol-layer', 'text-size', 18);

---

总结

1. layout 是 Mapbox GL 图层的重要部分，控制了元素的布局和可见性。
2. 常见图层类型包括 Symbol、Line、Fill 和 Circle，不同类型的图层支持不同的 layout 配置。
3. 动态调整 layout 属性可以实现交互效果，例如切换图层显示、调整图层样式。