Geometry Drawing Tools

Search…
Part of AngularCesiumWidgetsModule are useful geometry drawing tools:
​CirclesEditorService - For drawing circles
​EllipsesEditorService - For drawing ellipses and circles
​PolylinesEditorService - For drawing polylines
​PolygonsEditorService - For drawing polygons
​PointEditorService - For drawing points
​RectanglesEditorService - For drawing rectangles
​HippodromeEditorService - For drawing hippodromes (path in cesium)
Check out our blog post about geometry drawing tools.
Basic Usage 
First Add AngularCesiumWidgetsModule to your app.module file. 
1
@NgModule({
2
  // ...
3
  imports: [
4
    AngularCesiumModule.forRoot(),
5
    AngularCesiumWidgetsModule,
6
    // ...
7
  ],
8
})
9
export class AppModule {}
10
​
Copied!
Each editor service work with a with editor component. Therefor you need to create a editor-componentfor each editor service, And of course somewhere under <ac-map> . 
For the Polygons editor service we will do:
1
<ac-map>
2
   <polygons-editor></polygons-editor> // Or somewhere else in the hierarchy 
3
</ac-map>
4
​
Copied!
All editors have a similar API, the following examples are relevant to all editors    
Next we just need to provide the editor service, with the editor service you will create() and edit()  your geometry. You can provide the service in the root module level or any where in your hierarchy, 
In our Example: 
my-map.component.ts
my-map.component.html
1
@Component({
2
  ...
3
  providers: [PolygonEditorService],
4
})
5
export class MyMapComponent {
6
    editing$: PolygonEditorObservable;
7
    
8
    constructor(private polygonEditor: PolygonsEditorService) {}
9
    
10
    startDraw() {
11
         this.editing$ = this.polygonEditor.create();
12
         
13
         // Or Edit from existing points  
14
         const initialPos = [
15
              Cesium.Cartesian3.fromDegrees(20, 40),
16
              Cesium.Cartesian3.fromDegrees(45, 40),
17
              Cesium.Cartesian3.fromDegrees(30, 20)
18
          ];
19
         this.editing$ = this.polygonEditor.edit(initialPos);
20
    });
21
    }
22
}
Copied!
1
<ac-map>
2
   <polygons-editor></polygons-editor>
3
</ac-map>
Copied!
Check the full stackblitz example:
Angular Cesium Polygon Editor Example - StackBlitz
StackBlitz
​
Create, Edit and Handle your editable geometry 
Use create() to start creating your geometry. The default events are click for adding points and double click for finish creating the shape, these events are configurable:    
1
startDraw() {
2
  // Each editor has it own events to configure 
3
  const editing$ = this.polygonsEditor.create({
4
      addPointEvent: CesiumEvent.RIGHT_CLICK, // Default: LEFT_CLICK
5
      addLastPointEvent: CesiumEvent.RIGHT_CLICK, // Default: LEFT_DOUBLE_CLICK
6
      addLastPointModifier: CesiumEventModifier.CTRL, // Default: none
7
    })
8
}
Copied!
Create mode and Edit mode 
In create mode a geometry is created from scratch, for every click on the map a new point is added to your shape. After you finish creating your shape in will change to edit mode. 
In edit mode you can update, delete and add your shape positions. You can do it by dragging the points to update their locations and deleting points by right click on the point. 
Adding new points can be done by dragging the "virtual points" created in the edit mode - which converts the virtual point the a "real" point, of course all is configurable:
1
    this.editing$ = this.polygonsEditor.edit(initialPositions, {
2
      pointProps: {
3
        showVirtual: true // Default: true
4
      }
5
    });
Copied!
polygon with "virtual" edit points
Controlling your edited geometry 
 All editors return a custom Observer object that allows you to subscribe to the shape actions and to manipulate your geometry from the code. All have dispose() method for removing the geometry.
