Использование выражений Mapbox GL JS для установки иконки-изображения - PullRequest
Новая
       49

Использование выражений Mapbox GL JS для установки иконки-изображения

0 голосов
/ 27 марта 2019

Я хотел бы установить 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'

все отрисовывается нормально, но, конечно, только как круги.

1 Ответ

0 голосов
/ 28 марта 2019

Спасибо за предложение @ 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" .

...