2014-12-03 54 views
3

無論我嘗試什麼,我都無法在OpenLayers 3中獲取筆畫不透明度。我嘗試實現的是用0.5不透明度畫OSM瓷磚貼圖。如何使筆畫不透明度在OpenLayers 3中工作3

下面是示例代碼:

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/

回答

12

不透明度通過color選項設置,作爲顏色值的第四個元素(A,代表RGBA中的「Alpha」)。

例如這裏是你如何能有一個半透明的黃色:

color: [255, 255, 0, 0.5] 

這裏有另外一個符號:

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

根據文檔的不透明度,使用屬性稱爲「不透明度」,而不是使用顏色選項。我已經知道我可以使用顏色屬性,所以不知道爲什麼你需要發佈這個。 – Laowai 2014-12-03 07:35:17

+2

你在哪裏看到文檔中的ol.style.Stroke的「不透明度」選項?請參閱http://openlayers.org/en/master/apidoc/ol.style.Stroke.html?unstable=true。 – erilem 2014-12-03 08:13:05

+1

我認爲「不透明」選項最終只在3.0.0 beta版本openlayers.org/en/v3.0.0-beta.1/apidoc/ol.style.html上,儘管它也在研討會上材料http://openlayers.org/ol3-workshop/vector-style/style-intro.html#symbolizers。 – Laowai 2014-12-04 01:13:59

2

我無法得到的「透明度」屬性的工作,但我設法解決使用問題'color'屬性上的rgba值。

+1

這是正確的解決方案。沒有「不透明」屬性。 – ahocevar 2014-12-03 16:41:33