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

Widgets - Previous

Range And Bearing

Next - Widgets

Geometry Drawing Tools

Last modified 2yr ago

Copy link

On this page

`init(cesiumService, cameraService)`

`activate(options?, mapId?)`

`disable(mapId?)`

Usage example: