如何编写用于缩放，要素状态和数据驱动样式的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', ['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+
  1 // opacity 1