Hippodrome Editor
Hippodrome Drawing service for creating and editing Hippodromes.

Usage:

You must provide HippodromeEditorService yourself:
my-map.component.ts
my-map.component.html
1
@Component({
2
selector: 'my-map',
3
templateUrl: './my-map.component.html',
4
providers: [HippodromeEditorService],
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.
HippodromeEditorService works together with <hippodrome-editor> component. Therefor you need to create <hippodrome-editor>for each HippodromeEditorService of course somewhere under <ac-map>
1
<ac-map id="my-map">
2
<hippodrome-editor></hippodrome-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$: HippodromeEditorObservable;
4
5
constructor(private hippodromeEditor: HippodromeEditorService) {}
6
7
startDraw() {
8
this.editing$ = this.hippodromeEditor.create({
9
hippodromeProps: {
10
outline: true,
11
outlineWidth: 2,
12
width: 20000
13
},
14
});
15
16
// Or Edit from existing points
17
const initialPos = [
18
Cesium.Cartesian3.fromDegrees(20, 40),
19
Cesium.Cartesian3.fromDegrees(45, 40),
20
];
21
this.editing$ = this.hippodromeEditor.edit(initialPos);
22
});
23
}
24
}
Copied!

Api

  • create(options?: HippodromeEditOptions, eventPriority?: number)
Start a creating a Hippodrome over the map, Returns: HippodromeEditorObservable
1
// Start creating
2
const editing$ = this.hippodromeEditor.create();
3
this.editing$.subscribe(editResult => {
4
console.log(editResult.positions);
5
});
Copied!
  • edit(positions: Cartesian3[], options?: HippodromeEditOptions, priority?: number)
Start editing a Hippodrome over the map from a given positions, Returns: HippodromeEditorObservable
1
const editing$ = this.hippodromeEditor.edit(initialPositions);
Copied!
  • The editor is fully customisable with HippodromeEditOptions :
    • 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
    • hippodromeProps - Cylinder 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
    • 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 Cylinder Editor Example - StackBlitz
StackBlitz
Last modified 2yr ago
Copy link