如何根据 geoJSON 属性的最大值进行插值。使用 Mapbox 绘制、圆形颜色、数据驱动表达式

Question

我在 React 项目中使用 Mapbox GL，并希望根据源 geoJSON 的属性设置数据点的圆圈颜色。我的目标是将圆圈涂成绿色表示低值，红色表示高值。介于两者之间的任何东西都是颜色渐变。例如，如果我的数据点的值范围是 0 到 100。0 应该是绿色，100 是红色，50 是琥珀色。

这是我尝试过的：

  paint: {
          'circle-radius': 10,
          'circle-color': [
            'let',
            'maxVal',
            ['max', ['get', 'P1_H']],
            [
              'interpolate',
              ['linear'],
              ['get', 'P1_H'],
              0,
              'green',
              ['var', 'maxVal'],
              'red'
            ]
          ]
        }

但这给了我错误：

“插值”表达式的输入/输出对必须使用 输入的文字数值（非计算表达式） 价值观。

对我来说最大的问题是我不提前知道源数据中的最大值是多少。可能是20，也可能是80，我只是不知道。所以硬编码一个数字对我不起作用。最小值也可能会发生变化，但现在我专注于最大值。 所以我的问题是，如何根据所选属性中具有最高值的特征插入圆形颜色？

Answer 1

您的第一个问题是您似乎错误地使用了var，这会弄乱您的语法。你似乎不需要它，所以为什么不直接：

paint: {
      'circle-radius': 10,
      'circle-color': [
          'interpolate',
          ['linear'],
          ['get', 'P1_H'],
          0, 'green',
          MAXVAL,
          'red'
        ]
      ]
    }

您的第二个问题是['max'] 无法按您希望的方式工作。我想你希望它会告诉你图层中所有值的最大值。它没有。它告诉您在函数调用中提供给它的值中的最大值。因此，您将不得不以其他方式计算我标记为 MAXVAL 的内容。