Use a style cache

[boeckMt]

Use a style cache

[boeckMt]

Is that meant for that OpenLayers styles?

If yes I have done it for our covid app like following:

class ClusterStyle {
  private styleCache = new Map();

  getStyle(props) {
    const {color, radius, text } = props;
   
    const sID = `${color}_${radius}_${text}`;
    const cacheStyle = this.styleCache.get(sID);
    if (cacheStyle) {
      return cacheStyle;
    } else {
      const fill = new olFill({
        color: color?.css() || NODATA_COLOR.css()
      });
      const stroke = new olStroke({
        color: chromaHex('#000').css(),
        width: 1,
      });

      const circleImage = new olCircleStyle({
        radius,
        stroke,
        fill
      });

      const style = new olStyle({
        image: circleImage
      });


      if (text) {
        const textStyle = new olText({
          text,
          fill: new olFill({
            color: chromaHex('#fff').css()
          })
        });

        style.setText(textStyle);
      }
      this.styleCache.set(sID, style);
      return style;
    }
  }
}


const clusterStyle = new ClusterStyle();


const layer = new olVectorLayer({
  source: source,
  style: ()=>{
    return clusterStyle.getStyle(props);
  }
})

[MichaelLangbein]

Something like this indeed!
I've done some benchmarking, though: https://gitlab.dlr.de/lang_m13/openlayers_webgl_benchmark
One of the results is, unfortunately, that a style cache doesn't reduce our memory footprint significantly.
It's still a good practice and might help us out in the long term.

(I'll do some more experimenting and then summarize all findings. One thing that's already pretty obvious:
our biggest memory hit is in the beginning when we receive and pre-process the data. Once the layer is on the map a lot of memory can be cleaned up; but that initial spike really kills the browser-tab quite often)

[boeckMt]

For me that style cache helped really a lot, especially if you don't can use the WebGLPointsLayer. After I used this cache, you could really feel the difference panning around, because the canvas can reuse objects and doesn't have to recreate everything.

https://openlayersbook.github.io/ch06-styling-vector-layers/example-07.html

// a javascript object literal can be used to cache
// previously created styles. Its very important for
// performance to cache styles.

[MichaelLangbein]

Closing for now. We have very few vector-layers that aren't webgl-based. Will work on this if vector layers become a bottleneck.