전단지 : L.geoJson 옵션에 추가 인수를 전달하십시오.

Question

전단지 프레임 워크를 사용하여 choropleth지도 작업 중입니다. 나는 몇 년 동안 여러 별도의 레이어를 가지고 싶은, 그래서 난 '(인수없이, style2002'와 'style2010'전달되어야의 이름이 있습니다)이 코드를 작성했습니다 '

 population2002 = L.geoJson(regionData, { 
     style: style2002 
    }); 

    population2010 = L.geoJson(regionData, { 
     style: style2010 
    }); 

, (이름은 접두사 'Pop_'플러스 년이다) 자신의 속성에 depening 내 벡터 다각형을 착색 거기 "스타일"기능은 다음과 같습니다 당신이 추측 수 있듯이

 function style2002(feature) 
    { 
     return { 
      fillColor: getColor(feature.properties.Pop_2002), 
      weight: 2, 
      opacity: 1, 
      color: 'white', 
      dashArray: '', 
      fillOpacity: 0.7 
     }; 
    } 

    function style2010(feature) 
    { 
     return { 
      fillColor: getColor(feature.properties.Pop_2010), 
      weight: 2, 
      opacity: 1, 
      color: 'white', 
      dashArray: '', 
      fillOpacity: 0.7 
     }; 
    }; 

, 내가 대신 하나의 "스타일"기능을 사용하려면 내가 필요로하는 해마다 별개의 기능을 제공합니다. 예 :

 function styleByYear(feature, year) 
    { 
     var property = 'feature.properties.Pop_'; 
     property += year; 
     return { 
      fillColor: getColor(property), 
      weight: 2, 
      opacity: 1, 
      color: 'white', 
      dashArray: '', 
      fillOpacity: 0.7 
     }; 
    } 

그러나 두 번째 인수를 스타일 함수에 전달하는 방법은 무엇입니까? L.geoJson 생성자에서 코드의 첫 번째 부분에서 볼 수 있듯이 함수의 이름 만 쓰면됩니다. 어떻게해야합니까? 그리고 또 하나의 질문 : 첫 번째 인수 ('feature')가 레이어 생성자에 전달되는 방식은 무엇입니까?

Answer 1

당신은 Leaflet tutorial on GeoJSON에 무엇을 시도 할 수 있습니다. "옵션"섹션에서 두 번째 코드 섹션을 찾으십시오. 일반 스타일링을 먼저 추가하면됩니다 (예 : 두 해 모두 동일). 예 특정 코드를 추가하는 해당 사이트에서 가져온 :

geojsonlayer = L.geoJson(regionData, { 
    style: function(feature) { 
    var finalStyleObject = normalStyling(feature); //return the normal style object 
    switch (feature.properties) { //switch through the various years 
     case 'Pop_2002': {finalStyleObject.fillColor: "#ff0000"}; 
     case 'Pop_2010': {finalStyleObject.fillColor: "#0000ff"}; 
    } 
    return finalStyleObject; 
    } 
}); 

function normalStyling(feature){ 
    return { 
     weight: 2, 
     opacity: 1, 
     color: 'white', 
     dashArray: '', 
     fillOpacity: 0.7 
    }; 
} 

Answer 2

을 당신이 전역 변수를 만들 경우 :

var property = 'Pop_' + year 

및 편집 다음 (대신 점 표기법의 당신은 사용해야 괄호)로 기능을 :

function styleByYear(feature) 
{ 

    return { 
     fillColor: getColor(feature['properties'][property]), 
     weight: 2, 
     opacity: 1, 
     color: 'white', 
     dashArray: '', 
     fillOpacity: 0.7 
    }; 
} 

나는 당신과 같은 choropleth 튜토리얼에 기초하여 묻고있는 것과 비슷한 것을했습니다. 다른 날짜의지도 스타일을 변경하는 여러 개의 단추가 있습니다.