如何在MapboxGL中使用离散颜色填充地图而非默认插值颜色？

可以实现离散（非插值）的颜色填充，核心是用 MapboxGL 的 step 表达式替代默认的插值逻辑，step 专门用于处理离散区间的样式映射。

修改后的代码示例 #

map.on('load', function () {
      map.addSource('bb', { type: 'geojson', data: data, generateId: true});
      map.addLayer({
        'id': 'berlin',
        'type': 'fill',
        'source': 'bb',
        'paint': {
          'fill-color': [
            'step',
            ['get', 'some_numeric_val'], // 获取目标数值属性
            '#feebe2', // 数值 ≤4 时使用
            4, '#fbb4b9', // 数值 >4 且 ≤8 时使用
            8, '#f768a1', // 数值 >8 且 ≤12 时使用
            12, '#c51b8a', // 数值 >12 且 ≤16 时使用
            16, '#7a0177' // 数值 >16 时使用
          ],
          'fill-opacity': .65
        }
      });
      map.addLayer({
        'id': 'berlin-stroke',
        'type': 'line',
        'source': 'bb',
        'paint': {
          'line-color': '#000',
          'line-width': [
            'case',
            ['boolean', ['feature-state', 'hover'], false],
            2,
            .5
          ]
        }
      });
    });

逻辑说明 #

step 表达式的工作规则是：

• 第一个参数是要判断的属性值（通过 ['get', '属性名'] 获取）
• 第二个参数是对应数值小于第一个断点的默认颜色
• 后续参数成对出现：[断点值, 对应颜色]，表示数值大于等于当前断点、且小于下一个断点时，使用该颜色
• 最后一对的颜色会应用于所有大于等于最后一个断点的数值

这样配置后，地理单元的数值会严格匹配你定义的5个离散区间，不会生成插值渐变色彩。

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