Xjyuk

Necroskitter and creatures dying because of placing -1/-1 counters

I have found a mistake on someone's code published online: what is the protocol?

Naming your baby - does the name influence the child?

Pauli exclusion principle - black holes

Column deletion based on number of string matches within column

Strategy to pay off revolving debt while building reserve savings fund?

Why aren't there any women super GMs?

Why did Fury respond that way?

Why do space operations use "nominal" to mean "working correctly"?

Why is the Intel 8086 CPU called a 16-bit CPU?

How would thermophilic fish survive?

Should I have shared a document with a former employee?

Is it possible to have a career in SciComp without contributing to arms research?

"This used to be my phone number"

Term “console” in game consoles

I want to identify a part from a photo

How to draw a winding on a toroid of a circular cross section?

How did Jayne know when to shoot?

In this iconic lunar orbit rendezvous photo of John Houbolt, why do arrows #5 and #6 point the "wrong" way?

Demographic consequences of closed loop reincarnation

When designing an adventure, how can I ensure a continuous player experience in a setting that's likely to favor TPKs?

How slow can a car engine run?

An entire function all whose forward orbits are bounded

Why teach C using scanf without talking about command line arguments?

Change Opacity of Style

OpenLayers - cannot set layer opacitySLD fill-opacity not having any effectHow to set opacity with gdal_rasterizeOpenLayers Get OpacityLeaflet - Opacity method for L.tileLayer.wms?Changing opacity of map outside feature in OpenLayers 3?Link Leaflet opacity slider to uppermost layerCreate a slide to control opacity for layersCreating opacity mask in Google Earth Engine?Opacity Transition Mapbox Fade In

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

4

Is there any convenient way to change the opacity of a ol.style.Fill or ol.style.Stroke Object?

As far as I understand it, there are 2 ways to define a color with an opacity.

fill.color = [255,0,0,myOpcitay];

or

fill.color = 'rgba(255, 0,0,myOpacity)';

But what If I get a color attribute in hex format, like

var color = myStyle.getFill().getColor() // color #FF0000;

Do I really have to decompose the hex color definition in order to add the opacity? There must be a more user-friendly way to achieve this...

openlayers opacity

share|improve this question

asked 9 hours ago

FerenjitoFerenjito

45788 silver badges2525 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  OpenLayers seems to return the same format which was used to set the style. So if you need to change one component always use an array,
  
  – Mike
  9 hours ago
  

  
  
  
  

add a comment | 

4

Is there any convenient way to change the opacity of a ol.style.Fill or ol.style.Stroke Object?

As far as I understand it, there are 2 ways to define a color with an opacity.

fill.color = [255,0,0,myOpcitay];

or

fill.color = 'rgba(255, 0,0,myOpacity)';

But what If I get a color attribute in hex format, like

var color = myStyle.getFill().getColor() // color #FF0000;

Do I really have to decompose the hex color definition in order to add the opacity? There must be a more user-friendly way to achieve this...

openlayers opacity

share|improve this question

asked 9 hours ago

FerenjitoFerenjito

45788 silver badges2525 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  OpenLayers seems to return the same format which was used to set the style. So if you need to change one component always use an array,
  
  – Mike
  9 hours ago
  

  
  
  
  

add a comment | 

Is there any convenient way to change the opacity of a ol.style.Fill or ol.style.Stroke Object?

As far as I understand it, there are 2 ways to define a color with an opacity.

fill.color = [255,0,0,myOpcitay];

or

fill.color = 'rgba(255, 0,0,myOpacity)';

But what If I get a color attribute in hex format, like

var color = myStyle.getFill().getColor() // color #FF0000;

Do I really have to decompose the hex color definition in order to add the opacity? There must be a more user-friendly way to achieve this...

openlayers opacity

share|improve this question

asked 9 hours ago

FerenjitoFerenjito

45788 silver badges2525 bronze badges

fill.color = [255,0,0,myOpcitay];

