From 8bf252e70f38f5396b8881b0619150ec2278669a Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 12 Nov 2018 15:16:06 +0100 Subject: [PATCH] Handle layer opacity in the composite renderer --- .../linestring-style-opacity/expected.png | Bin 0 -> 8399 bytes .../cases/linestring-style-opacity/main.js | 70 ++++++++++++++++++ src/ol/renderer/Composite.js | 5 +- 3 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 rendering/cases/linestring-style-opacity/expected.png create mode 100644 rendering/cases/linestring-style-opacity/main.js diff --git a/rendering/cases/linestring-style-opacity/expected.png b/rendering/cases/linestring-style-opacity/expected.png new file mode 100644 index 0000000000000000000000000000000000000000..18af8ebc7840542c794ae036b05b56ac85e6f84e GIT binary patch literal 8399 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

;KfBPXBrX&Q4 z(feRb`vxlq3X@(YD+?ZP39+OrfB5i$7GOt;f*vG|oA)KuM3YYy=(YY#;?U`4s9`nT>pUD2W5f_4v9C3tQYjBTS@$gf*f0eU{iiuu1|@f zdv}2k;r@&CXSbMhstMi=_P~Gb7yaqK%<@ zW))x4cIzGwLj6>)o3gals2pZQ*~k@1Zqa;FJA;n+%De2xRR5SoS3y`)b|?3`1MVIXbkXSbY?6Tu zqmnlymQUAq{Or?`sKFMy8v5FeC((c|RojALQ|VNq`YPxz#f1W`D5lonc~-m2mqE{) zE=~)buCt~Dt8L2QlT$tw-HJNH6?6vrYm5S4$=<=CVQfEHLLi2}C^Tp0zFEcN%j~bk zpdurk&09041ld&qG33*c#Ti*0}m*YI@tZ^u=oMDlf=%C zTId*Q6m2~h#^pjlu5h4I`Wj!o`W7bm#Q~nOMjzd@z|jFi{L-q75tMlpxg-~|v>!&( z?J?ws9BJoNi21X3O^bCd?nFR*LF>hdZX1@A0~tS%=PYhbt6{wH8&G{tOsd^4sdK%` zM41xP$i-vS{&gV^6gzP)5&}sNoXI1SScH~f?Y9VzZ(aKLigmSS4OKWzFM;Q95p@Md z{KAg8n28%_00dcNs$%Iu1^^`NcR2tB_{}jWbizcW7l_;h5nl_ adxHCGctcWzxH4E3bk4}!@P)oB=6?XEKdICJ literal 0 HcmV?d00001 diff --git a/rendering/cases/linestring-style-opacity/main.js b/rendering/cases/linestring-style-opacity/main.js new file mode 100644 index 0000000000..e663640825 --- /dev/null +++ b/rendering/cases/linestring-style-opacity/main.js @@ -0,0 +1,70 @@ +import Map from '../../../src/ol/CompositeMap.js'; +import View from '../../../src/ol/View.js'; +import Feature from '../../../src/ol/Feature.js'; +import LineString from '../../../src/ol/geom/LineString.js'; +import VectorLayer from '../../../src/ol/layer/Vector.js'; +import VectorSource from '../../../src/ol/source/Vector.js'; +import Style from '../../../src/ol/style/Style.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; + + +const vectorSource = new VectorSource(); +let feature; + +feature = new Feature({ + geometry: new LineString([[-60, 60], [45, 60]]) +}); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new LineString([[-60, -50], [30, 10]]) +}); +feature.setStyle(new Style({ + stroke: new Stroke({color: '#f00', width: 3}) +})); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new LineString([[-110, -100], [0, 100], [100, -90]]) +}); +feature.setStyle(new Style({ + stroke: new Stroke({ + color: 'rgba(55, 55, 55, 0.75)', + width: 5, + lineCap: 'square', + lineDash: [4, 8], + lineJoin: 'round' + }) +})); +vectorSource.addFeature(feature); + +feature = new Feature({ + geometry: new LineString([[-80, 80], [80, 80], [-40, -90]]) +}); +feature.setStyle([ + new Style({ + stroke: new Stroke({color: '#F2F211', width: 5}) + }), + new Style({ + stroke: new Stroke({color: '#292921', width: 1}) + }) +]); +vectorSource.addFeature(feature); + + +new Map({ + pixelRatio: 1, + layers: [ + new VectorLayer({ + opacity: 0.5, + source: vectorSource + }) + ], + target: 'map', + view: new View({ + center: [0, 0], + resolution: 1 + }) +}); + +render(); diff --git a/src/ol/renderer/Composite.js b/src/ol/renderer/Composite.js index 6cbe9c586a..f1a6686131 100644 --- a/src/ol/renderer/Composite.js +++ b/src/ol/renderer/Composite.js @@ -99,7 +99,10 @@ class CompositeMapRenderer extends MapRenderer { const layerRenderer = this.getLayerRenderer(layer); if (layerRenderer.prepareFrame(frameState, layerState)) { const element = layerRenderer.renderFrame(frameState, layerState); - // TODO: deal with opacity + const opacity = layerState.opacity; + if (opacity !== element.style.opacity) { + element.style.opacity = opacity; + } this.children_.push(element); } }