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!
Last modified 2yr ago
Copy link