如何编写考虑缩放、功能状态和数据驱动样式的 Mapbox 绘制表达式？

Question

我有一个层将 geojson 源中的点要素渲染为圆圈。以下是其中一项功能的示例：

{
  type: 'Feature',
  properties: {
    color: 'red',
    red: true,
    green: false
  },
  geometry: {
    type: 'Point',
    coordinates: [-77.038659, 38.931567]
  }
};

我希望圆形不透明度是 3 个因素的乘积（要素的一些属性、地图缩放以及要素状态中是否应隐藏该要素的布尔值）。我无法找到一种方法来编写一个表达式来解释这三个问题。缩放规则的限制似乎是问题所在。

这是我想写的逻辑：

if (feature-state.hidden) {
    opacity = 0;
} else if (properties.red) {
    opacity = 1;
} else if (properties.green and zoom >= 10) {
    opacity = 1;
} else if (zoom >= 15) {
    opacity = 1;
} else {
    opacity = 0;
}

我尝试编写这样的不透明表达式：

'circle-opacity': [
  'case',
  ['to-boolean', ['feature-state', 'hidden']], 0,
  ['to-boolean', ['get', 'red']], 1,
  ['to-boolean', ['get', 'green']], ['case', ['>=', ['zoom'], 10], 1, 0], // I could also write a permutation of this using an ['all'] rule
  ['>=', ['zoom'], 15], 1,
  0,
],

这会被拒绝并显示以下消息：“错误：layers.places.paint.circle-opacity：“缩放”表达式只能用作顶级“步骤”或“插值”表达式的输入。”

然后我尝试了这样的事情：

'circle-opacity': [
  'step',
  ['zoom'],
  0,
  [
    'case',
    ['to-boolean', ['get', 'red'], false], 1,
    ['to-boolean', ['get', 'green'], false], 10,
    15
  ],
  1
]

这会被拒绝并显示以下消息：“错误：layers.places.paint.circle-opacity[3]：“步骤”表达式的输入/输出对必须使用输入值的文字数值（而不是计算表达式）来定义。”

正如您所看到的，我什至还没有开始添加功能状态检查。

这是一个可以使用的 JSFiddle：https ://jsfiddle.net/rognstad/px4c8tbe/17/

我认为我可以通过使用 minZoom 属性将每种颜色分解为自己的图层，然后仅使用特征状态的不透明度表达式来使其工作，但这感觉非常笨重，并且会导致性能更差。

看来必须有更好的方法了。对于如何实现这一目标，您有更好的建议吗？谢谢！

Answer 1

你真的很接近。您收到此错误：

错误：layers.places.paint.circle-opacity[3]：“step”表达式的输入/输出对必须使用输入值的文字数值（而不是计算表达式）来定义。

因为你的表达式中的参数顺序['step']有点错误。它需要去：

['step', ['zoom'], <value at zoom 0>, <X>, <value at zoom X>, <Y>, <value at zoom Y>

所以你不希望先0有那个。

如果我们重构一下你的伪代码，你应该能够到达那里：

step
  zoom
  // zoom 0 to 10
  if (!feature-state.hidden && properties.red) {
    1
  } else {
    0
  }
  10 // zoom level 10+
  if (!feature-state.hidden && (properties.red || properties.green) {
    1
  } else {
    0
  }
  15 // zoom level 15+
  if (!feature-state.hidden) {
    1
  } else {
    0
  }

表达式代码看起来像这样。您可能必须添加适当的类型转换。（我没有测试过）。

['step', ['zoom'],
['case', ['all', ['!', ['feature-state', 'hidden']], ['get', 'red'], 1, 0],
10,
['case', ['all', ['!', ['feature-state', 'hidden']], ['any', ['get', 'red'], ['get', 'green']], 1, 0],
15,
['case', [['!', ['feature-state', 'hidden']], 1, 0]],