Ellipse Editor

Search…
Ellipse Editor
Ellipse Drawing service for creating and editing Ellipses.
Usage:
You must provide EllipsesEditorService yourself:
my-map.component.ts
my-map.component.html
1
@Component({
2
  selector: 'my-map',
3
  templateUrl: './my-map.component.html',
4
  providers: [EllipsesEditorService],
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. 
EllipsesEditorService works together with <ellipses-editor> component. Therefor you need to create <ellipses-editor>for each EllipsesEditorService of course somewhere under <ac-map>
1
<ac-map id="my-map">
2
   <ellipses-editor></ellipses-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$: EllipseEditorObservable;
4
    
5
    constructor(private ellipseEditor: EllipsesEditorService) {}
6
    
7
    startDraw() {
8
         this.editing$ = this.ellipseEditor.create();
9
         
10
         // Or Edit from existing points  
11
         const center = Cesium.Cartesian3.fromDegrees(20, 40);
12
         this.editing$ = this.ellipsesEditor.edit(center, 800000, 20, 400000);
13
    });
14
    }
15
}
Copied!
Api
create(options?: EllipseEditOptions, eventPriority?: number)
Start a creating a Ellipse over the map,  Returns: EllipseEditorObservable
1
 // Start creating polyline
2
 const editing$ = ellipseEditorService.create();
3
 this.editing$.subscribe(editResult => {
4
 			console.log(editResult.positions);
5
 	});
Copied!
edit(center: Cartesian3, majorRadius: number, rotation?: number, minorRadius?: number, options?: EllipseEditOptions, priority?: number)
Start editing a Ellipse over the map from a given positions, Returns: EllipsesEditorObservable
1
const editing$ = this.ellipsesEditor.edit(initialCenterPos, 800000, 20, 400000);
Copied!
The editor is fully customisable with EllipseEditOptions :
addPointEvent - Set Cesium event for adding last point, default: LEFT_CLICK
addPointModifier - Set Cesium event modifier for adding point, default: none
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
ellipseProps - Ellipse 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
circleToEllipseTransformation - If true the shape will start as circle and only become ellipse after relevant event is fired, default: false
circleToEllipseTransformEvent - mouse event for transforming to ellipse 
circleToEllipseTransformEventModifier - event modifier for transforming to ellipse
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 Ellipse Editor Example - StackBlitz
StackBlitz
​
Circle Editor
Hippodrome Editor
Last modified 2yr ago
Copy link
Contents
Usage:
Api
Example