Polyline Editor

Search…
Polyline Editor
Polyline Drawing service for creating and editing Polylines.
Usage:
You must provide PolylineEditorService yourself:
my-map.component.ts
my-map.component.html
1
@Component({
2
  selector: 'my-map',
3
  templateUrl: './my-map.component.html',
4
  providers: [PolylineEditorService],
5
})
6
export class MyMapComponent {}
Copied!
1
<ac-map id="my-map"></ac-map>
Copied!
The service is a part of AngularCesiumWidgetsModule therefor you must import it. 
PolylinesEditorService works together with <polylines-editor> component. Therefor you need to create <polylines-editor>for each PolylineEditorServiceAnd of course somewhere under <ac-map>
1
<ac-map id="my-map">
2
   <polylines-editor></polylines-editor>
3
</ac-map>
4
​
Copied!
Thats it! just Inject the service and use the create() and edit() methods:
1
@Component({...})
2
export class MyMapComponent {
3
    editing$: PolylineEditorObservable;
4
    
5
    constructor(private polylineEditor: PolylinesEditorService) {}
6
    
7
    startDraw() {
8
         this.editing$ = this.polylineEditor.create();
9
         
10
         // Or Edit from existing points  
11
         const initialPos = [
12
              Cesium.Cartesian3.fromDegrees(20, 40),
13
              Cesium.Cartesian3.fromDegrees(45, 40),
14
              Cesium.Cartesian3.fromDegrees(30, 20)
15
          ];
16
         this.editing$ = this.polylineEditor.edit(initialPos);
17
    });
18
    }
19
}
Copied!
Api
create(options?: PolylineEditOptions, eventPriority?: number)
Start a creating a Polyline over the map,  Returns: PolylineEditorObservable
1
 // Start creating polyline
2
 const editing$ = polylinesEditorService.create();
3
 this.editing$.subscribe(editResult => {
4
 			console.log(editResult.positions);
5
 	});
Copied!
edit(positions: Cartesian3[], options?: PolylineEditOptions, priority?: number)
Start editing a Polyline over the map from a given positions, Returns: PolylineEditorObservable
1
const editing$ = this.polylinesEditor.edit(initialPositions);
Copied!
The editor is fully customisable with PolylineEditOptions :
addPointEvent - Set Cesium event for adding last point, default: LEFT_CLICK
addPointModifier - Set Cesium event modifier for adding point, default: none
addLastPointEvent - Set Cesium event for adding the final point, default: DOUBLE_CLICK
addLastPointModifier - Set Cesium event modifier for adding last point, default: none
removePointEvent - Set Cesium event for removing a point, default: RIGHT_CLICK
In edit mode only
removePointModifier - Set Cesium event modifier for removing a point, default: none
In edit mode only
dragPointModifier - Set Cesium event modifier for draging a point, default: LEFT_DRAG
In edit mode only
dragPointModifier - Set Cesium event modifier for removing a point, default: none
In edit mode only
pointProps - Point customisation properties 
polylineProps - Polyline customisation properties 
allowDrag - allow shape drag, default: false
In edit mode only
pickConfiguration - configure pick behaviour with: pick height and width and drill pick limit
maximumNumberOfPoints - after maximum point reached change to edit mode 
clampHeightTo3D - if the polyline should clamp to 3D entities 
according to clampHeightTo3DOptions
clampHeightTo3DOptions -  Configuration for clamping to 3D 
clampToTerrain - if to clamp to terrain. default: false - clamps to 3dTiles
clampMostDetailed - after editing the shape the positions height will be fixed with clampToHeight() for 3dTiles and sampleTerrain() for terrain, default: true
clampToHeightPickWidth - clampToHeight() width in meters.
setLabelsRenderFn - receives a callback that is called every time the shape is redrawn (except when the shape is being dragged). The callback is called with the last shape state and with an array of the current labels.
The callback should return LabelProps[]
Example
Angular Cesium Polyline Editor Example - StackBlitz
StackBlitz
​
​
Point Editor
Polygon Editor
Last modified 2yr ago
Copy link
Contents
Usage:
Api
Example