如何使 Stroke 不透明度在 OpenLayers 3 中工作答案

【问题标题】：How to make Stroke opacity work in OpenLayers 3如何使 Stroke 不透明度在 OpenLayers 3 中工作
【发布时间】：2014-12-03 04:04:04
【问题描述】：

无论我尝试什么，我都无法在 OpenLayers 3 中使用 Stroke opacity。我试图实现的是在 0.5 不透明度的 OSM 平铺地图上画一条线。

这里是示例代码：

var lineString = new ol.geom.LineString([
   [4.9020, 52.3667],
   [4.9030, 52.3667],
   [4.9040, 52.3667],
   [4.9050, 52.3667]
]);
lineString.transform('EPSG:4326', 'EPSG:3857');

var lineLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: lineString,
            name: 'Line'
        })]
    }),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'yellow',
            opacity: 0.5,
            width: 15
        })
    })
});    

var view = new ol.View({
    center: ol.proj.transform([4.9020, 52.3667], 'EPSG:4326','EPSG:3857'),
   zoom: 18
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    lineLayer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }),
  view: view
});

你可以在这里看到它： http://jsfiddle.net/abgcvqw3/1/

【问题讨论】：

标签： openlayers-3

【解决方案1】：

不透明度通过color 选项设置，作为颜色值的第四个元素（A，表示 RGBA 中的“Alpha”）。

例如，您可以通过以下方式获得半透明的黄色：

color: [255, 255, 0, 0.5]

这是另一种表示法：

color: 'rgba(255,255,0,0.5)'

【讨论】：

根据文档，不透明度是使用名为“不透明度”的属性设置的，而不是使用颜色选项。而且我已经发现我可以使用颜色属性，所以不知道你为什么需要发布这个。
您在文档中哪里看到ol.style.Stroke 的“不透明度”选项？见openlayers.org/en/master/apidoc/…。
我猜“不透明度”选项最终只出现在 3.0.0 beta 版本 openlayers.org/en/v3.0.0-beta.1/apidoc/ol.style.html 上，即使它也在车间材料openlayers.org/ol3-workshop/vector-style/….

【解决方案2】：

我无法让 'opacity' 属性工作，但我设法通过在 'color' 属性上使用 rgba 值解决了这个问题。

【讨论】：

这是正确的解决方案。没有opacity 属性。