如何在 mapbox GL 上将样式设置为图像模式

Question

Hi i'm creating bus and subway routing using mapbox and react - i need different color for my pattern that drawing line on the map you can see my sample pattern on image below

look at my pattern image

as you can see pattern has static color (green) i need to set this color dynamically with hex code that return from server.

if wrote function for get pattern

 getPattern(type, section_type, index, line_name) { if (section_type === routingTypes.METRO) { switch (line_name) { case '1': return pattern_metro_1; case '2': return pattern_metro_1; case '3': return [pattern_metro_1, '#00B8F8']; case '4': return '<img src={pattern_metro_1} style="border: 3px solid green" />'; case '5': return pattern_metro_1; case '6': return pattern_metro_1; case '7': return pattern_metro_1; default: return pattern_metro_1; } } }

as you can see all cases are static pattern image but i need some thing like case 3 that i set image and pattern and image fill with that color. also i tried case 4 but it doesn't work either.

Answer 1

I think it fails because you are using ' wrongly,

Try this

case '4':
  return '<img src={pattern_metro_1} style="border: 3px solid green" />';