【OpenLayer3】Feature设置不同颜色技巧

如何在同一个图层中添加 不同颜色的要素？

 var highlightLayer  = new ol.layer.Vector({
       source: new ol.source.Vector()
    });
 var highllightSource = highlightLayer.getSource();

 var colorSet = ['#1fca04','#cf5a34','#adda5f'];

 var newFeature = new ol.Feature({
         geometry:new ol.geom.MultiPoint(selectedCoords),
         style:   new ol.style.Style({
                      image: new ol.style.Circle({
                                   radius: 7,
                                   fill: new ol.style.Fill({
                                            color: colorSet[0]
                                            opacity: 0.5
                                    })
                      })
       })
   }));

然而，并不能正常显示 要素的颜色，以及透明度，不知为什么。

改用下面的方式就可以正常显示了。

// 通过 ol.color.asArray 将原来16进制的颜色值，改为 r,g,b,a的数组
 var highAlpColor = ol.color.asArray('#1fca04');
 highAlpColor = highAlpColor.slice();  
 highAlpColor[3] = 0.9;

 var newFeature = new ol.Feature({
      geometry:new ol.geom.MultiPoint(selectedCoords)
 });

 // 分开来设置 style
 newFeature.setStyle(new ol.style.Style({
     image: new ol.style.Circle({
         radius: 7,
         fill: new ol.style.Fill({
             color: highAlpColor
         })
     })
 }));

转载自：https://blog.csdn.net/gdp12315_gu/article/details/51893121