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 graphicslineEditOptions?: PolylineEditOptions;//Used to style all of the labelslabelsStyle?: LabelStyle;//Used to style the distance labelsdistanceLabelsStyle?: LabelStyle;//Used to style the bearing labelsbearingLabelsStyle?: 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[];
@Component({...})export class Map {rnb: PolylineEditorObservable;@ViewChild('rangeAndBearing', {static: false})private rangeAndBearing: RangeAndBearingComponent;createRangeAndBearing() {this.disposeRangeAndBearing()this.rnb = this.rangeAndBearing.create({style: { pointProps: { pixelSize: 12 } },bearingLabelsStyle: { fillColor: Cesium.Color.GREEN }});}disposeRangeAndBearing(){if (this.rnb) {this.rnb.dispose();}}}
<ac-map><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></ac-map>