您的位置:首页 > Web前端

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

2016-07-12 22:25 786 查看
如何在同一个图层中添加 不同颜色的要素?

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
})
})
}));
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  openlayer feature style