Ellipse Drawing service for creating and editing Ellipses.

Usage:

You must provide EllipsesEditorService yourself:

@Component({
  selector: 'my-map',
  templateUrl: './my-map.component.html',
  providers: [EllipsesEditorService],
})
export class MyMapComponent {}

<ac-map id="my-map"></ac-map>

EllipsesEditorService works together with <ellipses-editor> component. Therefor you need to create <ellipses-editor>for each EllipsesEditorService of course somewhere under <ac-map>

<ac-map id="my-map">
   <ellipses-editor></ellipses-editor>
</ac-map>
​

Thats it! just Inject the service and use the create() and edit() methods:

@Component({...})
export class MyMapComponent {
    editing$: EllipseEditorObservable;
    
    constructor(private ellipseEditor: EllipsesEditorService) {}
    
    startDraw() {
         this.editing$ = this.ellipseEditor.create();
         
         // Or Edit from existing points  
         const center = Cesium.Cartesian3.fromDegrees(20, 40);
         this.editing$ = this.ellipsesEditor.edit(center, 800000, 20, 400000);
    });
    }
}

Api

• create(options?: EllipseEditOptions, eventPriority?: number)

Start a creating a Ellipse over the map, Returns: EllipseEditorObservable

 // Start creating polyline
 const editing$ = ellipseEditorService.create();
 this.editing$.subscribe(editResult => {
 			console.log(editResult.positions);
 	});

• 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

const editing$ = this.ellipsesEditor.edit(initialCenterPos, 800000, 20, 400000);

• 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

​