Sketch in 3D

This sample demonstrates how to create graphics with 3D symbols and how to update these graphics using 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
19
20
21
22
const sketchViewModel = new SketchViewModel({
  layer: gLayer,
  view: view,
  polygonSymbol: {
    type: "polygon-3d",
    symbolLayers: [
      {
        type: "extrude",
        size: 10, // extrude by 10 meters
        material: {
          color: white
        },
        edges: {
          type: "solid",
          size: "3px",
          color: [82, 82, 122, 0.8]
        }
      }
    ]
  },
  defaultCreateOptions: { hasZ: false }
});

To activate the sketch mode you can call the create() method on the SketchViewModel with the geometry type that should be created:

1
2
3
button.addEventListener("click", (event) => {
  sketchViewModel.create("polygon");
});

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: "split",
      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.enable. This sample contains checkbox input elements to toggle snapping functionality on/off, and to specify if snapping should be limited to self or feature snapping.

Checking on the "Snapping enabled" checkbox is equivalent to setting the snappingOptions.enabled to true. You can also use the CTRL key to dynamically toggle snapping on/off.

1
2
...
editor.snappingOptions.featureSources = snapSource;

Tooltip/Label

The tooltips and labels provide useful information when creating or updating existing features. Enable tooltip and/or label on SketchViewModel, Sketch or Editor.

1
2
3
...
tooltipOptions: { enabled: true },
labelOptions: { enabled: true },