Mapbox中interpolate与match表达式结合实现图标缩放异常问题

你当前的代码把match嵌套在interpolate的每个停止点中，这会导致每个缩放级别下的图标大小都是match返回的固定值，没有将Type对应的尺寸差异与缩放插值逻辑真正结合起来。正确的做法应该是先通过match获取对应Type的基础尺寸系数，再乘以由interpolate计算出的缩放因子，这样就能同时实现按Type区分图标大小、随缩放级别动态调整的效果。

修正后的代码示例 #

map.current.addLayer({
  id: 'environment-items',
  type: 'symbol',
  source: 'environment-items',
  layout: {
    // ... 其他布局配置
    'icon-size': [
      '*',
      // 根据Type获取对应基础尺寸系数
      ['match', ['get', 'Type'],
        ...environment_items.flatMap(({ name, size }) => [name, size]),
        1 // 默认尺寸系数
      ],
      // 计算随缩放变化的基础因子（保留你原有的缩放逻辑）
      ['interpolate',
        ['exponential', 2],
        ['zoom'],
        0, 0.05 * Math.pow(2, 0 - viewport.baseZoom),
        24, 0.05 * Math.pow(2, 24 - viewport.baseZoom)
      ]
    ]
  }
});

逻辑说明 #

1. match部分：根据要素的Type字段，返回预先定义的尺寸系数（即environment_items中的size值），默认系数设为1保证兼容未匹配的类型。
2. interpolate部分：保留你原有的缩放逻辑，计算当前缩放级别下的基础缩放因子。
3. 乘法运算：将Type对应的尺寸系数与缩放因子相乘，最终得到的大小既实现了不同Type的图标差异化，又能随缩放级别动态调整。

原代码不符合预期的原因 #

原代码中，每个缩放停止点的match都返回一个固定的缩放计算值，所有Type在该缩放级别下的大小完全一致，根本没有用到environment_items中的size字段来区分尺寸，完全偏离了你的需求。

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