From 275ecca473aabbac32ed3c530bc7870d01b8a68d Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 1 Jan 2022 11:51:06 -0700 Subject: [PATCH] Use background property for vector layers --- examples/export-map.js | 23 ++++++++---- src/ol/renderer/canvas/ImageLayer.js | 7 +++- src/ol/renderer/canvas/VectorLayer.js | 7 +++- .../layer-vector-background/expected.png | Bin 0 -> 20122 bytes .../cases/layer-vector-background/main.js | 33 ++++++++++++++++++ .../layer-vectorimage-background/expected.png | Bin 0 -> 20122 bytes .../layer-vectorimage-background/main.js | 33 ++++++++++++++++++ 7 files changed, 95 insertions(+), 8 deletions(-) create mode 100644 test/rendering/cases/layer-vector-background/expected.png create mode 100644 test/rendering/cases/layer-vector-background/main.js create mode 100644 test/rendering/cases/layer-vectorimage-background/expected.png create mode 100644 test/rendering/cases/layer-vectorimage-background/main.js diff --git a/examples/export-map.js b/examples/export-map.js index a7f0dd1aa5..f33467988d 100644 --- a/examples/export-map.js +++ b/examples/export-map.js @@ -1,24 +1,29 @@ import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; +import VectorSource from '../src/ol/source/Vector.js'; import View from '../src/ol/View.js'; +import {Fill, Stroke, Style} from '../src/ol/style.js'; import { Heatmap as HeatmapLayer, - Tile as TileLayer, Vector as VectorLayer, } from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; const map = new Map({ layers: [ - new TileLayer({ - source: new OSM(), - }), new VectorLayer({ + background: '#a9d3df', source: new VectorSource({ url: 'data/geojson/countries.geojson', format: new GeoJSON(), }), - opacity: 0.5, + style: new Style({ + stroke: new Stroke({ + color: '#ccc', + }), + fill: new Fill({ + color: 'white', + }), + }), }), new HeatmapLayer({ source: new VectorSource({ @@ -51,6 +56,12 @@ document.getElementById('export-png').addEventListener('click', function () { map.getViewport().querySelectorAll('.ol-layer canvas, canvas.ol-layer'), function (canvas) { if (canvas.width > 0) { + const backgroundColor = canvas.parentNode.style.backgroundColor; + if (backgroundColor) { + mapContext.fillStyle = backgroundColor; + mapContext.fillRect(0, 0, canvas.width, canvas.height); + } + const opacity = canvas.parentNode.style.opacity || canvas.style.opacity; mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); diff --git a/src/ol/renderer/canvas/ImageLayer.js b/src/ol/renderer/canvas/ImageLayer.js index 663b9df498..0ff1effd2c 100644 --- a/src/ol/renderer/canvas/ImageLayer.js +++ b/src/ol/renderer/canvas/ImageLayer.js @@ -135,7 +135,12 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer { const canvasTransform = toTransformString(this.pixelTransform); - this.useContainer(target, canvasTransform, layerState.opacity); + this.useContainer( + target, + canvasTransform, + layerState.opacity, + this.getBackground(frameState) + ); const context = this.context; const canvas = context.canvas; diff --git a/src/ol/renderer/canvas/VectorLayer.js b/src/ol/renderer/canvas/VectorLayer.js index edbacf1bcd..c83441b5f3 100644 --- a/src/ol/renderer/canvas/VectorLayer.js +++ b/src/ol/renderer/canvas/VectorLayer.js @@ -233,7 +233,12 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer { const canvasTransform = transformToString(this.pixelTransform); - this.useContainer(target, canvasTransform, layerState.opacity); + this.useContainer( + target, + canvasTransform, + layerState.opacity, + this.getBackground(frameState) + ); const context = this.context; const canvas = context.canvas; diff --git a/test/rendering/cases/layer-vector-background/expected.png b/test/rendering/cases/layer-vector-background/expected.png new file mode 100644 index 0000000000000000000000000000000000000000..6c7e4e7478b857c57f483e2bd20f762240d286ac GIT binary patch literal 20122 zcmXt=1yq#Z_w|Ra0R)Mmk?t;OP+C$%It1zNZcw^Gx)G!i7`i3DbV?1~Fm%WJ`1`MS zEf%?8W}fHXbNAW%bBIt=k;BF$#RP#s*b4IRH9#N);8O$;Ix6r%-?`NM-&Zaga?+rx zG4g#7h#I8uUP{w5>$rX2ePeL0>OogN5M&aP$)-70!tz=Dcplqmq$A?uP`{@++mAci z;n<0IrPvM z#$;27xJ;MGiwbD-$55W8G1}#sa3fO`KW{)`2DdJxkkcJ?!2K|LIlL1evaxzOB5ART zH876d$)dS^6_2Yg$}3Q2Yn|Bs-d4l>5kQaQaQNBE$mZZpzDC*F)|T1MX1Gb-ioI$K zeJ|JPNl8#nQ65)ap78aI_69t~9-3!GYA-AX>I!(=Y>kOa`C6*UQbUI#_xE!7?l;a> zjl^{eMOMjm{lVlX6CrkQakWD1^dKn2s|{$K#z+LN1tRbas>k@l`x9SxIY z)(}+C+Idy@G$BL5!NSBxd_#&(*B7#`C9-FbWv$ZA$ux>tO%M8?h zh&2YGeCfn7(eO48pYl6ijm~}_QMK% z_ZHr1EB5muK7wv9j(Xa?xJ&6ZeMQ9va2*WU-9}Bg`nw<@RvD{TGuz9G@H<350{5s@ z_(zVkAZxca@23qvj+Y1S{s~t)N!|Uz`PhSnKxDYC@^s%>bOd>*)^1P+8kP>Sr#T6R z!MsTZ!+|sE+=7b+1=)U8jJGw6zj1jh_l86@!j9x8Gm>!zL!u()-=b*g0mQ&&SxGnB zB8sIOsKF2dm)LhNi0R21NvDK_7k01Y0A)edmZ@KQOO{mClAQaPH9lcK7qGIn5zzt!N%!i-JXuc5CDxwp)t9w;xfpVik*FKuCJnG9 zZ;>11RJIgMoI2GV&#@kF!5~v`Y7zC@XOB18?>7*d9L+nWOw86Fh|xMatuh)<(SBx% zTDm%}Guiv*Ps%Yg2Hm>-wh8;s@QNWvQ?4rM#%G|G^h zmjg8|)AJ#5vcq{DSFs2T1w}_?f*DgBDhs|PNHmFergg1wy ztlRw2TN-3RdvkL+Unuq%SY=@nQPZVYtZ{~D9yQ@c!5QhZ8mj%xM6XKvhO>tRdm#^Cw00mME3XHmMk zm%)6y_J5+5thyX&XHQW`d+t~VyrW)m7YSUoW53ked!E5RNLqNAR(y!- zGVENj-`s{q!J#G)2y@k&!l9SLafwks<$pU?Bt?-v@WGEsTR!|<)64G!))Y)&_q3ns z)Z0T(4_e{As=u_#2jNsSnaN@!%C8$ZEGB;26+PGqO8z-MJh3O`Qs&ioB|FVWFfh6N zX~>rqzJU zwfi@$^)r{B;JyzZb-d7K|!|Q-8ZYbDdLs7&FL0o7< zxJ_RCX1yd2FD;hA##o-yKlXf$9!gqvfeJP=7a6s9Sj-EL6W+u2sHjdSz~7 zSLFfht5s_m99hJZEeX4Ns@d5RpVMR}aI5E1=fGk6(M)3`cX;2}*z!CYW9PxbAd7Pa zdq&ma;I{L}P5By9UezXSdbqN`82!4N>^04ml;t58R;2ffm-~8VJVEwTAvEMBAUl8l zxPpIh*0m`8p`SXMTYrB3b?9S8o_8p4Zn^aAIA6rk-wkzQwp7Ut^S*k|SWguAEtn6u z6RUqK4;DOwIy~rPx+@H!+f~LGglIhRke2Z`aT~M*%PV}21~#{m?x-<1D%s@my6`&z zU{3awfG z$%tkG>#{aYg{E5<_y(u3yi`t)WoVB*r6f^=B2TQiun$vgFvoTB%N z$oZN}Ze;nKgpm`~Ja-Y@gJ*XcVhY`Em3R-yJCEmzS^L%LVW@$Kfui;W$~GG0yyDJS zQC-#-358sC04-F5c*+aJqWSo=?**ZCYBmv4&IC3C16}2C7wb8*8CIOCCI$H zdM9dZc|}U2d+DrmGcu||(O_(?Vp6Kr;0jSo%3-@KbxEAaDY0zFOY0qdm@7GCWWc*dS|>0UbyORn2sT(;%V-<>-?ziEtiaJPTL>xUIG4sX@xPq<~q z`kEXn-1OXcf&;qXu3xhr$lIj0!y;=?(r&N}lz_iBVf<;4MELjNA2$QJ-AnSYe2Grr zq?T+rn3l@33$@C~!FlK8lE&VZ0hXLj&=LUACCwhXH`a;eEhB4|Cv{e8hd=V;F=j6| zwz$BbfMYcOQ`zkaYed(-N(O49;W4_u@Dw5X4^CVW*8mALU~bWkDzREG0 zgDRKR^E2=It$cKX!%XJWHWXx}deB8V=qm6<*}0Wp1IORwF^B#WcCX{dHVaQ(tATLa zxROf{#8g$c`Nqa%`(5?d84nc|6-QsSPbzDvi<$7#OYFVV(crSZFVFaGB218j>( zK8m$_tk8K9{N9O%?mrunLo!<+9=5FG%#>eBMao!JO7O-fVyEJ#w*UZO~-s zQ6}>w$v`kXK!)hBpxoQNP%<(ydfq%EMR#o4VaS*M)@1R@c!{byoG<*lxt;s+$QTS!1NU0R4q8qsdYwTiOEhqk5Ap*yoVqFLYJw~r{=Fg5~+vt0ugEw{~w}&Lm%vp+W+m2yACv8?4 z5MkWg?VnWb^O`Iv>96xN%GfGIZtJIBK}b+QpT@-tfh;8U-1QH7S_1mutcde6!Lqe@f`Mz0?`t zw6>&&2H&r^`8n45sJ_;EL#4Jb>VtIt@_0ua{zQ5Hx5D95CK|Rih>4tX{oym`uDHZ7 z<{bewXOwO`!ZeTTh2hAJaFOPT5aADXogpOcH2eu3%Z%_scd`t+%{Yr34srrGpjb&w zjRUd~9I>zD6%gLAw?)$0lpw4bc#?WP{vxbc6Zx-bf*kuxgK6Pmgm9kK;VHc*;>gMN zK0jTPF3J3t(>m|N`{!DXAeW(^zo#^e9TzIZu8T!6f)Rw3r{ilLP7bn%Hg@5Lo40uo zQhlt$gUiN%IHS00M`!0?jj~XEj&DgxNnw6>N0YW*H9GM&RACn*<(xF{;u+w-<`s1k z+SF&=D6+d9+27(PUObtz@OK#0OYf`O;v?(Ql zyFZI<>?-WP#3q?Fd?Ipg*sZmx8r~aP3dU z<=SwR1>$k&Y_dJRc?Kas7=tL^PxIvoV%)!V{ODtK+W9E3x~3~jOYLdLcgIl$*3K3H z%`+jxJorex25b(=qg;ihPzU&w;V||44^_Nsg1ExhcF?69^`gVLbD#I(sNi$RWI)C( zaDr?M2A5dvfx~aV58TM+u>3N82i5C9tqKfKa`gJ2o=zGuNgF{%VK}i(J{cy4-o$@H z5KbG~??6-X4Nh)UMYJwlA zY|V|y6JIhIijrAG14$+hR1LDq{Eggf$1M|=RFQJDBpPbszWH-%*xy$W7_7ef&l?xm z@|N62!l!ko$9K*)Vls4BHV(pUkOYH1^1x%z<~ zQVos`m@#vivHoTM7J4{!XMj+H;>7y{aJc0PjDrspRd*p;$b)lqrdF~foPSs?s26`4 zxU#YmwuI#0`Le*McevB}awU?8F(iUhVyD>t*P9$k5-C`V!4NS^d!0$Qu@CDGERij%|9xjB7x&ijXQ34YE8!zr8xydiWoo&+W`7~*oj`0d! zb!*`!o+vCo)k<2>)QJo7_Pv(_(*m5G%z=@3{ z@d7#dWs?!Enk(*g;!*g=IO7D55H58(>DCXq?oWvnHJg~P{Z{hHfpY8Ew=yZ$Uv=su zh+#G35qM5VM@L-;_0U8Und~o-AVnX4_3z#;bw=2QTy^o9C1~KYxOvX7z`gBfhgqzA4APxo4vk;=y3Uj>?vbAE zsPD2O!)e5sCep^tXq$VbfKGvdw!yJ51^EYg$eE8<%l!TacXR3lMMH#uGPZWc=B@6M zH|o`I5AYZQ+PmRr{I7@#^U0&s6lyv-INm5tEsMc;)JjMbU=o*vZ`Hh5ss*raqdo;& zb+#skgsyy}XC7qXsZ$^cxODHEG)DIY@gMkMGxUK@wm#6|51R3;7Gbv>x@rT(k2sVU;=MV=70sy;RijZRIl4owBw|QtvEYH8g8Xn} z+B>LRa)aSt&XCXc|5{P%9<(ARp8oi!bB~E=p)zil4iI^UaDQYdBW%2G!_=)w3;S)-i;9bDoz8r8m5dj(n zuwirFG`ByC%x$ryC<1GSlI7!9$PYcUNkwJ#9ZKP4jiD|^eYO>SyXHErgPZUM>c_p!sDxEcpBWsD)dCDcW zOHNqzH zUSJh%BZD|J$c239fTeoexT%EBk~Xs1hZdN5tzD;BaTGUP;NzfxiE2$5VL}zQ(gyvk z8h5e5S;cVmPX+_m1W@QMXyqkVo_Cdc=Oe0$N*ekhy}BK>(wp*n1;Sjm=fvR#rMSK6 zsDJoI%Z|DKj5RXroAn7UFn>*MSR_y!b4PJ6-e z+T8toLr+NCj`xVBwv2XuYYiiBmEUGW-~AfgY41;~V`T-L9X0&Az31OFuB%iP*M|y` zX{c@Bma0vomwV#>@5r@P94@GBQR`tVkF_2JfCK?L% z_t;E&pb9wOkyE0IxuU)kYD6*SoGIi5_a0L(A4@8h$urQ=%|?sdHAnQbN+-!lS}mI) z$9`*s_Ixh?RHVVoi4ayW1>5o&vL|b za{-?dx<;91XjJE$L8LV@xA#Fj=iVzg&UXegN8i%f=QRiV@J)8}3X^AoOK02^p z7iX8`^H<^3CRqIOZuhC2yHw~#F?Y^}h44_yfwNIX(1)*a;ZNcY*Up9~NXn9id?5@* z+QRp^d*0R}W?cJbM;CV}pf#Y$@Ea91=Vtvq$px-aAwJfc=GAJGBS8InLV5IO+#C6e zEy9QC_v@#Y`=VBGrKQSZ;b}~w=|gv8cai+&yWbOhqx0&eb{V{SRXT}?{U>55>sWFK zq!crmNoKiJt8G1k4`EK3j!V1PZDHHnDH9E!SO}}Nzegigx++Q|a`}}g8=`lT8qSmM zEv$=SM$A32FEp9r`DqC-7iyJz=@BYVpE_Hrl5}UUgDT+tpS@RNp^CiyTt_;qp~aPb z1+XlKGZ_TeNW4?ld(n3){S2J}O|BnIOua$AG2&|{#fwPuU!u&iuiov>KK4b{jc*k` zAn{8;*R4$!WYqskjryY><73~(j15e?)GyhoHpWCYhmRqdSq+pkLtU_RMrklNiOC-$!cP00CC#*1nWZbQUgV!XbfGp~+V{7w&BJHAsb*8F0QMVR1 z116- zTW6BfI&|Ha^zxVOhgU_bwh>RyM8GEQK=7@BHofWxTty$G8QS4ruzL1K@A_{*Teqle zdT<6rPX=Sg6MG;oM}th!-9JsdT*dHn=KesRUutQ~o2`P8n;7Yc{-1@0^WyN4NMh#O zfu3+=MCtMIqECCu26heq*;wx64bkY%$H*{VEH^yqGpogQu@2r|0^ zmOfkUJdCt8k+(Rd=KI&eqhoiUlT9FI+VXVpUbHL}6yVZg`361mx8|A0XYu}l41Vn% zaBQ(H+EP_$P`NSvQ&mmF>axWECZ2_?csHbqrLzovcTgymOBU)(y=N8(l#cO_Ix>S_ z@oIHLMnl*Lt4A3ZD1B{eWL_r&c6sg6uk?}#S%+85WlWjL>f|~drmMQre^i_kr&VR6 zD0dkb8BC(r_x8};VRq~Wm0Ag@uWN+u0HgDb>m$yL@6llawT**NMq=mB8{lA@a9goK zCe@@{HT#+0KmzJ`i%5;=weKSa;xO# zPXH`9kChHMQ#5fH%5osAB+3dn#6W>i2Ur2%|2RdhgwS5LWKW#=tTQPIZWYm908Oap z>sT?JdU$ZVy?ykHEA0>4)ko#g`kzcNe#9|-K zaC8TFp&!kM;Zy}~0f$xhy{BP$Vl|T_V1y4^-90sjVo*kAviaQ+hLwD(XyP`e7Lvrr ztI)H%N5rcoGN75%0~|Wm9AVO!ww?SdrxBOPql?Pf!B-Pb`z<<|2zeK(%*6#9q;9qp z{$I`)y-gtDLBD0uJYwr6(28cW@a>qU01v8Tiwtvdza@6~$<7i1S3QlFDRz8ooU__k zA#(h6{$sEk;q+;_g@aJ=?7pOed_E&45cN@28_{@qg?+gZ=ZjaCdMh4ww=o=Or6o!c z%EdG$iOA@Sjcg<(Z`cp)Z+IzBg1l`XQ`Hs3F`@LQanb|VyZ_Gu{BApL4P%|T44MD5 z)?CH!yOInzRL%-05hgI3;hs)az)Cnkk{?Jw<&==R^$nES%md`#JniR_$KTmMGR#cU zV|?L3YY7z1)7@g;4tpw%^;xIeGe&^x_qThQl*rp*n3bB-!Z6S|!B(er<@)%nmu@29 z#TT>uWL0T6iF(|4rF*i06jZ$+cl1IA8KLf@u#2?K61?$`2FB zt*;+(%hW~Xz|NUQT|&J%74gRw2PZQxMods!0B!{buyMfja52^C`m((As>9o-UaEx= zn~!&(m{nsF)5In}%)#tkvebU{>h2sHgdp*E2JC&x8ddU&A^qIsNB~60K$eBH6#U14wjI|F*Lt~U zDv3aQvn&12l^7j=UJVA3tpaLv+&0+M+~FOK{afzh8v$K##*Vq}^%6Tl)E{}csoP@y z61rk~3HzXMqnr&dDEW#GF;F$6$8kz6gtKbjP0!SA>6V|ueLT3a^I1}}=j0tqUJt5t z<13Tdf+F0qo_@x+n|?5z*A>C&#tc}9!k(qWFds}6xq+=9}P_0Svda<79mV(+A-W@{7FNk$`?P~G?i zyqtcs5W2k?-geF}zH#D}=+zd+`<_VjegeKPseY?7>x|s|!wFq>VPu=f|AWNZacqNH zmEZKl?h@@lrfcpvr+(N*t=dintPm&)SC5BgsRP_t{SZn@%94V|ma2zy?72}5)WBu= zcSBJ_FYf_!5{+jE$2}O?aIGMkzYp=*TSc4_S+;HjFS=0h*VD95#)#XQ8 zzL!^_E&z-&aQFvP+4s&$A7C>`*>|vI@8Q)FFI(HSR8$1*7$m3)F4W~?t^QD*$op zfjGeupzTk>lk~#@LDeyPBi=gs#WB3<&AJHoN6sEEm`{!tjOX!rJuaQS#q$l(vu>|( z^qbn>yjS9f-x2zFKxRRG@BMU(D9HX^KI%1dppYm}tCi1Aw6%6im}h0T=9*By)!J>A z9mYDZCE;1(YZ?+#uE%7gAy2MIZfol?HtXG2btbXg{(13S!`8-xEkep3?pCy%6u-+B z;_UR*n6vr~*_6)P!HN{ac{gA2&eMpnettuq0JirMZOIz{oQ(E>3#}GLW)mK}V7Vej z=9+=KZK=KQjgFr6sVU0Se3uVTVdc2=Sls=V2VhrXvt=$f3wt58`Q;RRZ( z_!d95-?Vw}DGXb4!TK|EE5x5=i)3@RiZAH<)IWxA>wMDl{er3>diHj0;}(9FKcvdx zl!Y^9#M4cnL%rCyn_v6k6mzZ!MJ8Q;X5edmW9 zybjQl3d=IV`lk_Nr~g7+quEB=}nKEe*EY4 zo%)S&2IMEC%Dy+}o`t!!=;!Z6u3v>Gej~-d)kD>7zBBz#wagEQc0S_6Ozx3?SGi33 zNo1uRPpefEZ`5YXQ{{}Ogb)~O5-kS)QZ$kgpl$mmj)XvM>l4ZETCf6JFA1AkT}n$aqJMcqqD>+huVgDj0gmQ z>NeUHQJ|$BJ--5yZ>Dr<13EOjWYZzpvMtI4KVY{nH_Id~@hPi zyLm{)m222w5CT@jytBa;!$)4t;1-%ptr0Pnw3S#{`Q`!NU#3Xc@1Y=r0OI1DEz+2^ z)UXZQOo1x*@pEsye(?$HIXgiL44HEN--Q*%Zh*+CBN4>D20FnhXGHCIzIP9zhR9|H zs~|5(iIsRn;Q-LVN!zrI7q@%6V|S~qCV58<9jI7blvqitDyaFe8?8v6cA5a(P2pK; zSYqRM<$edy?IkKLSzz85EWhTKte|_Y<*u)o=+JfZzcw;4`Z$1&H`yWIZm`MN*)EYg zCT&Ca_LEjGi8P%1+b+POp(rz+9z9g!y7m=t^wK||4h%d?(};hOh^SD#!Ot4-^7!r# z1#Hd$KH7|1qnGiQhnG=rH8kAfY)cg?xwnJ^VWQ__puhG=VhTa$uPT367{3L& zXA|B2Gbn81`I&Oa48O$cOF%%tI>>=Lyf*|14%@0TB1N@_pZLZ7`NIXy%FfQOfqnyi z0>rjL5+W`JJ7{YU@YOu6^7YHhnTI2p3LdK^11!7p-K5tp-bB~5dm3 zqQu751HD8xc_K-$_Lym3Kc5OIf<-{M!`S}Qyqhg<1Fz|6&cv6l^B5WStv zHfq?*`pXqvOL{_AyR$JYS;*hYCvf{b60bZApq3N4W@m(Ohai3mtSK$b9|RmIqtie<<|UcpzW2vbAxFvVLOs5Rhcjy?Wlv|A%e(+ zt6lf=f|-;?e;P~`)*DVKOG z&?K6DHz)3(bVl9CGk zQqZO`$D<}vf4B$-8n+y^!4^}bj%H>Ao|h2L3lxA%&2H#|yc1560p4ntqyVi<7}i(9 zb}>I(mfSm%A45LJ%iZ(iGYu9S)kNlOf#`p)Livxi(OhW)`NWGGZKMqnmv`ld)ytCrB8j22&~(P_lVb)p@vX; z(NG9oB~g7E%=XbGSTA_Ycn>3@&me5?yX~Zl=R3ezx4E$OoO5H7Cq>q@A2njFE~{m6 z+L|nsj4@t95;S`Ag%+F90 zNK+NRV-T47+c@W6E-;XEIHEok3%8%z56dg8YYqcSzZ->k>A104I)WhZZa3mf!N9j+ z#m_-4OQNVIv%XFn2%0KbT{iS3R-`~sn(PnqLe9h=qA0y9E*H78$^3jqJD@-^a=v=#wcR2_Dbs};g~d4WZ{ z7&F_^Xfj{Jg;BY=FPVSB3O^hN zR7f@&6Kucf=0oFYJLqiEYxo*sBb6}9iGe@k`EXqc_ap<^FA@od56w;=&3#VkHRq3Ry6T_dzxWatKm>`ngnBq<5QkuF!e3 z=|lomB0tJ{ihXc+t=`p;Z{IcG^FUf}bmW|>UOZ3PI}jx2pN6^Hua2S`gNj+V@M(QnzHz&t%_fuaop&AvJk*V z=2pXvj|Xda%fL-|OU4?gFzH`Hb)g6gJOtFmL@;EOW{%O$+RPE}fH>W?UP!N9JNK+( zB7=&o0vkmPU$76;mytPumH^U_FGl{7i7P%)+S3swRPvhvc{`JoJ*)vR z0d;j`IgNP~k${Y)~FyF&8b)S(_8{5Aje>Ppq#$cYitqt)Nd@s7?7*KJm zPFeuEE_Om&O&wdleCQqsL8Xq|@grx_#qGL?cWx$^#l@BXE5If0oYOGBOZ(6edeCx@ zV@{cG7X{cb_q=raX2yw|q>04PYnmeRNPb+UfKJk;y3-CeT(1BxZUsh z_42uF`@BAGA#`M!?W%zN_IFVw3(ycYxkCN*ouzq3E~Q(}*z> zzj>EiT?Q*IcEa1*Cs@i&kToJ(i7gGodQz+^CUo zIclU}xF0}Cnvvgr2Y-m&H~_5{z<;l0lt{IAxX{O?{_`0mQEi2q-1RYPKUy`I4(v)B zj8Ug))^JLA$~Bby%cM*!29)c)UY^Csb-Kqa2^QsP6hkl;1#`2r!>*sATCmp`wPtoX zllJf{RH@ID4|bt@yzMh9D6ew}0&;tL_&Fhi5WQcBc<5y)T*;zbu{=Hwl+#FgrhWPv z-Tt!f?3IZ<|Klw;*jooAM^zi*h(1hHF39T=9VLVqLV34)E_|+j|K!<;o;gLac09ZHd!qYDfW1Bv7X70g;>6tpt8#b%pVlQ}nV-O&{{`lAkqQ_}t-zf0pS&kSqBc`_A~6piRy z+GN}F^X~o*f%e3Ua+glnjTn(@)IPfU=uX=sXqqoUp3e8C(=9VnR6Ti z^}IQY%<ND7fvNPNzn4bDX+jH2e}LexVF`oc z)g_cG##K?{OSD(w$T%TOt87DL&pI9u$H9_Enkog`+TWnG1b1#5Sy;$3uZPek$Wtc` ztu>yQhiEk)8^2TeNDQu^Qy;d-uk#_NB09T%fVbTY6;0nhz&jIC-D^5K<3fJWB-1s@ zPcG#Y88^L#hX*K6c#Ok^JTG>zHOdGoRM3DK8Q{u>bc0q5sjiLJGWEmS#QrI@@tT+~=FQ%az0%^y;Y>0;tq&B(k5*1y?k znLEADNow#~>Xd7D2-8vr*wE}y^0J^mqQEeWy}kWuJCF1s!nm;Kp7nq-q8m_s0oqA; z81(zIfbz7l-pa&4YFM9Q!1I|L{5N**=?22@b6ih<&kIZ{Ja|Q>YD6p+m0z1I$bR6iuG#z^6RTEd%9{jBGZ| ze{ncxeq1efX^X(#$;;`^>GS9z{v;A)u;%r&#+732(`ADlR>|QJX%Y zygNDqXOx7kMvYv!RHvgzy>3obo2;kcvqOVsQ?_`_=ff`sevS_U`{ZnZN{m7(XFOM8 zbBRQj0n^vbn!q89;kmAd(KYdu>gCyC754o2NNi8;wSUxNH=RTPw#UxWqvi8RtnGg} zc-!GpysuooSb_*T8;Uc$D;VV=> zTpl6yDt1qr?g2b-Z{XxhU5kNEVx4Q<6acHUEPgc^khv6e9!0+gKSLsNY}^)ef&lvf zW7-#=M1LtT7F}+WXjYT(vr=hQ-pH*7U~v|axBc*B2QjCYPsc*#r~s9eBc5;*Vr0z3qWTX2~ZFUAhv5bXCS~*--590&FRO z!U_2WsIfIUp62%E+KUluU4ww`H3*!Hv+?JIz%vvpd!vpS{ev8_EABvQw%V-CbufJ%5Tj_d#I4VUZbc= z1+%uzTKUv6<_KZ77|{YWK@XECf+c1524)A{3>SE?RR)~dP)5e2Bx1>f8ttGB^lF8Z zr^r0FT{vE^X4vopxe#rn-E5f>0lai~mI!$yux#QxC#xa<3w4vn?m8>k=IJt{L`@L_ zaO10ac;e^U6i5cpPdW69HKZJb&b6X@^>OYcN}!;Ys&{0n=Q=vyOui7?x9;pZu{B{& z#bOUM0-V`u1{jnr+{Zi?(OY3F&GYEQgE+JuSAcQa@H-iSDVmMk9LKk~y}r&SL*UaM zUMT$CE25`t8BG(+U~Z@ZZ*rR&oi1$~!md?)$!y?U@#AZOp)>_F|FMTBuGDLgr_u)* zvcSxycY^c>W-%hQh0;j;eqP(xc4-8h?H`vPw}s*@lwyAJPA^sH*!z&1li;1BZboMV z=xj>st-o@g0O;2y=N&eWx94f1dQUV6L)Nx*>53qu#OvtEQmBIM6Oj$-Kwf*8_HuJ!3Rth1>C znvh4*BHxPC|KV6Lmni5bWSK1Qx$odU7qb={R2)p?j_a$w!1T~2^vQ53xRdDqrLE?l zh^euG=2kN8vkjsX5Mta5a{9)Rga<7hcFrH{Cy;fb|5Bq1+d90F@SQ;y4 zPd%JhN>VM=R{;7CNd0FV97NL`vwxK=Nzz6Cw*y2f|K|w+{0|WPDyq+U$KAObIT7J@ z#6YRDv?&AWne$G%>t8ZG-rXK|GbFxiM5$z%`iqj~)V9{FNy^bQQ&6<1J`%vUyuDF05$V+KYBc418~!V*xXHA_ImtvzWgMYFH{$+Q8}rT z-|awE3DUu=mp@QU!7)S^_rN${JVOu{hy#f~&hO5Ih{UF)OlryMHh@a-Q{L*w z1GgI(hE5*&nw6FHehd%b``}A0oiY3+Krc9DD)m}QNGT0zej7a2Z_#b?APQtHLZZ65 zEJtO$khe-1U_Qo`A*v`ts&nN$QKTbzD1fw9>D*=0{(IS2 zgSrq^nl;k8F21^6z(xFLg;fhY8Y*KVRlu zv))>XlTOcT?HkW-c(2fNpZZOz zii`pqK7DN5e6Yf8VgI|Brnq@QrqcKcG zQTfis&H7`z{C$Mz7=QsKo~by|5T>xnhjwS)xi&&h`>*b}z|22E?8(&8Y9Jclo(J%! z^pVR@(Xe0cwh8U4UvT{VwBO7N1G7JtBqSCq)e;ewcBs^fY=P7x6yZNfB(Bkk+`|9z z%{PSqc*LT1+iUWUQ3v~)2;%B2rVlf1$w>c)o?fO76nf5y+$|yn-OjyV3)Rt$-SE;uma))pYQ{9h&*@in&fey}Sn)+T&1 zb6~}{AL9YANF33B{}%u{d!06@`%wqT23JonzE2S(0}!fFoMiX3l$)(tQYJ45m{=4P zv{$%u=zI$QXOK7RU-y%_MPd3FBv*{~)I@Cz_LOfrAT*h(0E_<#Z$tNEajA-=aI2&M z^SB#Uu415S4XM?DEC&=?dt(v3-ne?|EWdc%s46WE&`YOcJ74Xl`aGbtot^>Jnk*1z z=F6gLk!_#jp^DTZU^Z0f5XYc) zb(_&mIX)RsB&*7G-m(U^vc6^N%&z2me>~dZE?~$m6%I1Bfsugo>57U!1G6=b{$41? z7Y#_!wF?$Yt_EVOGlAN70<~j6d_+P5vxM@Q5(#7^t{Y%8JA_DuGrS#%nZzCyZ&!XAw}2U zsMu;z5tR;ShF4PaX>_N=&Sas&E8#-tCai=z`z0wK7 za$b-7xjV?PJSawKtoTk{@Ntt2enkoEbX{| zCTz7_VL~i+Zqz!g1p$~huIg`XYx?TZzORM#3}BgtNq8M#*Ce1wt+T9R5^1FICeYlg zPw+u!Jq!PslOps(W{&8R>Q`<5%vmg?WTi(98gKP^S97LUlK!h1)k|lHvQc|(|F4uY z|A%V-h7j6or?-AEBLuE@2OlA>h_*;4i`x+KyS zxtACevRqvgSGKXw_dWMt`2IZSJmx&k=X{p;>-~Ja4yUG38cDzGijSJOGQ#z`W$Nl0 zweruq`{pe=){i;gZ7o{THti=3c$EX@3CxZ+JL$W2rR}&((jn+8%FqVdYu& zzeCYZoF_hVAkqV{U8tj^GO^SkL5nU;(7*E3eAzd6#AXXPa%k(KiEaB!V<``dx6N00 zM*Klxx=cx5nqSGXMxS%bb+qr$%vEh8H3K>X0P0Bj!^XTGBct3UGl?!$#PdVw#so&N z*zq`SQK7Xf&OZoeFpnf$bdkvM^b2)Tq1zM>cIj9PQaJJgHV>|0$3tq{%)wzIP?{^x zEOsV8&Kl(P08(=P0@f$;(F-z+H0_H9mQ6qS~VSR#5%OApl7XR;podvf3N}HpN9= zE08gg9`*hnU6avP;D7Csy(zw1TNu&V2(-bo7SmL1mSK*9wC%M+S@GqoTT z4i6#sYF44gpM811)<+E;YYCXe4tZOK07{+FpJ*rm+yl^29@d z4dSgu*a$xoIy$(UDE@&qw5Kx}ZJNA+QJ6L+5RBb0TrR`U_(@UK>P~7s;!Zr<_r$YI zl6_4{mqj!%I;Hq|R|?`jr55O%e}XA6=YC5tj_LRR61P)f@B02Oua^!*qN>K&)KSyl zuj$FYWw2BrV? zgjovasn-!l2cqntQaw6}LL&2w;H1D96c;-c4+OT%Bg+sa;)PtR_Eum znHpP$*f16F%Re84cKElT*%Hi9$?2{ib`AYNhjMwf|N3POy z*7C}e%u7GN+QExSrBe_>2UX7zcCW*hgE5?!+8&WJ1xk!7_Ioa^d&2E+z_#! z5q)mA5z=3SV#^?9>tz+-kOGyh?W#I^`V8u3>H<3akvucpB;Tj z7AS2z9K5K~wFbCj+5ZCq;X^!rLGHXF8XCE_j&u2K_MQ`@Ec9q6^%!y)LygYGi;Pdj71umGn7tK=@2N&&xSnd`F#4*Z}Y z!!f-xsQNqpGE#}RPDW#en#M}Q(6F+)@#HUj*DKn=l#|!huL&~!`!TiTV()7#co4Sq zSZw1zbprumY|+gDA4$NZHV$lMPH{LH^7Wq{?u%i!z{&3h1d{EVA7LnzzGyONf7)x^l zR)WDfW|5#oZ7MgfcF{9Z8;v+uvFOAx-}>K%hmBQmjb=3#M}d12Hc6M4v0pMZ!*9ZT zf5D~X$#caqF{(#w?1OqM<#Sb52Mn34Oy0u!DScWjf>wYu8>)yzm$!!#KgQzPaa3j?xr%P8@umo5}E_Xd6DY<;SX;K zlBV`;Fy)CGl`t{~{8CW>!&!vx|3}w4YXAr5v|2BrQ12gW1u4lJ@(^72T88Ij;mI%>45jQdH-7D8`bJBj&xq4CO)zR;k+cHxY z)SARuBYs{=@0f9Eg6;EXLusMRb+_i5H#C+D?i__?GG7vp;WCtPWW#Mer;AQgkYlZE zz#+xI29F}}d>j7C+nEmkz|p*;V=DwC-HG+{TYk$PZ4=k1qt4#&*OVxMv+wbIu*i{; z9&~k5p+9NN)<{{x#Lzsl?=u0JP<$nSStRPvIizh@kk!crG!ZYyO7@%GX(88P} zdud1!6ov;~)H2#3B*ErJ3?AchelnUr{JUJ$k0XViW7ySWoNG|z`eY7jEkHPg-ZfDq zR*FpYzh5kg28;YjHQV%`8dY$g#0&NMr0{YH#g6DRX^Q%M0>%dOXFQD@-ik+)i3Xmr zC?fvRzBdRS^O3|rFfraqT8L1SwmAu5jYunPVNz$4#BkLA?{az$N^OgowiwG@HZmAD z0vg6k?XtdTTQX7eqtrP>VByadhw{89{;MZFg*w|(9_l<>10d#?0Mxw-$%EDsp(^}) z87jm`NrNkB_TV1SD9UGu4teqAGqyV7V))*-w{?*9!tIR@7ea80wECZ6gvZ~vAU<;$ zmMTcVFLr-YY{{H0Hl4_~s=+;^pf%i?w7E7%WnyH5fjXM4e?Z52KIR&XZMngH5_57j z+A-?;aWT9JxEK&7xR+JbOTxSslqV9G>>tOX*zf6kGa5e8A-Tx<XwKz>V;QbEK0Jo*y|tgRnWo!t8|U3lsO4{{b476=VPa literal 0 HcmV?d00001 diff --git a/test/rendering/cases/layer-vector-background/main.js b/test/rendering/cases/layer-vector-background/main.js new file mode 100644 index 0000000000..b5e7bed98b --- /dev/null +++ b/test/rendering/cases/layer-vector-background/main.js @@ -0,0 +1,33 @@ +import GeoJSON from '../../../../src/ol/format/GeoJSON.js'; +import Map from '../../../../src/ol/Map.js'; +import VectorLayer from '../../../../src/ol/layer/Vector.js'; +import VectorSource from '../../../../src/ol/source/Vector.js'; +import View from '../../../../src/ol/View.js'; +import {Fill, Stroke, Style} from '../../../../src/ol/style.js'; + +new Map({ + target: 'map', + view: new View({ + center: [0, 0], + zoom: 1, + }), + layers: [ + new VectorLayer({ + background: '#a9d3df', + source: new VectorSource({ + url: '/data/countries.json', + format: new GeoJSON(), + }), + style: new Style({ + stroke: new Stroke({ + color: '#ccc', + }), + fill: new Fill({ + color: 'white', + }), + }), + }), + ], +}); + +render(); diff --git a/test/rendering/cases/layer-vectorimage-background/expected.png b/test/rendering/cases/layer-vectorimage-background/expected.png new file mode 100644 index 0000000000000000000000000000000000000000..6c7e4e7478b857c57f483e2bd20f762240d286ac GIT binary patch literal 20122 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 literal 0 HcmV?d00001 diff --git a/test/rendering/cases/layer-vectorimage-background/main.js b/test/rendering/cases/layer-vectorimage-background/main.js new file mode 100644 index 0000000000..cf9fa36aaa --- /dev/null +++ b/test/rendering/cases/layer-vectorimage-background/main.js @@ -0,0 +1,33 @@ +import GeoJSON from '../../../../src/ol/format/GeoJSON.js'; +import Map from '../../../../src/ol/Map.js'; +import VectorImageLayer from '../../../../src/ol/layer/VectorImage.js'; +import VectorSource from '../../../../src/ol/source/Vector.js'; +import View from '../../../../src/ol/View.js'; +import {Fill, Stroke, Style} from '../../../../src/ol/style.js'; + +new Map({ + target: 'map', + view: new View({ + center: [0, 0], + zoom: 1, + }), + layers: [ + new VectorImageLayer({ + background: '#a9d3df', + source: new VectorSource({ + url: '/data/countries.json', + format: new GeoJSON(), + }), + style: new Style({ + stroke: new Stroke({ + color: '#ccc', + }), + fill: new Fill({ + color: 'white', + }), + }), + }), + ], +}); + +render();