fill.color = 'rgba(255, 0,0,myOpacity)';

var color = myStyle.getFill().getColor() // color #FF0000;

share|improve this question

asked 9 hours ago

FerenjitoFerenjito

45788 silver badges2525 bronze badges

share|improve this question

asked 9 hours ago

FerenjitoFerenjito

45788 silver badges2525 bronze badges

asked 9 hours ago

FerenjitoFerenjito

45788 silver badges2525 bronze badges

asked 9 hours ago

FerenjitoFerenjito

45788 silver badges2525 bronze badges

2 Answers
2

active

oldest

votes

2

You can use ol.color.asArray method for that. Fourth element of array is then opacity:

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color);
var opacity = colorArray[3];

EDIT: As Mike rightfully pointed out, above code is suitable only for reading opacity. Since asArray() method returns cached color, if we want to change color and use it independantly, copy of the color has to be created with slice() method (Mike's code):

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color).slice();
colorArray[3] = 0.5;
myStyle.getFill().setColor(colorArray);

share|improve this answer

edited 6 hours ago

answered 9 hours ago

TomazicMTomazicM

2,97322 gold badges88 silver badges2121 bronze badges

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  The API mentions the array is cached so be sure to clone it using slice otherwise you might change all red styles to semi transparent red. var colorArray = ol.color.asArray(color).slice(); colorArray[3] = 0.5; myStyle.getFill().setColor(colorArray);
  
  – Mike
  9 hours ago
  

  
  
  
  

add a comment | 

1

Would a 8-digit hex-code work?

See also:

• https://drafts.csswg.org/css-color/#hex-notation


• https://css-tricks.com/8-digit-hex-codes

Have also a look at this page:

• https://stackoverflow.com/a/28033076/42659

share|improve this answer

edited 9 hours ago

answered 9 hours ago

Thomas ZuberbühlerThomas Zuberbühler

30511 silver badge1010 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  dead link unfortunately
  
  – Ferenjito
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  link should work now :)
  
  – Thomas Zuberbühler
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  still, it is a hassle to do math on a variable that might be 'red', '#FF0000', 'rgba(255,0,0,0)' or [255,0,0,0]
  
  – Ferenjito
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  does this helps to ease the hassle: stackoverflow.com/a/28033076/42659
  
  – Thomas Zuberbühler
  9 hours ago
  
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "79"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f329224%2fchange-opacity-of-style%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

You can use ol.color.asArray method for that. Fourth element of array is then opacity:

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color);
var opacity = colorArray[3];

EDIT: As Mike rightfully pointed out, above code is suitable only for reading opacity. Since asArray() method returns cached color, if we want to change color and use it independantly, copy of the color has to be created with slice() method (Mike's code):

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color).slice();
colorArray[3] = 0.5;
myStyle.getFill().setColor(colorArray);

share|improve this answer

edited 6 hours ago

answered 9 hours ago

TomazicMTomazicM

2,97322 gold badges88 silver badges2121 bronze badges

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  The API mentions the array is cached so be sure to clone it using slice otherwise you might change all red styles to semi transparent red. var colorArray = ol.color.asArray(color).slice(); colorArray[3] = 0.5; myStyle.getFill().setColor(colorArray);
  
  – Mike
  9 hours ago
  

  
  
  
  

add a comment | 

2

You can use ol.color.asArray method for that. Fourth element of array is then opacity:

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color);
var opacity = colorArray[3];

EDIT: As Mike rightfully pointed out, above code is suitable only for reading opacity. Since asArray() method returns cached color, if we want to change color and use it independantly, copy of the color has to be created with slice() method (Mike's code):

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color).slice();
colorArray[3] = 0.5;
myStyle.getFill().setColor(colorArray);

share|improve this answer

edited 6 hours ago

answered 9 hours ago

TomazicMTomazicM

