how to display multiople <vl-style-text>
scil opened this issue · 3 comments
scil commented
the first vl-style-circle
and the last vl-style-text
can show up properly. but the middle vl-style-text
can not show up.
<vl-style-box >
<vl-style-circle :radius="10">
<vl-style-stroke :width="2"></vl-style-stroke>
<vl-style-fill :color="[0, 0, 0, 0.5]"></vl-style-fill>
</vl-style-circle>
<vl-style-text font="14px iconfont" text="">
<vl-style-fill color="#ffb224"/>
<vl-style-stroke color="#ffb224"/>
</vl-style-text>
<vl-style-text font="18px " :text="place.name">
<vl-style-fill color="white"/>
<vl-style-stroke color="black"/>
</vl-style-text>
</vl-style-box>
scil commented
I see. use multiple vl-style
<vl-style-box>
<vl-style>
<vl-style-text font="18px " :text="place.name">
<vl-style-fill color="white"/>
<vl-style-stroke color="black"/>
</vl-style-text>
</vl-style>
<vl-style>
<vl-style-text font="14px iconfont" text="" :offsetY="20">
<vl-style-fill color="#ffb224"/>
<vl-style-stroke color="#ffb224"/>
</vl-style-text>
</vl-style>
</vl-style-box>
ghettovoice commented
use multiple vl-style
yes, it is a way to combine multiple style layers.
vl-style also hasz-index
prop, working similar to cssz-index
and can be use to force order of vl-style during rendering.
scil commented
vl-style also has
z-index
prop, working similar to cssz-index
and can be use to force order of vl-style during rendering.
Thank you. z-index
is very useful. and I use offsetY
to place them.