使用 D.R.Y 的 OpenLayers 的 Choropleth 地图

Question

我正在尝试应用 D.R.Y.等值线地图上的哲学，但有问题。现在我用这个来风格化一个合唱团：

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]]
          }
        },
      }),
  }),
});

我不明白为什么不使用渐变。多边形边框正确表示，但填充为黑色。

Answer 1

color 不能是函数，style 必须是函数

  style: function(feature, resolution) {
    var data = feature.get('p1');
    var color;
    if ( data < 77 ) {
      color = colorGradient[0];
    } else if ( data >= 77 && data < 202 ) {
      color = colorGradient[1];
    } else if ( data >= 202 && data < 356 ) {
      color = colorGradient[2];
    } else if ( data >= 356 && data < 540 ) {
      color = colorGradient[3];
    } else if ( data >= 540 && data < 779 ) {
      color = colorGradient[4];
    } else if ( data >= 779 && data < 1086 ) {
      color = colorGradient[5];
    } else if ( data >= 1086 && data < 1465) {
      color = colorGradient[6];
    } else if ( data >= 1465 && data < 2210 ) {
      color = colorGradient[7];
    } else if ( data >= 2210 ) {
      color = colorGradient[8];
    }
    return 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: color
      }),
    });
  }