Блог

Я хочу стилизовать некоторые точки в OpenLayers на основе свойства, и здесь все в порядке, но время рендеринга очень медленное, раньше я просто использовал один стиль для всех точек, и это было быстро. В обоих случаях я использую одинаковое количество точек (около 9000). Есть идеи о том, что можно улучшить?

Я придаю стиль точкам, используя эту функцию:

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

даже если выполнить часть условия и установить для него только одно возможное значение color , это действительно медленно.

Прежде чем я задавал стиль, делающий это:

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

и вот как я называю точки и устанавливаю стиль:

 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,

    })
});
  

Старайтесь избегать создания нового объекта стиля при каждом вызове функции

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