当你有十六进制颜色时设置矢量特征填充不透明度

Question

我正在尝试在 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
            })
          })]
        }

Answer 1

您可以使用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 函数维护的 "color strings to color arrays" 缓存。

见http://openlayers.org/en/master/apidoc/ol.color.html?unstable=true#asArray。

Answer 2

来晚了，但可能对某人有所帮助。使用 rgba 属性也是可能的。

fill: new ol.style.Fill({color: 'rgba(255, 255, 0, 0.63)'}),

Answer 3

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

当你有十六进制颜色时设置矢量特征填充不透明度

Setting Vector Feature Fill Opacity when you have a hexadecimal color

openlayers-3