OpenLayers 渲染时间

Question

我想根据属性在 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,

    })
});

Answer 1

尽量避免每次调用函数时都创建一个新的样式对象

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

OpenLayers 渲染时间

OpenLayers render time

javascript

openlayers-6