【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 }) }) }));
相关文章推荐
- some new eigrp feature
- JQuery插件Style定制化方法的分析与比较
- CSS和JS标签style属性对照表(方便js开发的朋友)
- ppk谈JavaScript style属性
- asp中去除html中style,javascript,css代码
- javascript下用for( in )语句 获得所有style 内容的脚本代码
- JavaScript修改css样式style动态改变元素样式
- JavaScript修改css样式style
- Default style sheet for HTML 4
- JavaScript操作class和style样式代码详解
- gridview生成时如何去掉style属性中的border-collapse
- Android入门之Style与Theme用法实例解析
- Android自定义Style实现方法
- JavaScript中的style.display属性操作
- js改变style样式和css样式的简单实例
- JavaScript正则表达式匹配 div style标签
- 【转】SourceInsight 中集成Artistic Style 格式化代码 3ff0
- 自学习 与 无监督特征学习
- FileMaker开发过程中的风格保存功能