javascript - DRY を使用した OpenLayers によるコロプレス マップ

Question

コロプレス マップに DRY 哲学を適用しようとしていますが、何かが間違っています。コロプレスを様式化するために、これを使用します。

var stroke = new ol.style.Stroke({
    color: 'rgba(255, 255, 255 ,1.0)',
    lineDash: [3, 3],
    lineCap: 'butt',
    lineJoin: 'miter',
    width: 0.75,
})

var pop1 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(242, 241, 45, 0.75)',
      }),
});

var pop2 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(238, 211, 34, 0.75)',
      }),
});

var pop3 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(230, 183, 30, 0.75)',
      }),
});

var pop4 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(218, 156, 32, 0.75)',
      }),
});

var pop5 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(202, 131, 35, 0.75)',
      }),
});

var pop6 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(184, 107, 37, 0.75)',
      }),
});

var pop7 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(162, 86, 38, 0.75)',
      }),
});

var pop8 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(139, 66, 37, 0.75)',
      }),
});

var pop9 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(114, 49, 34, 0.75)',
      }),
});

var istat_2011 = new ol.layer.Vector({
  title: 'Polygons',
  source: new ol.source.Vector({
      url: '....',
      format: new ol.format.GeoJSON(),
  }),
  style: function(feature, resolution) {
    data = feature.get('p1');
    if ( data < 77 ) {
      return [pop1];
    } else if ( data >= 77 && data < 202 ) {
      return [pop2];
    } else if ( data >= 202 && data < 356 ) {
      return [pop3];
    } else if ( data >= 356 && data < 540 ) {
      return [pop4];
    } else if ( data >= 540 && data < 779 ) {
      return [pop5];
    } else if ( data >= 779 && data < 1086 ) {
      return [pop6];
    } else if ( data >= 1086 && data < 1465 ) {
      return [pop7];
    } else if ( data >= 1465 && data < 2210 ) {
      return [pop8];
    } else if ( data >= 2210 ) {
      return [pop9];
    }
  },
});

このコードを使用すると、問題なくマップを表示できます。しかし、これを使おうとすると、すべてのポリゴンが黒くなります。

var colorGradient = [
  'rgba(242, 241, 45, 0.75)',
  'rgba(238, 211, 34, 0.75)',
  'rgba(230, 183, 30, 0.75)',
  'rgba(218, 156, 32, 0.75)',
  'rgba(202, 131, 35, 0.75)',
  'rgba(184, 107, 37, 0.75)',
  'rgba(162, 86, 38, 0.75)',
  'rgba(139, 66, 37, 0.75)',
  'rgba(114, 49, 34, 0.75)'
]

var istat_2011 = new ol.layer.Vector({
  source: new ol.source.Vector({
      url: '....',
      format: new ol.format.GeoJSON(),
  }),
  style: new ol.style.Style({
      stroke: new ol.style.Stroke({
          color: 'rgba(255, 255, 255 ,1.0)',
          lineDash: [3, 3],
          lineCap: 'butt',
          lineJoin: 'miter',
          width: 0.75,
      }),
      fill: new ol.style.Fill({
        color: function(feature, resolution) {
          data = feature.get('p1');
          if ( data < 77 ) {
            return[colorGradient[0]]
          } else if ( data >= 77 && data < 202 ) {
            return[colorGradient[1]]
          } else if ( data >= 202 && data < 356 ) {
            return[colorGradient[2]]
          } else if ( data >= 356 && data < 540 ) {
            return[colorGradient[3]]
          } else if ( data >= 540 && data < 779 ) {
            return[colorGradient[4]]
          } else if ( data >= 779 && data < 1086 ) {
            return[colorGradient[5]]
          } else if ( data >= 1086 && data < 1465) {
            return[colorGradient[6]]
          } else if ( data >= 1465 && data < 2210 ) {
            return[colorGradient[7]]
          } else if ( data >= 2210 ) {
            return[colorGradient[8]]
          }
        },
      }),
  }),
});

グラデーションが使用されない理由がわかりません。ポリゴンの境界は正しく表現されていますが、塗りつぶしは黒です。