CODEWITHSUNDEEP
javascriptopenlayers-6
Luis Medina
Luis Medina

Reputation: 555

OpenLayers render time

I want to style some points in OpenLayers based on a property, and everything is fine here but the render time is really slow, before I was just using one style for all the points and it was fast. In both cases I use the same amoung of points(about 9000). Any ideas on what can be inprove ?

I'm giving the style to the points using this function:

var Styles = function (feature, resolution) {
    if (feature.get('Tipo') === 2) {
        strokecolor = [245,49,5,1];
    }else{
        strokecolor = [130,49,5,1];
    }

    return [new ol.style.Style({
        image: new ol.style.Circle({

            fill: new ol.style.Fill({
                color: strokecolor
            }),
            radius: 3
        })
    })];
};

even if coment the part of the condition and set only one possible value for color it is really slow.

Before I was giving the style doing this:

var OneStyle = new ol.style.Circle({
    fill: new ol.style.Fill({
    color:[245,49,5,1]
    }),
    radius:3,
})

and this is how I call the points and set the style:

var events_points = new ol.layer.Vector({

    source: new ol.source.Vector({
    url:urlEvents,
    format: new ol.format.GeoJSON()
    }),
    //style:Styles
    style: new ol.style.Style({
    image:OneStyle,

    })
});

Upvotes: 0

Views: 149

Answers (1)

Mike
Mike

Reputation: 17962

Try to avoid creating a new style object every time the function is called

var style1 = new ol.style.Circle({
    fill: new ol.style.Fill({
        color:[245,49,5,1]
    }),
    radius:3,
});

var style2 = new ol.style.Circle({
    fill: new ol.style.Fill({
        color:[130,49,5,1]
    }),
    radius:3,
});

var Styles = function (feature, resolution) {
    if (feature.get('Tipo') === 2) {
        return style1;
    }else{
        return style2;
    }
};

Upvotes: 1

Related Questions