【OpenLayer3】Feature設定不同顏色技巧
阿新 • • 發佈:2019-01-08
如何在同一個圖層中新增 不同顏色的要素?
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
})
})
}));