Zoom To Rectangle

The zoom to rectangle service is used to activate a zooming tool that enables the user to draw a rectangle over the map and zoom into the drawn rectangle.
​
init(cesiumService, cameraService)
The function is used to set the map's CesiumService and CameraService in the service. If the function is not called prior to running activate(), the mapId argument must be passed to the activate() function. init() accepts 2 mandatory arguments: 
cesiumService  - The map's CesiumService
cameraService  - The map's CameraService
​
activate(options?, mapId?)
The main function of the service that is used to activate the tool and allows the user to start drawing the rectangle on the map using the mouse. It accepts 2 arguments:
options - object that allows to customize the tool behavior. It is of the following type:
1
interface optionsInterface {
2
  //A callback that will be called every time a rectangle drawing is starting
3
  onStart?: (acMap?: AcMapComponent) => any;
4
  
5
  //A callback that will be called every time a rectangle drawing is fnished
6
  onComplete?: (acMap?: AcMapComponent) => any;
7
  
8
  //Sets the mouse button for drawing the rectangle
9
  //The enum has the following values: LEFT, RIGHT, MIDDLE
10
  mouseButton?: MouseButtons;
11
  
12
  //Determines if the tool should auto disable after zooming
13
  autoDisableOnZoom?: boolean;
14
  
15
  //Sets the zoom animation duration in seconds
16
  animationDurationInSeconds?: number;
17
  
18
  //Sets the minimum area of the screen rectangle (in pixels)
19
  //that is required to zoom
20
  threshold?: number;
21
  
22
  //Determines whether or not to keep the rotation of the map when zooming
23
  keepRotation?: boolean;
24
  
25
  //Sets the style of the rectangle element border 
26
  //using border css compitable string.
27
  borderStyle?: string;
28
  
29
  //Sets the background color of the rectangle element 
30
  //using background-color css compitable string
31
  backgroundColor?: string;
32
  
33
  //Sets the keyboard key code that when pressed disables the tool
34
  resetKeyCode?: number;
35
}
Copied!
The default options are:
1
{
2
  animationDurationInSeconds: 0.5,
3
  resetKeyCode: 27,
4
  borderStyle: '2px solid rgba(0,0,0,0.5)',
5
  backgroundColor: 'rgba(0,0,0,0.2)',
6
  autoDisableOnZoom: true,
7
  threshold: 9,
8
  keepRotation: true,
9
  mouseButton: MouseButtons.LEFT,
10
};
Copied!
mapId - the mapId of the map that the tool will be used in. If init() was not called prior to running activate(), the mapId argument is mandatory.
​
disable(mapId?)
The function is used to disables the tool.
mapId - the mapId of the map that the tool was activated in. If init() was not called prior to running activate(), the mapId argument is mandatory.
​
Usage example: 
map.component.ts
map.component.html
1
@Component({...})
2
export class Map {
3
  constructor(
4
    private cameraService: CameraService,
5
    private cesiumService: CesiumService,
6
    private zoomToRectangleService: ZoomToRectangleService,
7
  ) {
8
    this.zoomToRectangleService.init(cesiumService, cameraService);
9
  }
10
  zoomToRectangle() {
11
    this.zoomToRectangleService.activate();
12
  }
13
}
Copied!
1
<my-button (onclick)="zoomToRectangle()">Zoom To Rectangle</my-button>
Copied!

Widgets - Previous

Range And Bearing

Next - Widgets

Geometry Drawing Tools

Last modified 2yr ago

Copy link

`init(cesiumService, cameraService)`

`activate(options?, mapId?)`

`disable(mapId?)`

Usage example: