Enable LayerGroups

[PeterC66]

I am not sure if I can implement LayerGroups within the current vuelayers components or, if not, if this is something you are planning?

In my existing js system I implement them using something like layer.setLayers(layerCollection). They are very useful, for example when I have several sources, each of a sheet tiled separately, which together cover an area.

[ghettovoice]

Hi @PeterC66 ,
I'm agree with you, layers group is a very useful component. And should be included into vuelayers.
The implementation would be relatively, there is already exists basic mixin layersContainer for components that plays layers container role. It is used in vl-map component.

I can add this component during this week, when I'll have time for this.
Or if you can implement it so you are welcome to pull request. As example check the vl-map component source code

[PeterC66]

Thanks, that is good to hear. I am in no hurry as I have lots of other things to work on in refactoring my system, and my skills are limited, so I am happy to wait for you to implement.

I am enjoying working with vue.js and vuelayers, and finding out all that I can do with them.

[ghettovoice]

Layer group vl-layer-group is ready, please try with the latest release.
Component properties almost the same as in OpenLayers.
Example from my test app:

<vl-layer-group id="layer-group" :opacity="opacity" :visible="visible">
  <vl-layer-tile id="wms">
    <vl-source-wms url="https://ahocevar.com/geoserver/wms" layers="topp:states" :ext-params="{ TILED: true }" server-type="geoserver"/>
  </vl-layer-tile>
  <vl-layer-image id="wms-image">
    <vl-source-image-wms url="https://ahocevar.com/geoserver/wms" layers="topp:states" server-type="geoserver"/>
  </vl-layer-image>

  <vl-layer-vector id="points" v-if="pointsLayer">
    <vl-source-cluster>
      <vl-source-vector :features="points"/>
    </vl-source-cluster>
    <vl-style-func :factory="clusterStyleFunc"></vl-style-func>
  </vl-layer-vector>
</vl-layer-group>

[PeterC66]

Can you add it to v0.11 for me to try it out? I have tried going back to 0.10 but had troubles with babel that I could not solve. Thanks.

[ghettovoice]

Yes, I'll add it

[ghettovoice]

Hi @PeterC66 ,
sorry for the delay. Now vl-layer-group in the v0.11.x too.

[PeterC66]

Thanks - that seems to work OK.

I did have a small issue with BingMapsSource moving from v0.11.0-rc.3 to v0.11.0-rc.4 as I Vue.use() components separately. Once I changed it to BingmapsSource the problem was solved. ( I do have a more significant problem with loading vectors in the new rc version that I will raise as a separate issue.)

Thanks again for all you are doing.

[ghettovoice]

I forget to mention breaking change of name of the Bing source.
Thanks for report!

[PeterC66]

I seem to be having an issue with zIndex. I never bothered much with zindex when using plain OL, relying on the order of the layers array, but with Vue.js/vuelayers I seem to to need to set it. My app works OK now I now that.

However the layer group seems to misbehave. I have set zindex for the GroupLayer, but when I look in devtools the layers that make up that group have zIndex undefined. Should I be setting zindex for each layer that makes up the layer group, or should OL or vuelayers do that for me?

[ghettovoice]

The OL ol.layer.Group has self zIndex option, so vl-layer-group sets it from z-index property. In other words if you need provide zIndex for layers in group, oyu should use z-index property on each layer explicitly. Group z-index (and other options like opacity) applies for ol.layer.Group instance

[PeterC66]

Thanks. I am using a render function and setting the same z-index for each vl-layer-.. as the vl-layer-group, and it works OK.

By the way I have realised that at least in this context I need to distinguish between attrs and props in the Data Object (createElement argument). I thought I had read somewhere that this was not necessary, but I need to be stricter in my mind in future.