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!

GUIDES - Previous

Viewer Configuration

Next - Widgets

Zoom To Rectangle

Last modified 2yr ago

Copy link

`<range-and-bearing />`

`create(options?)`

`@Inputs()`

Usage example: