Sketch in 3D

This sample demonstrates how to create graphics with 3D symbols and how to update these graphics using the Sketch widget and SketchViewModel in a SceneView.

For example, a symbol with ExtrudeSymbol3DLayer is used for drawing extruded building footprints:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const sketchViewModel = new SketchViewModel({
  layer: graphicsLayer,
  view: view,
  polygonSymbol: new PolygonSymbol3D({
        symbolLayers: [
          new ExtrudeSymbol3DLayer({
            size: 3.5, // extrude by 3.5m meters
            material: {
              color: [255, 255, 255, 0.8]
            },
            edges: new SolidEdges3D({
              size: 1,
              color: [82, 82, 122, 1]
            })
          })
        ]
      })
});

Reshape options

With reshapeOptions it is possible to modify the behavior for the edge and move operation within the reshape tool for polygon and polyline. In this sample, the logic to toggle the reshape options is handled via a UI component that appears whenever SketchViewModel calls the update() operation. The following code snippet demonstrates how to configure the reshapeOptions manually.

1
2
3
4
5
6
defaultUpdateOptions: {
  reshapeOptions: {
      edgeOperation: "offset",
      shapeOperation: "move"
  }
}

Snapping

It is also possible to configure snapping within the Sketch widget. This is handled via the snappingOptions property. The Sketch widget provides a UI to toggle snappingOptions.enabled.

1
2
3
...
sketchViewModel.snappingOptions.enabled = true;
sketchViewModel.snappingOptions.featureSources = [{ layer: graphicsLayer }];

Tooltips, labels, and sketching with constraints

The tooltips and segment labels provide useful information when creating or updating features. They can be enabled programmatically or toggled via the Sketch widget's UI. Press Tab to activate the input mode while drawing a new feature, or when editing a point, mesh, or a selected vertex. In the tooltips' input mode, one can set editing constraints or enter coordinates to achieve greater control over segment lengths, angles, as well as position and elevation values.

1
2
3
...
sketchViewModel.tooltipOptions.enabled = true;
sketchViewModel.labelOptions.enabled = true;

In this sample, when starting to draw a polygon or polyline, the tooltip shows the absolute direction mode (relative to the map's main axis, usually the north). But after the second vertex is drawn, the UI will switch to show relative direction (deflection) instead. This is set via the valueOptions.

1
2
3
4
5
6
7
8
9
10
11
...
if (event.state === "start") {
  sketchViewModel.valueOptions.directionMode = "absolute";
}
if (
  event.state === "active" &&
  event.toolEventInfo.type === "vertex-add" &&
  event.toolEventInfo.vertices[0].vertexIndex === 1
) {
  sketchViewModel.valueOptions.directionMode = "relative";
}