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:

interface optionsInterface {
//A callback that will be called every time a rectangle drawing is starting
onStart?: (acMap?: AcMapComponent) => any;
//A callback that will be called every time a rectangle drawing is fnished
onComplete?: (acMap?: AcMapComponent) => any;
//Sets the mouse button for drawing the rectangle
//The enum has the following values: LEFT, RIGHT, MIDDLE
mouseButton?: MouseButtons;
//Determines if the tool should auto disable after zooming
autoDisableOnZoom?: boolean;
//Sets the zoom animation duration in seconds
animationDurationInSeconds?: number;
//Sets the minimum area of the screen rectangle (in pixels)
//that is required to zoom
threshold?: number;
//Determines whether or not to keep the rotation of the map when zooming
keepRotation?: boolean;
//Sets the style of the rectangle element border
//using border css compitable string.
borderStyle?: string;
//Sets the background color of the rectangle element
//using background-color css compitable string
backgroundColor?: string;
//Sets the keyboard key code that when pressed disables the tool
resetKeyCode?: number;
}

The default options are:

{
animationDurationInSeconds: 0.5,
resetKeyCode: 27,
borderStyle: '2px solid rgba(0,0,0,0.5)',
backgroundColor: 'rgba(0,0,0,0.2)',
autoDisableOnZoom: true,
threshold: 9,
keepRotation: true,
mouseButton: MouseButtons.LEFT,
};

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
map.component.ts
@Component({...})
export class Map {
constructor(
private cameraService: CameraService,
private cesiumService: CesiumService,
private zoomToRectangleService: ZoomToRectangleService,
) {
this.zoomToRectangleService.init(cesiumService, cameraService);
}
zoomToRectangle() {
this.zoomToRectangleService.activate();
}
}
map.component.html
<my-button (onclick)="zoomToRectangle()">Zoom To Rectangle</my-button>