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.

create(options?)

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:
1
interface RangeAndBearingOptions {
2
//Used to customize the line graphics
3
lineEditOptions?: PolylineEditOptions;
4
5
//Used to style all of the labels
6
labelsStyle?: LabelStyle;
7
8
//Used to style the distance labels
9
distanceLabelsStyle?: LabelStyle;
10
11
//Used to style the bearing labels
12
bearingLabelsStyle?: LabelStyle;
13
14
//Used to set a custom bearing string formater function.
15
bearingStringFn?: (value: number) => string;
16
17
//Used to set a custom range string formater function.
18
distanceStringFn?: (value: number) => string;
19
20
//Used to set a custom labels function.
21
//The function is called every update of the tool.
22
//It should return an array of LabelProps that should be displayed
23
//along the range and bearing polyline from start to finish.
24
labelsRenderFn?: (update: PolylineEditUpdate, labels: LabelProps[]) => LabelProps[];
25
}
Copied!

@Inputs()

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:
1
@Input() lineEditOptions?: PolylineEditOptions = {};
2
@Input() labelsStyle?: LabelStyle = {};
3
@Input() distanceLabelsStyle?: LabelStyle = {};
4
@Input() bearingLabelsStyle?: LabelStyle = {};
5
@Input() bearingStringFn?: (value: number) => string;
6
@Input() distanceStringFn?: (value: number) => string;
7
@Input() labelsRenderFn?:
8
(update: PolylineEditUpdate, labels: LabelProps[]) => LabelProps[];
Copied!

Usage example:

map.component.ts
map.component.html
1
@Component({...})
2
export class Map {
3
rnb: PolylineEditorObservable;
4
@ViewChild('rangeAndBearing', {static: false})
5
private rangeAndBearing: RangeAndBearingComponent;
6
7
createRangeAndBearing() {
8
this.disposeRangeAndBearing()
9
this.rnb = this.rangeAndBearing.create({
10
style: { pointProps: { pixelSize: 12 } },
11
bearingLabelsStyle: { fillColor: Cesium.Color.GREEN }
12
});
13
}
14
15
disposeRangeAndBearing(){
16
if (this.rnb) {
17
this.rnb.dispose();
18
}
19
}
20
}
Copied!
1
<ac-map>
2
<range-and-bearing #rangeAndBearing></range-and-bearing>
3
<my-button (onClick)="createRangeAndBearing()">Craete R&B</my-button>
4
<my-button (onClick)="disposeRangeAndBearing()">Dispose R&B</my-button>
5
</ac-map>
Copied!
Last modified 2yr ago
Copy link