<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Filter points in a PointCloudLayer | Sample | ArcGIS Maps SDK for JavaScript</title>
<!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
<script type="module" src="https://js.arcgis.com/5.0/"></script>
calcite-radio-button-group {
color: var(--calcite-color-text-2);
font-size: var(--calcite-font-size--1);
<arcgis-scene item-id="70f32836cb904938aec89050d1611724">
<arcgis-zoom slot="top-left"></arcgis-zoom>
<arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
<arcgis-compass slot="top-left"></arcgis-compass>
<calcite-panel slot="bottom-left" heading="Point cloud filtering">
<calcite-radio-button-group id="filterGroup" name="pclFilter" layout="vertical">
<calcite-label layout="inline">
<calcite-radio-button value="noFilter" checked></calcite-radio-button>No filter
<calcite-label layout="inline">
<calcite-radio-button value="vegetation"></calcite-radio-button>Filter vegetation points
<calcite-label layout="inline">
<calcite-radio-button value="buildings"></calcite-radio-button>Filter building points
</calcite-radio-button-group>
<div class="filter-help">
Filters are applied to the point cloud based on LAS classification (CLASS_CODE) and
/******************************************************************
* Find the PointCloudLayer within the Scene. Once loaded, apply
* filters based on point categories and return values.
******************************************************************/
const viewElement = document.querySelector("arcgis-scene");
await viewElement.viewOnReady();
// Find the point cloud layer in the scene's map
const pcLayer = viewElement.map.allLayers.find((layer) => layer.type === "point-cloud");
throw new Error("PointCloudLayer not found in the WebScene.");
const vegetationFilter = [
// show only points that represent vegetation
// values includes high vegetation
// show only points from the first return
// (highest points in the landscape)
includedReturns: ["firstOfMany", "single"],
const buildingsFilter = [
// only the building value is passed
function applyFilter(value) {
pcLayer.filters = vegetationFilter;
pcLayer.filters = buildingsFilter;
const filterGroup = document.getElementById("filterGroup");
// Calcite RadioButtonGroup emits a custom event
filterGroup.addEventListener("calciteRadioButtonGroupChange", (event) => {
const value = event?.target?.selectedItem.value;
// Ensure initial state applies (No filter)
applyFilter(filterGroup.value);