5

Leafletフレームワークを使用してコロプレスマップに取り組んでいます。数年間、いくつかの個別のレイヤーを用意したいので、次のコードを作成しました (「style2002」と「style2010」の名前のみを引数なしで渡す必要があることに注意してください)。

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

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

、属性に応じてベクターポリゴンを色付けしている「スタイル」関数があります（名前はプレフィックス「Pop_」と年です）は次のとおりです。

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

ご想像のとおり、必要な年ごとに個別の関数ではなく、1 つの「スタイル」関数を使用したいと考えています。何かのようなもの：

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

しかし、スタイル関数に 2 番目の引数を渡す方法は? L.geoJson コンストラクターでは、最初のコードからわかるように、引数なしで関数の名前のみを記述します。私は何をすべきか？もう 1 つの質問: 最初の引数 ('feature') がレイヤー コンストラクターにどのように渡されるのか..?

4

2 に答える 2

0

GeoJSON の Leaflet チュートリアルにあるものを試すことができます。「オプション」セクションで 2 番目のコード セクションを探します。最初に通常のスタイリングを追加するだけです (つまり、両方の年で同じもの)。特定のコードを追加するそのサイトからの例:

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
    };
}
于 2013-09-17T09:29:29.903 に答える