I have a large number of cached vector features which I am caching for speed. However, as they need to change size depending on view resolution, I have to do various updates on them with each increment, which sort of defeats the purpose of caching.

Is there a way for cached styles to update their scale (and other options, like offSet) when resolution changes?

Here's the basic code:

const imageVectorStyle = function(image, resolution) { 
  // Caching both the style and the icon, fyi. 
  let style = styleCache[image.getProperties().name];
  if (style) {
    //The style exists in the cache, but since the resolution has changed
    //since caching, I have to update the scale. 
    style.getImage().setScale(1 / resolution); 
    return style
  else  {
    const imageProperties = image.getProperties();
    let imageIcon = iconcache[imageProperties.src];
    if (!imageIcon) {
      imageIcon = new Icon({
        offset: imageProperties.offset,
        size: imageProperties.size,
        stroke: new Stroke({color: '#dee2e6', width: 1 }),
        // Here scale is set based on resolution when the style is first created. 
        scale: 1 / resolution,
        crossOrigin: 'anonymous',
        src: imageProperties.src

  • I don't get how why would you have to change size of vector feature based on resolution, that is what OL does automatically for you, is it not? You need to generalize the vectors or what? How do you cache the vectors? For some dynamic styling you can use style function – Catch May 15 '18 at 9:39
  • Once they are cached, they keep the map resolution at the moment they were cached. So for example, if I set icon scale = 1/resolution, that resolution value does not update when the map resolution changes. – Ben Upham May 16 '18 at 14:32
  • Do you change geometry after zoom or are you changing just style? – Catch May 17 '18 at 9:21
  • I change style, specifically the image scale -- style.getImage().setScale(1/resolution). – Ben Upham May 17 '18 at 21:59

If you want to style features based on resolution, you can use style function. It is used in this example. It is a function which takes feature and resolution as parameters and has to return instance of ol.Style, or array of styles.

  • I'm using style functions. The style function looks up the feature's icon in the cache first thing, to see if it can use the cached icon. However, because the resolution has changed since it was cached, I have to update the scale of the icon when I pull it from the cache. – Ben Upham May 19 '18 at 22:41
  • Can you please provide the styleFunction code? Very usefull would be also images of what you want to achieve... – Catch May 21 '18 at 5:35
  • Added code to question. – Ben Upham May 23 '18 at 17:53
  • Ok, I don't know if this is just the basics or the real code (because you don't have any return statement in the else section) but I assume it's just a scheme and you have it syntactically and logically correct. Have you tried not to cache the styles? Just make a function that creates and returns new ol.Style? Would it work? I don't think that it will be too much slower... – Catch May 24 '18 at 11:54
  • It's edited down. I will try, but I believe I needed to cache both the style and the icon to achieve good performance without flickering. I've got several thousand features... – Ben Upham May 24 '18 at 19:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.