【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
         })
     })
 }));
  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值