Create area of interest for VoxelLayer | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample shows how to add and change a VoxelSlice on a VoxelLayer.

Slices clip the volume along an infinite plane to yield a convex shell that is rendered. This can be used to define an area of interest or explore an opaque volume interactively. You can slice a volume vertically or horizontally or apply a tilt to the slice and reduce the voxel layer to a specific size.

The VoxelSlice allows you to define the properties of an individual slice. A VoxelSlice can be added by defining the point, orientation and tilt. The point is a position on the slice plane specified as [x, y, z] in voxel space for both XYZ and XYZT volumes, and as [x, y, t] for XYT volumes. Properties of voxel space are defined in VoxelVolume. sizeInVoxels contains the volume size in voxels and volumeType returns the type of the current variable’s volume. The VoxelSlice rotates counterclockwise as the value of the orientation increases.

const vxlVolume = vxlLayer.getVolume(null);
const volSize = vxlVolume.sizeInVoxels;
const volType = vxlVolume.volumeType;

A horizontal slice through the middle of the volume can be defined with a tilt and orientation of zero:

const zValue = Math.floor(volSize[2] / 2);
let zSlice = new VoxelSlice({
  orientation: 0,
  tilt: 0,
  point: [0, 0, zValue],
});

Slicing from north to south has a tilt of 90 and orientation of zero:

const yValue = Math.floor(volSize[1] / 2);
let ySlice = new VoxelSlice({
  orientation: 0,
  tilt: 90,
  point: [volSize[0], yValue, volSize[1]],
});

Point, orientation and tilt can be modified with real-time rendering updates.

Intro to VoxelLayer

VoxelLayer variable and render mode

Explore a VoxelLayer using dynamic section

