I'm trying to symbolize selections using a GraphicsLayer derived from a FeatureLayer. When I change the opacity of the FeatureLayer and get a graphic based on whatever polygon I have clicked on, it sets the opacity of the GraphicsLayer to the same as the FeatureLayer, even if I set the opacity to something different on the GraphicsLayer.
When they click on a radio button here, the opacity of the FeatureLayer changes to reflect their choice:
on(query('input[name="setOpacity"]'), "click", function (evt){
var opacity = evt.target.id;
switch(opacity){
case "100-percent":
featureLayer.opacity = 1;
break;
case "25-percent":
featureLayer.opacity = .25;
break;
case "50-percent":
featureLayer.opacity = .5;
break;
case "75-percent":
featureLayer.opacity = .75;
break;
}
});Next, if I select a polygon on the map (via clicking), I create a new graphic of that polygon and set the symbol to be a blue outline. Then I add it to a GraphicsLayer, set the opacity to 1, and then add it to the map. But the opacity remains at 25/50/75 percent or whatever is selected by the user on the FeatureLayer. Is this happening because the graphic is derived from the FeatureLayer? Is there a way to fix this?
view.on("click", function(evt){
var screenPoint = {
x: evt.x,
y: evt.y
};
view.hitTest(screenPoint).then(getGraphics);
});
var graphicLyr = new GraphicsLayer({});
function getGraphics(response){
graphicLyr.removeAll();
var selectionSymbol = {
type: "simple-fill",
style: "none",
outline: {
color: [56, 247, 247],
width: 2
}
}
var graphic = new Graphic({
geometry: response.results[0].graphic.geometry,
symbol: selectionSymbol
});
graphicLyr.add(graphic);
graphicLyr.opacity = 1;
map.add(graphicLyr);
};
