使用 Mapbox GL JS 表达式设置图标图像

Question

我想根据数据值 (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions) 设置 icon-image。

另请参阅 https://github.com/mapbox/mapbox-gl-js/issues/6935，其中提供了一些有关如何执行此操作的示例。

我已经尝试了一些东西...

使用match

'icon-image': [
  'match',
  ['get', 'tap_ports'],
  2,
  '{tubes}-circle-15',
  4,
  '{tubes}-square-15',
  8,
  '{tubes}-octagon-15',
  '{tubes}-circle-15' // default
]

使用case

'icon-image': [
  'case',
  ['==', ['get', 'tap_ports'], 2],
  '{tubes}-circle-15',
  ['==', ['get', 'tap_ports'], 4],
  '{tubes}-square-15',
  ['==', ['get', 'tap_ports'], 4],
  '{tubes}-octagon-15',
  '{tubes}-circle-15' // default
]

使用property和stops

'icon-image': {
  property: 'tap_ports',
  type: 'categorical',
  stops: [
    [2, '{tubes}-circle-15'],
    [4, '{tubes}-square-15'],
    [8, '{tubes}-octagon-15']
  ]
}

所有这些都不会产生任何图标。

此外，如果我尝试使用 queryRenderedFeatures 记录该层的渲染特征，我只会看到空数组，因此由于我的尝试，这些特征不会呈现。

如果我简单地设置

'icon-image': '{tubes}-circle-15'

一切都很好，但当然只是作为圆圈。

Answer 1

感谢@ChaseChoi 的建议。

当我第一次尝试 steps 时，它也没有用，但后来我为我的层添加了一条调试语句，这导致了问题。

map.on('zoom', () => {
  console.log(map.queryRenderedFeatures({ layers: ['tubes'] }))
})

在这里我注意到 layout.image-icon 属性类似于 {tubes}-circle-15，而不是 blue-circle-15。 {tubes}应该是一种颜色。

所以，继续使用我使用 concat 表达式的步骤方法，它起作用了！

'icon-image': [
  'step',
  ['get', 'tap_ports'],
  ['concat', ['get', 'tubes'], '-circle-15'], // default
  2,
  ['concat', ['get', 'tubes'], '-circle-15'],
  4,
  ['concat', ['get', 'tubes'], '-square-15'],
  8,
  ['concat', ['get', 'tubes'], '-octagon-15']
]

我回去尝试了其他方法，这次使用 concat，它们都有效 期待“property 和 stops”方法.

使用 Mapbox GL JS 表达式设置图标图像

Using Mapbox GL JS expressions to set an icon-image

javascript

expression

mapbox

mapbox-gl-js

mapbox-gl