search

ghettovoice / vuelayers

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

Mapbox with components #475

Closed scadergit closed 2 years ago

scadergit commented 2 years ago

We're trying our best to keep application layers (VL/OL) clean and within components. As such, using olms on our Map.vue component goes against that approach, particularly since it creates the layers instead of using our custom components. I've been reviewing ol-mapbox-style stylefunction and applyStyle functions, but I don't see how that would be implemented within VL, mostly given a VL source component requires a tile service url, and that is provided in the mapbox style metadata.

Am I wrong to assume that this isn't possible yet? There is a MapboxSource component, but that appears to be when using Mapbox service explicity, not just the format with another tile service. Could VectorTileSource/VectorSource be extended, or parameters added, so that itself imports ol-mapbox-style and internally calls stylefunction or applyStyle without having to manage that within the application layer?

Just curious if that is also your expectation.

ghettovoice commented 2 years ago

Hello @scadergit , mapbox style json usually consists of more than one layer and they are parsed and appended here https://github.com/openlayers/ol-mapbox-style/blob/main/src/index.js#L510.

I'm not sure is it possible or not, but I guess it can be possible to extend ol/layer/Group and somehow force ol-mapbox-style to add all built layers to this group. If this is possible working solution, next step will be very easy. You need to extend vl-layer-group and overwrite createLayer method. With this approach you actually encapsulate all this mapbox style related logic inside one place. For Vue app it will be just another vl-layer-mapbox-group layer component.

I didn't tried yet such approach anywhere, so I can't say is working solution.

scadergit commented 2 years ago

Good points, I hadn't dove into the ol-mapbox-style code yet. I will review and see if I can implement something to this affect.

scadergit commented 2 years ago

On the plus side, I realized I miss-interpreted the implementation of ol/layer/MapboxVector, and that VLMapboxVector is a simple wrapper. The openlayers class imports ol-mapbox-style, making the the vuelayers component super simple. (I was confused until I realized openlayers automatically constructs the MVT source and I shouldn't specify one in vuelayers). On top of that, the openlayers class imports the applyStyle function, which doesn't use processStyle linked above, and simply applies the mapbox style directly to the same layer. This results in only one layer, not multiple when using olms. So looks my concern is addressed simply by using the wrapper.