Range And Bearing

<range-and-bearing />

Range and bearing is a tool for measuring distances and angles on the map. It is implemented using PolylinesEditorService and returns a PolylineEditorObservable when activated.


The main function of the range and bearing tool is the create() function that is used to start drawing a new range and bearing on the map. It receives an optional options argument that can be used to customize the tool behavior.
The options argument is of type RangeAndBearingOptions:
interface RangeAndBearingOptions {
//Used to customize the line graphics
lineEditOptions?: PolylineEditOptions;
//Used to style all of the labels
labelsStyle?: LabelStyle;
//Used to style the distance labels
distanceLabelsStyle?: LabelStyle;
//Used to style the bearing labels
bearingLabelsStyle?: LabelStyle;
//Used to set a custom bearing string formater function.
bearingStringFn?: (value: number) => string;
//Used to set a custom range string formater function.
distanceStringFn?: (value: number) => string;
//Used to set a custom labels function.
//The function is called every update of the tool.
//It should return an array of LabelProps that should be displayed
//along the range and bearing polyline from start to finish.
labelsRenderFn?: (update: PolylineEditUpdate, labels: LabelProps[]) => LabelProps[];


The <range-and-bearing> component can receive any of the properties of options (the optional argument of the create() function) as an @Input(). The options object that is passed to the create() function will override the matching inputs of the component. The component inputs are:
@Input() lineEditOptions?: PolylineEditOptions = {};
@Input() labelsStyle?: LabelStyle = {};
@Input() distanceLabelsStyle?: LabelStyle = {};
@Input() bearingLabelsStyle?: LabelStyle = {};
@Input() bearingStringFn?: (value: number) => string;
@Input() distanceStringFn?: (value: number) => string;
@Input() labelsRenderFn?:
(update: PolylineEditUpdate, labels: LabelProps[]) => LabelProps[];

Usage example:

export class Map {
rnb: PolylineEditorObservable;
@ViewChild('rangeAndBearing', {static: false})
private rangeAndBearing: RangeAndBearingComponent;
createRangeAndBearing() {
this.rnb = this.rangeAndBearing.create({
style: { pointProps: { pixelSize: 12 } },
bearingLabelsStyle: { fillColor: Cesium.Color.GREEN }
if (this.rnb) {
<range-and-bearing #rangeAndBearing></range-and-bearing>
<my-button (onClick)="createRangeAndBearing()">Craete R&B</my-button>
<my-button (onClick)="disposeRangeAndBearing()">Dispose R&B</my-button>
Copy link
On this page
<range-and-bearing />