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

Question

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

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

我希望圆不透明度是 3 个因素的乘积(特征的一些属性、 map 缩放和特征状态中的 bool 值是否应该隐藏该特征)。我想不出一种方法来写出一个能说明所有三个的表达式。围绕缩放规则的限制似乎是问题所在。

这是我试图写的逻辑:

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:“zoom”表达式只能用作顶级“step”或“interpolate”表达式的输入。”

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

'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

你真的很亲近。您收到此错误:

Error: layers.places.paint.circle-opacity[3]: Input/output pairs for "step" expressions must be defined using literal numeric values (not computed expressions) for the input values.

因为您在 ['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]],