ghettovoice / vuelayers

Web map Vue components with the power of OpenLayers
https://vuelayers.github.io/
MIT License
682 stars 230 forks source link

how to display multiople <vl-style-text> #496

Closed scil closed 2 years ago

scil commented 2 years ago

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 2 years ago

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 2 years ago

use multiple vl-style yes, it is a way to combine multiple style layers. vl-style also has z-index prop, working similar to css z-index and can be use to force order of vl-style during rendering.

scil commented 2 years ago

vl-style also has z-index prop, working similar to css z-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.