2,97322 gold badges88 silver badges2121 bronze badges

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  The API mentions the array is cached so be sure to clone it using slice otherwise you might change all red styles to semi transparent red. var colorArray = ol.color.asArray(color).slice(); colorArray[3] = 0.5; myStyle.getFill().setColor(colorArray);
  
  – Mike
  9 hours ago
  

  
  
  
  

add a comment | 

You can use ol.color.asArray method for that. Fourth element of array is then opacity:

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color);
var opacity = colorArray[3];

EDIT: As Mike rightfully pointed out, above code is suitable only for reading opacity. Since asArray() method returns cached color, if we want to change color and use it independantly, copy of the color has to be created with slice() method (Mike's code):

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color).slice();
colorArray[3] = 0.5;
myStyle.getFill().setColor(colorArray);

share|improve this answer

edited 6 hours ago

answered 9 hours ago

TomazicMTomazicM

2,97322 gold badges88 silver badges2121 bronze badges

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color);
var opacity = colorArray[3];

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color).slice();
colorArray[3] = 0.5;
myStyle.getFill().setColor(colorArray);

share|improve this answer

edited 6 hours ago

answered 9 hours ago

TomazicMTomazicM

2,97322 gold badges88 silver badges2121 bronze badges

answered 9 hours ago

TomazicMTomazicM

2,97322 gold badges88 silver badges2121 bronze badges

answered 9 hours ago

TomazicMTomazicM

2,97322 gold badges88 silver badges2121 bronze badges

1

Would a 8-digit hex-code work?

See also:

• https://drafts.csswg.org/css-color/#hex-notation


• https://css-tricks.com/8-digit-hex-codes

Have also a look at this page:

• https://stackoverflow.com/a/28033076/42659

share|improve this answer

edited 9 hours ago

answered 9 hours ago

Thomas ZuberbühlerThomas Zuberbühler

30511 silver badge1010 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  dead link unfortunately
  
  – Ferenjito
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  link should work now :)
  
  – Thomas Zuberbühler
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  still, it is a hassle to do math on a variable that might be 'red', '#FF0000', 'rgba(255,0,0,0)' or [255,0,0,0]
  
  – Ferenjito
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  does this helps to ease the hassle: stackoverflow.com/a/28033076/42659
  
  – Thomas Zuberbühler
  9 hours ago
  
  

  
  
  
  

add a comment | 

1

Would a 8-digit hex-code work?

See also:

• https://drafts.csswg.org/css-color/#hex-notation


• https://css-tricks.com/8-digit-hex-codes

Have also a look at this page:

• https://stackoverflow.com/a/28033076/42659

share|improve this answer

edited 9 hours ago

answered 9 hours ago

Thomas ZuberbühlerThomas Zuberbühler

30511 silver badge1010 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  dead link unfortunately
  
  – Ferenjito
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  link should work now :)
  
  – Thomas Zuberbühler
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  still, it is a hassle to do math on a variable that might be 'red', '#FF0000', 'rgba(255,0,0,0)' or [255,0,0,0]
  
  – Ferenjito
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  does this helps to ease the hassle: stackoverflow.com/a/28033076/42659
  
  – Thomas Zuberbühler
  9 hours ago
  
  

  
  
  
  

add a comment | 

Would a 8-digit hex-code work?

See also:

• https://drafts.csswg.org/css-color/#hex-notation


• https://css-tricks.com/8-digit-hex-codes

Have also a look at this page:

• https://stackoverflow.com/a/28033076/42659

share|improve this answer

edited 9 hours ago

answered 9 hours ago

Thomas ZuberbühlerThomas Zuberbühler

30511 silver badge1010 bronze badges

share|improve this answer

edited 9 hours ago

answered 9 hours ago

Thomas ZuberbühlerThomas Zuberbühler

30511 silver badge1010 bronze badges

answered 9 hours ago

Thomas ZuberbühlerThomas Zuberbühler

30511 silver badge1010 bronze badges

answered 9 hours ago

Thomas ZuberbühlerThomas Zuberbühler

30511 silver badge1010 bronze badges