我想基于数据值(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'
所有内容都可以正常显示,但仅限于圈子。
答案 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
,它们都有效地期望“ property
和stops
”方法。