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

时间:2019-03-27 18:22:53

标签: javascript expression mapbox mapbox-gl-js mapbox-gl

我想基于数据值(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
]

使用propertystops

'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'

所有内容都可以正常显示,但仅限于圈子。

1 个答案:

答案 0 :(得分:0)

感谢@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,它们都有效地期望“ propertystops”方法。