使用数据设置圆的颜色的语法

Posted 2023-02-28

我正在使用地震数据，我希望使用地震的大小为数据点着色。现在我有根据位置着色的数据点（圆圈），但我希望使用地震大小。我对mapbox相当新，并且对javascript的使用经验有限。

我已经尝试了mapbox文档，但它非常令人困惑。无处可去。

"circle-color": [
       "match",
       ["get", "net"],
       'ak', "#fbb03b",
       "ci", "#ff3bff",
       "hv", "#e55e5e",
        "mb", "#3bb2d0",
         /* other */ "#ccc"
      ]

'net'是2个字符的位置代码，它确实可以正常工作。我想拉出'mag'（幅度）数据并根据幅度范围设置颜色。我尝试过类似下面的东西，但它不起作用。

"circle-color": [
       "match",
       ["get", "mag"],
       ">5", "#fbb03b",
       ">6", "#ff3bff",
       ">7", "#e55e5e",
        ">8", "#3bb2d0",
         /* other */ "#ccc"
]

答案

你是在正确的轨道上，但比较表达式如“> 5”不是Mapbox-GL-JS支持的。

由于您希望将值应用于表达式的结果（“大于5”）而不是简单的固定值（“AK”），因此请使用case表达式：

"circle-color": [
       "case",
       [">", ["get", "mag"], 5], "#fbb03b",
       [">", ["get", "mag"], 6], "#ff3bff",
       [">", ["get", "mag"], 7], "#e55e5e",
       [">", ["get", "mag"], 8], "#3bb2d0",
       "#ccc"
]