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滑块的滑动事件更改显示的值。

 $( "#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()指令。

如果您在for函数中发表redraw循环，则会更慢地执行代码（只需在更改滑块值时重新绘制Points图层）。实时重绘似乎有很多要点，JS在FF上的速度不够快。

也许您可以深入了解OpenLayers库并尝试破解它以对FF进行一些改进。其他解决方案是在OpenLayers邮件列表上发布此代码，以便他们可以帮助您更好。

如何改进OpenLayer Vector层刷新200个元素？

1 个答案: