如何提高200个元素的OpenLayer Vector图层刷新？

Question

我想开发一种结合了jquery-ui滑块组件和OpenLayer库的时间表。

我只是使用具有规则样式的OpenLayers的Vector层。

 map = new OpenLayers.Map('map', {maxResolution:'auto'});
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                                   "http://vmap0.tiles.osgeo.org/wms/vmap0",
                                   {layers: 'basic'} );
map.addLayer(wms);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);

// create 20 random features with a random type attribute. The
// type attribute is a value between 0 and 2.
var features = new Array(20);
for (var i=0; i<20; i++) {
    features[i] = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90),
        {type: parseInt(Math.random()*80)}
    );
}  

var style = new OpenLayers.Style(
    {                           
        graphicHeight: 20,
        graphicYOffset: -19,
        rotation: "${angle}"
    },
    {
        rules: [ new OpenLayers.Rule({
                     filter: new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.LESS_THAN,
                        property: "value",
                        value: 20
                    }),                             
                    symbolizer: {
                        externalGraphic: "http://dev.openlayers.org/releases/OpenLayers-2.13.1/img/marker-blue.png"
                    }
                }),
                new OpenLayers.Rule({
                        filter: new OpenLayers.Filter.Comparison({
                            type: OpenLayers.Filter.Comparison.BETWEEN,
                            property: "value",
                            lowerBoundary: 20,
                            upperBoundary: 40

                        }),                             
                        symbolizer: {
                            externalGraphic: "http://dev.openlayers.org/releases/OpenLayers-2.13.1/img/marker-green.png"
                        }
                }),
                new OpenLayers.Rule({
                        filter: new OpenLayers.Filter.Comparison({
                            type: OpenLayers.Filter.Comparison.GREATER_THAN,
                            property: "value",
                            value: 40
                        }),                             
                        symbolizer: {
                            externalGraphic: "http://dev.openlayers.org/releases/OpenLayers-2.13.1/img/marker-gold.png"
                        }
               })
        ]
    }
);

layer = new OpenLayers.Layer.Vector('Points', {
    styleMap: new OpenLayers.StyleMap(style)
});

layer.addFeatures(features);
map.addLayer(layer);

我通过jquery-ui滑块的slide事件更改显示的值。

 $( "#slider" ).slider({
        value:0,
        min: 0,
        max: 100,
        step: 1,
        slide: function( event, ui ) {
            var end = false;
            //launched.push(ui.value);
            $( "#value" ).val( ui.value );

            function redraw(){
                //launched.pop();
                for(var i = 0 ; i < features.length; i++){
                    features[i].attributes["value"] = Math.random()*60;             
                }
                map.getLayersByName("Points")[0].redraw();

            };
            redraw();


        }
    });

很少有元素，效果很好。 但是，如果我将显示元素的数量设置为200并使用Firefox打开脚本，则滑块会非常慢，并且不会跟随鼠标光标，尽管它在Chrome上运行良好。

您可以在以下jsfiddle上找到我的源代码： http : //jsfiddle.net/jeje/5XPcc/6/

有人知道我做错了什么吗？ 您是否认为有改进的方法？

Answer 1

我用forEach方法，反序，++计数器尝试了您的代码，结果仍然相同，因此问题可能出在map.getLayersByName("Points")[0].redraw()指令上。

如果在redraw函数中for循环添加注释，它将使您的代码执行速度变慢（更改滑块值时只需重绘Points层）。 实时重绘似乎有很多要点，而JS在FF上做得不够快。

也许您可以进入OpenLayers库并尝试对其进行破解以对FF进行一些改进。 其他解决方案是将此代码发布到OpenLayers邮件列表中，以便他们可以为您提供更好的帮助。