第07章 - 图层 Layer 体系详解

// 错误：新图层被追加到最上面，把 label 图层盖住了
map.addLayer({id: 'highlight', type: 'fill', source: 'districts', paint: {'fill-color': '#ff0'}});

// 正确：插到某个已有图层之前
map.addLayer(
  {id: 'highlight', type: 'fill', source: 'districts', paint: {'fill-color': '#ff0'}},
  'label-city' // before 参数：插到该图层之前
);

// 不写 before 时，也可以用 moveLayer 事后调整
map.moveLayer('highlight', 'label-city');

// 面
map.addLayer({
  id: 'district-fill', type: 'fill', source: 'districts',
  paint: {'fill-color': '#9ecae1', 'fill-opacity': 0.6}
});

// 边（用同一个 source，几何会被复用）
map.addLayer({
  id: 'district-outline', type: 'line', source: 'districts',
  paint: {'line-color': '#3182bd', 'line-width': 1.5}
});

map.addLayer({
  id: 'road-outline', type: 'line', source: 'roads', 'source-layer': 'transportation',
  layout: {'line-join': 'round', 'line-cap': 'round'},
  paint: {'line-color': '#5b5b5b', 'line-width': 7}
});
map.addLayer({
  id: 'road-casing', type: 'line', source: 'roads', 'source-layer': 'transportation',
  layout: {'line-join': 'round', 'line-cap': 'round'},
  paint: {'line-color': '#ffffff', 'line-width': 5}
});

map.addLayer({
  id: 'poi-label',
  type: 'symbol',
  source: 'poi',
  layout: {
    'text-field': ['get', 'name'],
    'text-font': ['Noto Sans Regular'],
    'text-size': ['interpolate', ['linear'], ['zoom'], 10, 11, 16, 15],
    'text-max-width': 8,
    'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
    'text-radial-offset': 0.6,
    'icon-image': ['get', 'icon'],
    'icon-size': 0.8,
    'symbol-sort-key': ['get', 'rank']
  },
  paint: {
    'text-color': '#222',
    'text-halo-color': '#fff',
    'text-halo-width': 1.4,
    'icon-opacity': 0.95
  }
});

map.setLayoutProperty('poi-label', 'visibility', 'none');
map.setLayoutProperty('poi-label', 'visibility', 'visible');

// 只在 8 到 14 层显示
map.setLayerZoomRange('district-fill', 8, 14);

// 只设下限
map.setLayerZoomRange('district-fill', 8, null);

// 一次注册，之后只改状态
map.addLayer({
  id: 'road-line',
  type: 'line',
  source: 'roads',
  'source-layer': 'transportation',
  paint: {
    'line-color': [
      'case',
      ['boolean', ['feature-state', 'selected'], false],
      '#ff6b35', // 选中
      '#7a7a7a'  // 默认
    ],
    'line-width': [
      'case',
      ['boolean', ['feature-state', 'selected'], false],
      6,
      2
    ]
  }
});

// 选中
map.setFeatureState({source: 'roads', id: roadId}, {selected: true});

// 取消
map.removeFeatureState({source: 'roads', id: roadId}, 'selected');

// 点击拾取：限定图层与半径，性能最好
map.on('click', (e) => {
  const hits = map.queryRenderedFeatures(
    [[e.point.x - 5, e.point.y - 5], [e.point.x + 5, e.point.y + 5]],
    {layers: ['road-line', 'poi-label']}
  );
  console.log(hits.map((f) => [f.layer.id, f.properties.name]));
});

// 统计当前已加载的要素（不受 filter 影响）
const all = map.querySourceFeatures('roads', {sourceLayer: 'transportation'});
console.log('已加载要素数：', all.length);

const layerEvents = [
  'click', 'dblclick', 'mousemove',
  'mouseenter', 'mouseleave',
  'mouseover', 'mouseout', 'contextmenu'
];

for (const type of layerEvents) {
  map.on(type, 'poi-label', (e) => {
    // 只有点的位置落在该图层要素上才会进来
    console.log(type, e.features[0].properties);
  });
}

map.addLayer({
  id: 'building-3d',
  type: 'fill-extrusion',
  source: 'buildings',
  'source-layer': 'building',
  minzoom: 14,
  paint: {
    'fill-extrusion-color': [
      'interpolate', ['linear'], ['get', 'height'],
      0, '#d9d9d9',
      50, '#bdbdbd',
      200, '#969696'
    ],
    'fill-extrusion-height': ['get', 'height'],
    'fill-extrusion-base': ['get', 'min_height'],
    'fill-extrusion-opacity': 0.85,
    // 侧面明暗渐变，增强体积感（默认 true）
    'fill-extrusion-vertical-gradient': true
  }
});