0

I'm trying to add a style function programmatically to a VectorLayer in my map, but nothing is displayed and no errors are fired. Before, I used to add all the layers and styles manually, but now I want to do this dynamically. Inside the style function I used the switch method to change the color for each feature value, this way:

var randomVectorLayer = new VectorLayer({
    ...
    style: (feature) => {
        let featureValue = feature.get("SOME_ATTRIBUTE");
        switch(featureValue) {
            case "VALUE1":
                return this.styleArea('rgba(100, 255, 0, 1)'); // returns a style for Areas with the passed color
            break;
            case "VALUE2":
                return this.styleArea('rgba(85, 255, 0, 1)', 'rgba(0, 0, 0, 1)', 2);
            break;
        }
    },
    ...
});

Now I trying to add programmatically, which I already made it for simple polygons with a single style, this way:

let styleNewLayer;
if (attr_array.length == 1) { // simple layer with only one attribute
    styleNewLayer =  this.styleArea(attr_array[0]['color']);
}
let newVectorLayer = new VectorLayer({
    ...,
    style: styleNewLayer,
    ...
});

But polygons that contain many variations of attributes and consequently several styles proved to be more challenging for me. One of the ways I tried to load the styles was this way, changing the switch function for a if one:

let styleNewLayer;
if (attr_array.length > 1) {
    styleNewLayer = (feature) => {
        attr_array.forEach(attr => {
            let featureValue  = feature.get(attr.name); // I can see that this value is correctly acquired
            if (featureValue == attr.value) { // I tried to set this value to a known one as well.
                return this.styleArea(attr.color);
            }
        });
    };
}
let newVectorLayer = new VectorLayer({
    ...,
    style: styleNewLayer,
    ...
});
Cœur
  • 37,241
  • 25
  • 195
  • 267
leonardofmed
  • 842
  • 3
  • 13
  • 47
  • 1
    The styleFunction should return the style, using return inside forEach won't do that. See https://stackoverflow.com/a/34653650/10118270 – Mike Dec 18 '19 at 22:34
  • This solved the problem! But I felt a slight performance degradation, do you have any suggestions on this? I believe it is because of the times the loop is performed when the map is updated. Maybe a way to store and assign values only once, but I don't know if it's possible. I used `for (let attr of attr_array)` and `for (let i = 0, len = attr_array.length; i < len; i++)` as suggested [here](https://stackoverflow.com/a/7252102/7123439), but didn't see difference. – leonardofmed Dec 19 '19 at 12:26
  • I think you would be better off setting the style at the feature level.This would also remove the need to loop through them. Layer level styling is for use when all features have the same style, you have different styles based on the feature. Furthermore, doing it at the feature level means the style functions are selectively called, ie: when the relevant feature is visible. – wlf Jan 08 '20 at 15:15

0 Answers0