Evon,
Here is a sample that shows how to watch the views scale and then make the change to the layers opacity:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Get started with MapView - Create a 2D map - 4.2</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/renderers/ClassBreaksRenderer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"dojo/domReady!"
], function(Map, MapView, MapImageLayer, ClassBreaksRenderer,
SimpleFillSymbol, TextSymbol) {
function createSymbol(color) {
return new SimpleFillSymbol({
color: color,
outline: {
width: 0.5,
color: [255, 255, 255, 0.4]
},
style: "solid"
})
}
var renterUnitsRenderer = new ClassBreaksRenderer({
field: "RENTER_OCC",
normalizationField: "HSE_UNITS",
normalizationType: "field",
defaultSymbol: new SimpleFillSymbol({
style: "backward-diagonal",
outline: {
width: 0.5,
color: "gray"
}
}),
classBreakInfos: [{
minValue: 0,
maxValue: 0.25,
label: "< 25%",
symbol: createSymbol("#f8e3c2")
}, {
minValue: 0.25,
maxValue: 0.5,
label: "25% - 50%",
symbol: createSymbol("#e5998c")
}, {
minValue: 0.5,
maxValue: 0.75,
label: "50% - 75%",
symbol: createSymbol("#d86868")
}, {
minValue: 0.75,
maxValue: 1.00,
label: "> 75%",
symbol: createSymbol("#9b3557")
}]
});
var layer = new MapImageLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
title: "Census Demographics",
sublayers: [{
id: 1,
title: "% Renter Occupied Housing Units",
renderer: renterUnitsRenderer,
definitionExpression: "POP07_SQMI >= 5100",
visible: true,
labelsVisible: true,
labelingInfo: [{
labelExpression: "[RENTER_OCC]",
labelPlacement: "always-horizontal",
symbol: new TextSymbol({
color: "white",
haloColor: "#9b3557",
haloSize: 1,
font: {
size: 10
}
}),
minScale: 37000
}],
source: {
mapLayerId: 1
}
}]
});
var map = new Map({
basemap: "streets",
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 13,
center: [-122.436, 37.764]
});
view.watch("scale", checkScale);
function checkScale() {
if(view.scale < 40000){
layer.opacity = 0.25;
}else{
layer.opacity = 1;
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>