ArcGIS JS API for JavaScript:
Web editing in 3D

Hugo Campos & Jesse van den Kieboom

Slides: https://esridevsummit.github.io/DS2022-Web-Editing-in-3D/

Agenda

  • From editing in 2D to editing in 3D
  • SketchViewModel basics in 3D
  • FeatureLayer and the Editor widget
  • SceneLayer editing
  • Customized Editing

From editing in 2D to editing in 3D

  • Using the Editor widget in a SceneView works out-of-the box.
  • SketchViewModel, FeatureForm and Editor work similarly in 2D and 3D.
  • No need to prepare data specifically for 3D.
                
                
                  // const view = new MapView({ /* ... */ });
                  const view = new SceneView({ /* ... */ });

                  const editor = new Editor({ view /* ... */})

Placing a tree on the ground

                  
                    const tree = new Graphic({
                      geometry: new Point({
                        x: 1099766.76,
                        y: 5865813.01
                        // Note: no Z value!
                      })
                    });

                    const trees = new GraphicsLayer({
                      elevationInfo: { mode: "on-the-ground" }
                    });

                    trees.add(tree);
                  
                
                  
                    const webStyle = new WebStyleSymbol({
                      /* ... */
                    });

                    tree.symbol = await webStyle.fetchSymbol();

Web Style Symbols

Moving a tree on the ground

                  
                    const sketchVM = new SketchViewModel({
                      view,
                      layer: trees
                    });

                    sketchVM.update(tree);

Placing an antenna on the roof

                  
                    sketchVM.layer = antennas;
                    sketchVM.pointSymbol = antennaSymbol;

                    sketchVM.on("create", (event) => {
                      if (event.state === "complete") {
                        sketchVM.update(event.graphic);
                      }
                    });

                    sketchVM.create("point");
                  
                
                  
                    antennas.elevationInfo = {
                      mode: "relative-to-scene"
                    };

Placing an airplane in the air

                  
                    const geometry = new Point({
                      x: 1099766.76,
                      y: 5865813.01,
                      z: 20 // We now have elevation!!!
                    });

                    const airplane = new Graphic({ geometry, symbol });

                    const airplanes = new GraphicsLayer({
                      elevationInfo: { mode: "relative-to-ground" },
                    });
                    airplanes.add(airplane);
                  
                
                  
                    airplanes.elevationInfo = {
                      mode: "absolute-height"
                    };
                    airplane.geometry.z = 1708; // Runway elevation

Sketching a new airport building

                  
                    const terminals = new GraphicsLayer();

                    sketchVM.layer = terminals;
                    sketchVM.polygonSymbol = new PolygonSymbol3D({
                      symbolLayers: [new ExtrudeSymbol3DLayer({
                        size: 10
                      })]
                    });

                    sketchVM.create("polygon");
                  
                
                  
                    Object.assign(sketchVM.snappingOptions, {
                      enabled: true,
                      featureSources: [{ layer: terminals }]
                    });
                  
                
                  
                    sketchVM
                      .defaultUpdateOptions
                      .reshapeOptions
                      .edgeOperation = "offset";

FeatureLayer and the Editor widget

                  
                  const aircraftLayer = new FeatureLayer({
                    title: "Aircraft",
                    url: "...",
                    elevationInfo: { mode: "absolute-height" },
                    /* ... */
                  });
                  view.map.add(aircraftLayer);

                  const editor = new Editor({ view });
                  view.ui.add(editor, "top-right");
                  
                
                  
                    const aircraftLayer = new FeatureLayer({
                      /* ... */
                      renderer: new UniqueValueRenderer({
                        /* ... */
                        visualVariables: [
                          new SizeVariable({
                            axis: "height",
                            field: "SIZE",
                            valueUnit: "meters",
                          }),
                          new RotationVariable({
                            field: "ROTATION",
                            rotationType: "geographic",
                          }),
                        ],
                      })
                    });
                  
                
                  
                    const newRenderer = renderer.clone();

                    newRenderer.visualVariables = [
                      new RotationVariable({
                        field: "ROTATION",
                        rotationType: "geographic",
                      }),
                    ];

                    aircraftLayer.renderer = newRenderer;
                  
                
                  
                    editor.layerInfos = [{
                      layer: aircraftLayer,
                      formTemplate: new FormTemplate({
                        elements: [
                          new FieldElement({
                            fieldName: "ROTATION",
                            label: "Rotation"
                          })
                        ],
                      })
                    }];

SceneLayer editing

                  
                    const editor = new Editor({ view });

                    view.ui.add(editor, "top-right");

Customized editing

Documentation & Resources

Please share your feedback in the app