StyleFunctions on vector layers?

[Koli0842]

Hi,
I'm quite inexperienced with JS / Vue, but I have a small project using vuelayers heatmaps with massive amounts of data. So much so it's becoming inconvinient, and I'm thinking about replacing it with a vector layer with a custom style function, or something along those lines. Documentation on style functions is really sparse on the other hand, and I couldn't quite figure a way out to make it work.
Is it implemented yet, and if it's working, can we find an example code somewhere?
Thanks

[ghettovoice]

Hello @Koli0842 ,
yes, style functions is supported by any vector layer.

To apply it you can use vl-style-func component

<template>
  <vl-layer-vector>
    <vl-style-func : factory ="newStyleFunc"/>
  </vl-layer-vector>
</template>

<script>
export default {
  methods: {
    newStyleFunc () {
      // feature - instance of ol/Feature https://openlayers.org/en/v5.3.0/apidoc/module-ol_Feature-Feature.html
      // resolution - float value of current view resolution
      return (feature, resolution) => {
         return ol/Style || Array<ol/Style> || null
      },
    },
  },
}
</script>

Style function is just a function that should return ol/Style, array of ol/Style or null (actually hides a feature) for the feature arg. It is called very often by OpenLayers render engine, so don't put here any heavy operations. Usually it is useful to build some complex or dynamic feature prop-based styling.
https://openlayers.org/en/v5.3.0/apidoc/module-ol_style_Style.html#~StyleLike

Several examples in VueLayers:

• https://jsfiddle.net/ghettovoice/6zdaueb2/
• https://jsfiddle.net/ghettovoice/wxf43djb/
• https://jsfiddle.net/ghettovoice/bjtr79o8/

Regarding use case: I'm not sure that is possible to build heatmap similar to vl-layer-heatmap with style function.
Do you experiencing lags with vl-layer-heatmap? How much features do you have on this layer?
Also vl-layer-heatmap have the option render-mode. Try to set it to the 'image' value, this can improve layer performance.
But if you have a huge number of features, probably it would be a good optimization to move heatmap calculation to a mapserver backend, then load in the browser ready heatmap png images

[Koli0842]

Thanks for the reply, and also a lot for the examples! I will give it a go.
To answer about my use case, I'm using heatmaps (possibly wrongly) to have a gradient color-coded overlay generated at a reasonably high resolution to visualize some data. I have roughly 35.000 data points that I parse from a GeoJSON. In Firefox it no longer loads at this point, and in Chromium based browsers, it takes a good few minutes of single-core torture.
Since my data is mostly static, it is probably indeed an overkill to treat it like this, and could easily be backend generated