Filter SceneLayer with FeatureFilter | Sample | ArcGIS Maps SDK for JavaScript

Filter (masking) features is useful in urban planning. In this sample users can hide buildings and trees by drawing a masking polygon, a rectangle, a polyline or place points with buffers.

The geometry used for filtering is drawn using the Sketch component. We declare it by specifying the attributes matching our needs. We set default-graphics-layer-disabled and specify our own GraphicsLayer as the graphics layer where the filter geometries are drawn:

// use Sketch component to draw the filter geometries that are used as filter
<arcgis-sketch
  creation-mode="single"
  toolbar-kind="docked"
  hide-settings-menu
  default-graphics-layer-disabled></arcgis-sketch>;

// Instantiate the sketch layer
const sketchLayer = new GraphicsLayer({
  elevationInfo: { mode: "on-the-ground" },
});

// Get reference to  the Sketch component
const sketch = viewElement.querySelector("arcgis-sketch");

// Wait for the sketch component to be ready
await sketch.componentOnReady();

// Assign the graphics layer to sketch.layer
sketch.layer = sketchLayer;

Different event listeners make sure we catch every modification of the polygons and trigger an update of the filter:

// Listen to sketch component's create event to update the filter
sketch.addEventListener("arcgisCreate", (event) => {
  // Only once the polygon is completed we update the filter
  if (event.detail.state === "complete") {
    updateFilter();
  }
});

Optionally we can define symbols for the polygon, polyline or point features:

// Define symbol definitions for the sketch geometries
const sketchSymbols = {
  point: {
    type: "simple-marker",
    style: "circle",
    size: 10,
    color: [255, 255, 255, 0.8],
    outline: {
      color: [211, 132, 80, 0.7],
      size: 6,
    },
  },
  polyline: {
    type: "simple-line",
    color: [211, 132, 80, 0.7],
    width: 6,
  },
  polygon: {
    type: "polygon-3d",
    symbolLayers: [
      {
        type: "fill",
        material: {
          color: [255, 255, 255, 0.8],
        },
        outline: {
          color: [211, 132, 80, 0.7],
          size: 6,
        },
      },
    ],
  },
};

Spatial filtering can be easily achieved by setting a FeatureFilter on a SceneLayerView:

sceneLayerView.filter = new FeatureFilter({
  geometry: polygon,
  spatialRelationship: "disjoint",
});

Currently for 3D Object SceneLayerViews spatial FeatureFilter only works when spatialRelationship is one of contains, intersects, disjoint.

Another way to filter a scene layer is using a SceneFilter. This filter is set on the SceneLayer instead of the SceneLayerView. It accepts several polygons and can be persisted in WebScenes or on the SceneLayer. For more information, see this sample: Filter SceneLayer with SceneFilter.

Other helpful resources