Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/441.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript OpenLayers渲染时间_Javascript_Openlayers 6 - Fatal编程技术网

Javascript OpenLayers渲染时间

Javascript OpenLayers渲染时间,javascript,openlayers-6,Javascript,Openlayers 6,我想根据属性在OpenLayers中设置一些点的样式,这里一切都很好,但是渲染时间非常慢,在我只对所有点使用一种样式之前,渲染速度非常快。在这两种情况下,我使用相同数量的点(约9000)。有什么可以改进的吗 我使用此函数为点提供样式: var Styles = function (feature, resolution) { if (feature.get('Tipo') === 2) { strokecolor = [245,49,5,1]; }else{

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