Getting Started
CORE CONCEPTS
GUIDES
Widgets
API
Geometry Drawing Tools
Part of
AngularCesiumWidgetsModule are useful 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 typeLabelProps[]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, PolygonEditorServiceBehind 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.Last modified 8mo ago