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:

const sketchVM = 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:

button.addEventListener("click", function (event) {
  sketchVM.create("polygon");
});

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.

...
editor.snappingOptions.featureSources = snapSource;