时间戳

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

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

问题描述

我在 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，我只是不知道。所以硬编码一个数字对我不起作用。最小值也可能会改变，但现在我专注于最大值。所以我的问题是，如何根据所选属性中具有最高值的特征插入圆形颜色？

标签： javascriptmapboxmapbox-gl-js

解决方案

您的第一个问题是您似乎使用var不正确，并且弄乱了您的语法。你似乎不需要它，所以为什么不只是：

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

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

推荐阅读