使用D.R.Y的OpenLayers的分区统计图

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