在mapboxgl中使用离散颜色代替默认的插值颜色进行地图填充？

Question

我通常看到的 Mapboxgl 填充属性在等值线地图上的工作方式是这样的：

map.on('load', function () {
      map.addSource('bb', { type: 'geojson', data: data, generateId: true});
      map.addLayer({
        'id': 'berlin',
        'type': 'fill',
        'source': 'bb',
        'paint': {
          'fill-color': {
          'property': some_numeric_val,
          'stops': [[4, '#feebe2'], [8, '#fbb4b9'], [12, '#f768a1'], [16, '#c51b8a'], [20, '#7a0177']]
          },
        '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
          ]
        }
      });
    });

即颜色是根据用户选择的属性创建的。然而，mapboxgl 的默认行为似乎是插值颜色。例如，如果我的一个地理单位的值位于断点之间，mapboxgl 将插入颜色，从而产生颜色渐变。

有没有办法使颜色不同（非插值）？即，如果值等于或小于 4，则颜色为 #feebe2，如果值等于或小于 8，则颜色为“#fbb4b9”，在我此处的示例中总共有 5 种离散颜色。

我在任何地方都找不到这个问题的答案。谢谢。

Answer 1

您可以使用

stops

代替

match

。

map.on('load', function () {
  map.addSource('bb', { type: 'geojson', data: data, generateId: true });
  map.addLayer({
    id: 'berlin',
    type: 'fill',
    source: 'bb',
    paint: {
      'fill-color': [
        'match',
        ['get', 'some_numeric_val'],
        4, '#feebe2',
        8, '#fbb4b9',
        12, '#f768a1',
        16, '#c51b8a',
        20, '#7a0177',
        // Add a default color if no values match
        '#000000', // Example - black
      ],
      'fill-opacity': 0.65,
    },
  });
  map.addLayer({
    id: 'berlin-stroke',
    type: 'line',
    source: 'bb',
    paint: {
      'line-color': '#000',
      'line-width': ['case', ['boolean', ['feature-state', 'hover'], false], 2, 0.5],
    },
  });
});

在上面提供的示例中，

match

将

some_numeric_val

与每个值进行比较，如果匹配则返回颜色。如果没有，它会返回您可以设置的默认颜色。