Length dimensioning

Dimensions display lengths or distances between two points in a 3D SceneView and can be created either programmatically or interactively. In this sample, both ways are shown.

The first option is useful for measuring geometry data queried from another layer. For example, in this sample the widths and depths of building floors are calculated at a selected level.

For this, a DimensionLayer is created and added to view.map.

1
2
3
4
5
const dimensionLayer = new DimensionLayer({
  title: "Programmatic dimensions",
  source: new DimensionAnalysis()
});
view.map.add(dimensionLayer);

Then, LengthDimension objects can be added programmatically while iterating through the geometry.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const rings = feature.geometry.rings[0];
for (let i = 0; i < rings.length - 1; i++) {
  dimensionLayer.source.dimensions.push(
    new LengthDimension({
      offset: 3,
      orientation: -90,
      startPoint: {
        spatialReference: {
          wkid: 102100
        },
        x: rings[i][0],
        y: rings[i][1],
        z: feature.attributes["Elevation"] + feature.attributes["FloorHeight"]
      },
      endPoint: {
        spatialReference: {
          wkid: 102100
        },
        x: rings[i + 1][0],
        y: rings[i + 1][1],
        z: feature.attributes["Elevation"] + feature.attributes["FloorHeight"]
      }
    })
  );
}

The dimension layer can be grouped with other layers and when a LayerList widget is used, it appears in the list. Also, the dimension layer can be saved to a WebScene or added to Slides.

When the dimension lines do not need to be persisted, a DimensionAnalysis can be used instead of a layer. This allows a user to add temporary dimensions while viewing a scene, and compare lengths and distances for their own purposes.

To begin the interactive creation of new dimensions, call the createLengthDimensions method on the dimension layer view:

1
2
3
4
dimensioningStartBtn.addEventListener("click", () => {
  dimensionLayerView.createLengthDimensions();
  dimensioningStartBtn.disabled = true;
});

Calling createLengthDimensions sets the layer view interactive property to true. While this property is true, any dimension in the associated layer can be selected in the view and edited interactively using manipulators.

To finish adding and editing, the interactivity needs to be turned off:

1
dimensionLayerView.interactive = false;

Both DimensionLayer and DimensionAnalysis can be styled with DimensionSimpleStyle. Note that one style is applied per layer or per analysis.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close