Explore a VoxelLayer using isosurface

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Create area of interest for VoxelLayer | 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>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      #panelVoxelControl {
        width: 300px;
      }

      .customSlice {
        margin-top: 10px;
      }

      arcgis-legend {
        width: 200px;
      }

      calcite-input {
        width: 120px;
      }
    </style>
  </head>
  <body>
    <arcgis-scene item-id="3a922ed0c7a8489ea4fbe8747ac560ba">
      <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 id="panelVoxelControl" style="visibility: hidden" slot="top-right">
        <calcite-block label="Voxel slice" expanded>
          <calcite-label>
            Vertical Slice (West-East):
            <calcite-slider
              id="sliderXAxisSlice"
              min="0"
              step="1"
              snap
              label-handles></calcite-slider>
          </calcite-label>
          <calcite-button label="Slice" id="addSlice" width="full">Add Slice</calcite-button>
          <div class="customSlice" style="display: none">
            <calcite-label layout="inline-space-between"
              >Point X
              <calcite-input
                id="newSliceXAxisInput"
                placeholder=" Point X"
                value="0"
                min="0"
                type="number">
              </calcite-input>
            </calcite-label>
            <calcite-label layout="inline-space-between"
              >Point Y
              <calcite-input
                id="newSliceYAxisInput"
                placeholder="Point Y"
                value="0"
                min="0"
                type="number">
              </calcite-input>
            </calcite-label>
            <calcite-label layout="inline-space-between"
              >Point Z
              <calcite-input
                id="newSliceZAxisInput"
                placeholder="Point Z"
                value="0"
                min="0"
                type="number">
              </calcite-input>
            </calcite-label>
            <calcite-label layout="inline-space-between"
              >Orientation
              <calcite-input
                id="newOrientationInput"
                placeholder="Orientation"
                value="270"
                min="0"
                max="360"
                type="number">
              </calcite-input>
            </calcite-label>
            <calcite-label layout="inline-space-between"
              >Tilt
              <calcite-input
                id="newTiltInput"
                placeholder="Tilt"
                value="90"
                min="0"
                max="180"
                type="number">
              </calcite-input>
            </calcite-label>
          </div>
        </calcite-block>
      </calcite-panel>
      <arcgis-expand slot="bottom-left">
        <arcgis-legend id="expandLegend"></arcgis-legend>
      </arcgis-expand>
    </arcgis-scene>

    <script type="module">
      const VoxelSlice = await $arcgis.import("@arcgis/core/layers/voxel/VoxelSlice.js");

      // Get references to DOM elements
      const viewElement = document.querySelector("arcgis-scene");
      const newSliceContainer = document.querySelector(".customSlice");
      const panelVoxelControl = document.getElementById("panelVoxelControl");
      const sliderXAxisSlice = document.getElementById("sliderXAxisSlice");
      const addSlice = document.getElementById("addSlice");
      const newSliceXAxisInput = document.getElementById("newSliceXAxisInput");
      const newSliceYAxisInput = document.getElementById("newSliceYAxisInput");
      const newSliceZAxisInput = document.getElementById("newSliceZAxisInput");
      const newOrientationInput = document.getElementById("newOrientationInput");
      const newTiltInput = document.getElementById("newTiltInput");

      // Wait for the view to fully initialize
      await viewElement.viewOnReady();

      const voxelLayer = viewElement.map.layers.find((layer) => layer.type === "voxel");

      // Wait for the voxel layer to be in the component's view
      await viewElement.whenLayerView(voxelLayer);

      const voxelVolume = voxelLayer.getVolume(null);
      const voxelVolumeSize = voxelVolume.sizeInVoxels;
      let countSlice = voxelLayer.getVolumeStyle(null).slices.length;

      panelVoxelControl.style.visibility = "visible";

      voxelLayer.popupEnabled = true;

      // A voxel layer can have multiple slices. Each slice is represented by orientation, tilt and point.
      // A vertical slice from West to East
      const voxelXSlice = new VoxelSlice({
        orientation: 270,
        tilt: 90,
        point: [voxelVolumeSize[0] / 2, 0, 0],
      });
      voxelLayer.getVolumeStyle(null).slices = [voxelXSlice];
      sliderXAxisSlice.max = voxelVolumeSize[0];
      sliderXAxisSlice.value = voxelVolumeSize[0] / 2;

      // Listen to changes in the slider's value
      // update the point value of the slice
      sliderXAxisSlice.addEventListener("calciteSliderInput", function () {
        const newPoint = [sliderXAxisSlice.value, 0, 0];
        const xSlice = voxelLayer.getVolumeStyle(null).slices.getItemAt(0);
        xSlice.point = newPoint;
      });

      newSliceXAxisInput.max = voxelVolumeSize[0];
      newSliceYAxisInput.max = voxelVolumeSize[1];
      newSliceZAxisInput.max = voxelVolumeSize[2];

      // Modifies the point, orientation and tilt of a slice
      function updateNewSlice() {
        const newPoint = [
          newSliceXAxisInput.value,
          newSliceYAxisInput.value,
          newSliceZAxisInput.value,
        ];
        const nSlice = voxelLayer.getVolumeStyle(null).slices.getItemAt(countSlice - 1);
        nSlice.point = newPoint;
        nSlice.orientation = newOrientationInput.value;
        nSlice.tilt = newTiltInput.value;
      }

      // Listen to the click event
      // add a new voxel slice
      addSlice.addEventListener("click", function () {
        const newSliceContent = document.getElementById("newSliceContent");
        let newSlice = null;
        newSliceXAxisInput.value = Math.floor(voxelVolumeSize[0] / 2).toString();
        newSliceYAxisInput.value = Math.floor(voxelVolumeSize[1] / 2).toString();
        newSliceZAxisInput.value = Math.floor(voxelVolumeSize[2] / 2).toString();
        newOrientationInput.value = "210";
        newTiltInput.value = "45";
        if (countSlice <= 1) {
          addSlice.textContent = "Delete Slice";
          newSlice = new VoxelSlice({
            orientation: newOrientationInput.value,
            tilt: newTiltInput.value,
            point: [newSliceXAxisInput.value, newSliceYAxisInput.value, newSliceZAxisInput.value],
          });
          //Adding a new slice to the VoxelVolumeStyle
          voxelLayer.getVolumeStyle(null).slices.add(newSlice);
          newSliceContainer.style = "display:block;";
        } else {
          addSlice.textContent = "Add Slice";
          //A slice can be deleted from the collection by using the removeAt method and passing it's index.
          voxelLayer.getVolumeStyle(null).slices.removeAt(countSlice - 1);
          newSliceContainer.style = "display:none;";
        }
        countSlice = voxelLayer.getVolumeStyle(null).slices.length;
      });

      // Listen to any changes on the points (X,Y and Z), orientation and tilt
      // update the voxel's slice properties
      newSliceXAxisInput.addEventListener("calciteInputChange", function () {
        updateNewSlice();
      });
      newSliceYAxisInput.addEventListener("calciteInputChange", function () {
        updateNewSlice();
      });
      newSliceZAxisInput.addEventListener("calciteInputChange", function () {
        updateNewSlice();
      });
      newOrientationInput.addEventListener("calciteInputChange", function () {
        updateNewSlice();
      });
      newTiltInput.addEventListener("calciteInputChange", function () {
        updateNewSlice();
      });
    </script>
  </body>
</html>