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:
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[];
}
@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:
@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: 
map.component.ts
map.component.html
@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>

GUIDES - Previous

Viewer Configuration

Next - Widgets

Zoom To Rectangle

Last modified 2yr ago

Copy link

On this page

<range-and-bearing />

`<range-and-bearing />`

`create(options?)`

`@Inputs()`

Usage example: