如何根据 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'
            ]
          ]
        }

但这给了我错误：

Input/output pairs for "interpolate" expressions must be defined using literal numeric values (not computed expressions) for the input values.

对我来说最大的问题是我无法提前知道源数据中的最大值是多少。可能是 20 也可能是 80，我只是不知道。所以硬编码数字对我不起作用。最小值也可能会改变，但现在我关注的是最大值。所以我的问题是，如何根据所选属性?

中具有最高值的特征来插入圆圈颜色

Answer 1

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

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

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

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

How do I interpolate based on max value from geoJSON properties. Using Mapbox paint, circle-color, Data driven expressions

javascript

mapbox

mapbox-gl-js