如何提高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郵件列表中，以便他們可以為您提供更好的幫助。