변수에 따라 다른 레이어 스타일

Question

페이지에 몇 개의지도를 표시하고 싶지만 기본적으로 매개 변수 값에 따라 다른 레이어가 있다는 점을 제외하면 모두 동일합니다.

내가 작성한 코드는 모든지도에 레이어를 표시하지만 스타일은 항상 루프에서 변수의 마지막 값을 가져옵니다. 제 경우에는 항상 2의 값을 취합니다.

레이어의 스타일이 루프 값에 따라 다르지 않은 부분을 정확히 알고 싶습니다.

내가 쓴 내 스크립트의 부분은 당신이 기대하는대로 스타일 기능은 for 루프에서 실행되지 않습니다

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

을 다음과 같습니다. for 루프는 먼저 모든 레이어를 생성 한 다음 스타일 기능이 각 레이어의 각 기능에 대해 호출됩니다. 왜 변수 값이 항상 2가 될지. 디버그를주의 깊게 살펴보십시오.

편집 1 : 벡터 레이어를 만들고 루프 내에서 호출하여 값이 올바르게 유지 될 수 있도록 변수 값을 전달하는 메서드를 작성합니다.

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; 
}