我正在尝试在 OL3 中设置矢量特征的填充不透明度,但如果我有十六进制值,则无法弄清楚如何做到这一点...我已经看过 rgba 的示例。有什么建议吗?
这是我所拥有的:
style : function(feature, resolution) {
return [new ol.style.Style(
{
stroke : new ol.style.Stroke(
{
color : feature.get('color'),
width : 2
}),
fill : new ol.style.Fill(
{
color : feature.get('color'), //'#FF0000'
opacity : 0.2 // I thought this would work, but it's not an option
})
})]
}
这已经晚了,但可能会对某人有所帮助。 使用 rgba 属性也是可以的。
fill: new ol.style.Fill({color: 'rgba(255, 255, 0, 0.63)'}),
您可以使用
ol.color.asArray
功能。该函数将颜色字符串转换为颜色数组。
所以这就是你可以使用的:
var hexColor = feature.get('color');
var color = ol.color.asArray(hexColor);
color = color.slice();
color[3] = 0.2; // change the alpha of the color
slice()
用于创建新的颜色数组。这是为了避免损坏 ol.color.asArray
函数维护的“颜色字符串到颜色数组”缓存。
参见 http://openlayers.org/en/master/apidoc/ol.color.html?unstable=true#asArray。
import ol_color from 'ol/color';
colorWithAlpha(color, alpha) {
const [r, g, b] = Array.from(ol_color.asArray(color));
return ol_color.asString([r, g, b, alpha]);
}
在学习了其他答案后, 我会用一行来做:
let half_orange = ol.color.asString(
ol.color.asArray('orange')
.slice(0, 3).concat(0.5));