Mapbox GL能否根据GeoJSON的properties属性值对要素进行图层分组？

Mapbox GL JS 没有内置和Leaflet LayerGroup 完全对等的API，你可以通过以下两种常用方案实现相同的分组控制能力：

方案1：按属性筛选+元数据标记（适合单源拆分分组场景） #

你可以将所有要素放在同一个GeoJSON数据源中，通过filter为每个分组生成独立图层，再用自定义元数据标记分组归属，后续批量控制显隐：

// 1. 先添加公共GeoJSON数据源
map.addSource('device-feed', {
  type: 'geojson',
  data: deviceFeed
});

// 2. 为每个分组创建对应图层，标记分组属性
const layerGroups = ['mine', 'public', 'private', 'favorite'];
layerGroups.forEach(group => {
  map.addLayer({
    id: `device-layer-${group}`,
    type: 'circle', // 可按需替换为fill/line/symbol等图层类型
    source: 'device-feed',
    // 只渲染relation属性匹配当前分组的要素
    filter: ['==', ['get', 'relation'], group],
    paint: {
      // 按需配置样式
      'circle-radius': 5,
      'circle-color': '#3887be'
    },
    // 自定义元数据标记分组归属
    metadata: {
      group: group
    }
  });
});

// 3. 封装分组显隐切换方法
function toggleLayerGroup(groupName, isVisible) {
  const visibility = isVisible ? 'visible' : 'none';
  // 遍历所有图层，统一修改对应分组的可见性
  map.getStyle().layers.forEach(layer => {
    if (layer.metadata?.group === groupName) {
      map.setLayoutProperty(layer.id, 'visibility', visibility);
    }
  });
}

// 调用示例
toggleLayerGroup('mine', false); // 隐藏mine分组
toggleLayerGroup('public', true); // 显示public分组

方案2：手动维护分组映射表（适合多图层混合分组场景） #

如果同一个分组下需要包含多个不同数据源、不同类型的图层（比如同时包含点图层、文字标注图层、面填充图层），可以自己维护分组和图层ID的映射关系，用法和Leaflet的LayerGroup更接近：

// 1. 初始化分组映射表，存储每个分组下的图层ID
const groupedLayers = {
  mine: [],
  public: [],
  private: [],
  favorite: []
};

// 2. 添加图层时，将对应图层ID存入对应分组
map.addLayer({
  id: 'mine-point-layer',
  type: 'circle',
  source: 'device-feed',
  filter: ['==', ['get', 'relation'], 'mine'],
  /* 其他样式配置 */
});
// 把图层ID加入分组
groupedLayers.mine.push('mine-point-layer');

map.addLayer({
  id: 'mine-label-layer',
  type: 'symbol',
  source: 'device-feed',
  filter: ['==', ['get', 'relation'], 'mine'],
  /* 其他样式配置 */
});
groupedLayers.mine.push('mine-label-layer');

// 3. 封装分组显隐切换方法
function toggleLayerGroup(groupName, isVisible) {
  const visibility = isVisible ? 'visible' : 'none';
  groupedLayers[groupName].forEach(layerId => {
    // 先校验图层是否存在，避免报错
    if (map.getLayer(layerId)) {
      map.setLayoutProperty(layerId, 'visibility', visibility);
    }
  });
}

两种方案都可以实现和你Leaflet代码完全一致的分组控制效果，可根据自己的业务场景选择。

内容的提问来源于stack exchange，提问作者Nenad