Featureeffect issue

banu · ‎05-20-2025

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Intro to FeatureLayer | Sample | ArcGIS Maps SDK for JavaScript 4.32</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.29/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

.tree {
--spacing: 1.5rem;
--radius: 10px;
}

.tree li {
display: block;
position: relative;
padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul {
margin-left: calc(var(--radius) - var(--spacing));
padding-left: 0;
}
</style>

const view = new MapView({
container: "viewDiv",
map: map,
extent: {
xmin: -9177811,
ymin: 4247000,
xmax: -9176791,
ymax: 4247784,
spatialReference: 102100
}
//center: [45.0792, 23.8859]
//zoom: 6
});
view.popup.defaultPopupTemplateEnabled=true;
let layer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
});
map.add(layer);
document.getElementById("btnCustomLayerList").onclick = function () {
document.getElementById("customLayerList").style.display = "block";
};
document.getElementById("btnClearCustomLayerList").onclick = function () {
document.getElementById('ulTreeDiv1').innerHTML="";
document.getElementById('selDepartment').selectedIndex = 0;
layer.definitionExpression = "1=1";
};
view.ui.add(btnCustomLayerList, "top-right");
//#region custom LayerList
var divList = []; var divList2 = [];
var featureLayerView;
view.when(() => {
view.whenLayerView(layer).then((layerView) => {
featureLayerView = layerView;
});
layer.when(() => {
const rootdivtLL = document.getElementById("customLayerList");
//#region Query Dept
layer.queryFeatures({
where: "1=1",
outFields: ["Condition"],
returnDistinctValues: true
}).then((featureSet) => {
if (featureSet.features.length > 0) {
//#region Root
var label = document.createElement('label')
label.htmlFor = "selDepartment";
label.appendChild(document.createTextNode("Department: "));
rootdivtLL.appendChild(label);

const selectElement = document.createElement('select');
selectElement.name = "selDepartment";
selectElement.id = "selDepartment";
const optionElement = document.createElement('option');
optionElement.value = "0";
optionElement.text = "select dept";
selectElement.appendChild(optionElement);
for (let i = 1; i < featureSet.features.length + 1; i++) {
if (featureSet.features[i - 1].attributes["Condition"] == null) continue;
const optionElement = document.createElement('option');
optionElement.value = featureSet.features[i - 1].attributes["Condition"];
optionElement.text = featureSet.features[i - 1].attributes["Condition"];
selectElement.appendChild(optionElement);
}
selectElement.addEventListener("change", selDepartmentChanged);

//#region a
layer.queryFeatures({
where: "Condition='"+event.target.value+"' and Street= '"+feature.attributes["Street"]+"'",
outFields: ["FID"],
returnDistinctValues: true
}).then((featureSet2) => {
if (featureSet2.features.length > 0) {
var detailsSubTreeDiv1 = document.getElementById("detailsTree"+feature.attributes["Street"]);
var ulSubSubTreeDiv1 = document.createElement('ul');
ulSubSubTreeDiv1.id = "ulSubSub"+feature.attributes["Street"];
featureSet2.features.forEach((feature2, index2) => {
divList2.push(feature2.attributes["FID"]);
//#region a
var liSubSubTreeDiv1 = document.createElement('li');
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "div11Tree" + index2.toString();
checkbox.value = feature2.attributes["FID"];
checkbox.checked = true;
checkbox.addEventListener("click", (event3) => {
if (event3.target.checked)
divList2.push(event2.target.value);
else {
const index = divList2.indexOf(event3.target.value);
const x = divList2.splice(index, 1);
}
//layer.definitionExpression = divList2.length === 0 ? "Condition='"+document.getElementById("selDepartment").value+ "' and Street in ("+divList.join(",")+")" : "Condition='"+document.getElementById("selDepartment").value+"' and Street in ("+divList.join(",")+") and FID in ("+divList2.join(",")+")";
//#region FadeInOut
const featureFilter3 = new FeatureFilter({
where: divList2.length === 0 ? "Condition='"+document.getElementById("selDepartment").value+ "' and Street in ("+divList.join(",")+")" : "Condition='"+document.getElementById("selDepartment").value+"' and Street in ("+divList.join(",")+") and FID in ("+divList2.join(",")+")"
});
featureLayerView.featureEffect = new FeatureEffect({
filter: featureFilter3,
includedEffect: "drop-shadow(3px, 3px, 3px, black)",
excludedEffect: "blur(1px) brightness(20%)"
});
//#endregion
//#region checkuncheck same items
var checkboxes = document.querySelectorAll('input[value="' + event3.target.value + '"]');
checkboxes.forEach(checkbox1 => {
checkbox1.checked = event3.target.checked;
});
//#endregion

});
liSubSubTreeDiv1.appendChild(checkbox);

var label = document.createElement('label')
label.htmlFor = "div11Tree" + index2.toString();
label.appendChild(document.createTextNode(feature2.attributes["FID"]));
liSubSubTreeDiv1.appendChild(label);

ulSubSubTreeDiv1.appendChild(liSubSubTreeDiv1);
//#endregion
});
detailsSubTreeDiv1.appendChild(ulSubSubTreeDiv1);
}
});
//#endregion
});
rootdivtLL.appendChild(ulTreeDiv1);
//#endregion
}
});
}
rootdivtLL.appendChild(selectElement);
//#endregion
}
});
//#endregion
});

});
//#endregion
});</script>
</head>

<body>
<div id="viewDiv">
<button id="btnCustomLayerList">Filter</button>
<button id="btnCClearustomLayerList">Clear</button>
<div id="customLayerList" style="display:none">
</div>
</div>
</body>
</html>