1
this.editing$ = this.polygonsEditor.create();
2
​
3
// Stop editng and remove the geomerty 
4
this.editing$.dispose();
5
​
6
// Subscribe to events updates 
7
this.editing$.subscribe((editUpdate: PolygonEditUpdate) => {
8
  if (editUpdate.editAction === EditActions.DRAG_POINT_FINISH) {
9
    console.log(editUpdate.points); // point = position with id
10
    console.log(editUpdate.positions); // or just position
11
    console.log(editUpdate.updatedPosition); // added position
12
  }
13
 
14
// Enable/disable geometry editing  
15
this.editing$.enable();
16
this.editing$.disable();
17
​
18
// Get current postions 
19
const cartesian3Positions = this.editing$.getCurrentPoints();
20
​
21
// Update your positions manually (in edit mode only)
22
this.editing$.setManually(newCartesian3s);
23
​
24
// Update the the first point  (in edit mode only)
25
const polygonPoints = this.editing$.getCurrentPoints();
26
polygonPoints[0].setPosition(Cesium.Cartesian3.fromDegrees(20, 20)); 
27
const newUpdatedPoints = polygonPoints.map(p => ({position: p.getPosition(),pointProps: p.props,}));
28
this.editing$.setManually(newUpdatedPoints);
29
​
30
// Add new position manually (in edit mode only)
31
const polygonPositions = this.editing$.getCurrentPoints().map(p => p.getPosition());
32
polygonPositions.push( Cesium.Cartesian3.fromDegrees(30, 24));
33
this.editing$.setManually(polygonPositions); // accepts Cartesian3 or Point Obj
34
​
35
// Finish shape creation programmatically
36
this.editing$.finishCreation();
37
​
Copied!
Geometry Customisation 
All editors appearance is customisable, each editor has it own configuration to change the material, size, and behaviour. Each have it's own default configuration, but you can pass your own settings.
In the following example we create a transparent polygon with a dashed outline:   
1
    // create accepts PolygonEditOptions object
2
    const editing$ = this.polygonsEditor.create({
3
      pointProps: {
4
        color: Cesium.Color.WHITE,
5
        pixelSize: 10,
6
      },
7
      polygonProps: {
8
        material: Cesium.Color.TRANSPARENT,
9
      },
10
      polylineProps: {
11
        material: () => new Cesium.PolylineDashMaterialProperty()
12
      }
13
    });
Copied!
Adding labels 
The editors allows you to draw labels over a shape that is being edited with one of the editors.
To add label drawing logic to your editor use the function setLabelsRenderFn() .
setLabelsRenderFn(callback) - receives a callback that is called every time the shape is redrawn (except when the shape is being dragged). 
callback: (update: T, labels: LabelProps[]) => LabelProps[]
The callback is called with the last shape state and with an array of the current labels. 
Return type: LabelProps[].
You can also use updateLabels() to pass an array of labels of type LabelProps[] to be drawn.
1
this.editing$ = this.polygonsEditor.create();
2
​
3
this.editing$.setLabelsRenderFn((update: PolygonEditUpdate) => {
4
  let counter = 0;
5
  const newLabels: LabelProps[] = [];
6
  update.positions.forEach(position => newLabels.push({
7
    text: `Point ${counter++}`,
8
    scale: 0.6,
9
    eyeOffset: new Cesium.Cartesian3(10, 10, -1000),
10
    fillColor: Cesium.Color.BLUE,
11
  }));
12
  return newLabels;
13
});
Copied!
Drawing over 3dTiles and Terrain 
You can draw over 3dTiles and terrain, the editor will clamp to the relevant 3D object.  By default the the 3D drawing is false, so you must enable it:
1
// Enable clamp to 3dTiles 
2
this.editing$ = this.polygonsEditor.create({
3
  clampHeightTo3D: true
4
});
5
​
6
// Enbale clamp to terrain
7
this.editing$ = this.polygonsEditor.create({
8
  clampHeightTo3D: true,
9
  clampHeightTo3DOptions: {
10
    clampToTerrain: true, // Default: false (if true will only clamp to terrain)
11
    clampMostDetailed: true, // Fix height after finish editing 
12
    clampToHeightPickWidth: 1 // scene.clampToHeight() width , 3dTiles only
13
  }
14
});
Copied!
currently supported : PolylineEditorService, PolygonEditorService
Behind the scene the editor is using scene.pickPosition and scene.clampToGround for 3dTiles and camera.getPickRay() for terrain, to set the correct height of the shape. 
So the shape positions will accurate as much as the rendered model is. 
Please notice, according to cesium issue, using scene.pick() simultaneously with pickPosition()
can make the pickPosition() return wrong height values, so try to avoid it.
Widgets - Previous
Zoom To Rectangle
Circle Editor
Last modified 5mo ago
Copy link
Contents
Basic Usage
Create, Edit and Handle your editable geometry
Create mode and Edit mode
Controlling your edited geometry
Geometry Customisation
Adding labels
Drawing over 3dTiles and Terrain