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.