2014-12-03 7 views
3

Я не могу получить непрозрачность непрозрачности, работающую в OpenLayers 3, независимо от того, что я пробую. То, что я пытаюсь достичь, - это нарисовать линию на карте плитки OSM с 0,5 непрозрачностью.Как сделать непрозрачность штриховки в OpenLayers 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).

Например, вот как вы можете иметь полупрозрачный желтый:

color: [255, 255, 0, 0.5] 

А вот другое обозначение:

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

Согласно документации, непрозрачность устанавливается с использованием свойства, называемого «непрозрачность», но не использующего параметр цвета. И я уже понял, что могу использовать свойство цвета, поэтому не уверен, почему вам нужно было опубликовать это. – Laowai

+2

Где вы видите опцию «opacity» для «ol.style.Stroke» в документах? См. Http://openlayers.org/en/master/apidoc/ol.style.Stroke.html?unstable=true. – erilem

+1

Я предполагаю, что опция «непрозрачность» была в конце концов только на бета-версии 3.0.0, openlayers.org/en/v3.0.0-beta.1/apidoc/ol.style.html, хотя ее также в мастерской материал http://openlayers.org/ol3-workshop/vector-style/style-intro.html#symbolizers. – Laowai

2

Я не мог получить свойство «непрозрачности» работать, но мне удалось решить эту проблему с помощью Значение rgba для свойства color.

+1

Это правильное решение. Не существует свойства 'opacity'. – ahocevar