Verschiedene Ebenen Stile nach einer Variablen

Question

Ich möchte einige Karten auf der Seite zeigen, im Grunde sind sie alle gleich, außer dass sie verschiedene Schichten haben, die sich nach einem Parameterwert unterscheiden.

Der Code, den ich geschrieben habe, zeigt die Layer auf allen Maps, aber der Style nimmt immer den letzten Wert der Variablen in der Schleife. In meinem Fall immer den Wert von 2 nehmen.

Ich möchte wissen, wo genau ist mein Fehler, dass das Styling der Schicht nicht entsprechend der Schleife Wert ist.

Der Teil meines Skript, das ich ist, wie folgend schrieb

for (variable = 0 ; variable <= 2 ; variable++){ 
    vectorLayers[variable] = new ol.layer.Vector({ 
    source: new ol.source.Vector({ 
     url: '/myLocation/myFiles', 
     format: new ol.format.GeoJSON() 
    }), 
    style: function(feature) { 
     id = feature.get('reading'+variable); 
     parameter = id[1]; 
     fill.setColor(
     parameter >= 0 && paramter < 0.10 ? lightBlue: 
     ...); 
     return style; 
     } 
    }); 

Answer 1

Die Style-Funktion in der for-Schleife nicht ausgeführt wird, wie Sie erwarten. Die for-Schleife erzeugt zuerst alle Ebenen, dann wird die Stil-Funktion für jedes Merkmal jeder Ebene aufgerufen. Deshalb wird der variable Wert immer 2 sein. Debuggen Sie sorgfältig, Sie werden sehen.

Bearbeiten 1: Schreiben Sie eine Methode, die Vector-Layer erstellen und in der Schleife aufrufen und den Variablenwert übergeben, damit der Wert korrekt verwaltet wird.

for (variable = 0 ; variable <= 2 ; variable++){ 
    vectorLayers[variable] = createVectorLayer(variable); 
} 

function createVectorLayer(variable) { 
    var layer = new ol.layer.Vector({ 
    source: new ol.source.Vector({ 
     url: '/myLocation/myFiles', 
     format: new ol.format.GeoJSON() 
    }), 
    style: function(feature) { 
     id = feature.get('reading'+variable); 
     parameter = id[1]; 
     fill.setColor(
     parameter >= 0 && paramter < 0.10 ? lightBlue: 
     ...); 
     return style; 
     } 
    }); 
    return layer; 
}