0

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
      });
    }
  }
}

Improve this question
4
  • 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, 2018 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, 2018 at 14:32
  • Do you change geometry after zoom or are you changing just style?
    – Catch
    May 17, 2018 at 9:21
  • I change style, specifically the image scale -- style.getImage().setScale(1/resolution).
    – Ben Upham
    May 17, 2018 at 21:59

1 Answer 1

Reset to default
0

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.

Improve this answer
5
  • 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, 2018 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, 2018 at 5:35
  • Added code to question.
    – Ben Upham
    May 23, 2018 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, 2018 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, 2018 at 19:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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