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

Question

我想设置一个icon-image基于数据值（https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions）。

另请参阅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'

一切都很好，但当然只是圈子。