Camera management and user interaction systems for different viewing perspectives including map, 3D orbit, orthographic, and first-person views.
Web Mercator projection view for 2D map visualization.
class MapView extends View {
constructor(props?: MapViewProps);
}
interface MapViewProps {
/** View identifier */
id?: string;
/** X position in pixels */
x?: number | string;
/** Y position in pixels */
y?: number | string;
/** Width in pixels */
width?: number | string;
/** Height in pixels */
height?: number | string;
/** Controller configuration */
controller?: boolean | Controller;
/** Clear color */
clear?: boolean | {color?: Color, depth?: number, stencil?: number};
/** Layer filter */
layerFilter?: (params: {layer: Layer, viewport: Viewport}) => boolean;
}
interface MapViewState {
/** Longitude in degrees */
longitude: number;
/** Latitude in degrees */
latitude: number;
/** Zoom level */
zoom: number;
/** Camera pitch in degrees (0-60) */
pitch?: number;
/** Camera bearing in degrees */
bearing?: number;
/** Altitude in screen units */
altitude?: number;
/** Max zoom level */
maxZoom?: number;
/** Min zoom level */
minZoom?: number;
/** Max pitch in degrees */
maxPitch?: number;
/** Min pitch in degrees */
minPitch?: number;
}3D orbital camera view for 3D object inspection.
class OrbitView extends View {
constructor(props?: OrbitViewProps);
}
interface OrbitViewState {
/** Camera target X coordinate */
target: [number, number, number];
/** Camera rotation around X axis */
rotationX: number;
/** Camera rotation around orbit axis */
rotationOrbit: number;
/** Camera distance from target */
zoom: number;
/** Min zoom distance */
minZoom?: number;
/** Max zoom distance */
maxZoom?: number;
/** Min rotation X */
minRotationX?: number;
/** Max rotation X */
maxRotationX?: number;
/** Orbit axis */
orbitAxis?: 'Y' | 'Z';
}Orthographic projection view for technical/architectural visualization.
class OrthographicView extends View {
constructor(props?: OrthographicViewProps);
}
interface OrthographicViewState {
/** Camera target coordinates */
target: [number, number, number];
/** Zoom level */
zoom: number;
/** Min zoom level */
minZoom?: number;
/** Max zoom level */
maxZoom?: number;
}First-person camera view for immersive navigation.
class FirstPersonView extends View {
constructor(props?: FirstPersonViewProps);
}
interface FirstPersonViewState {
/** Camera longitude */
longitude: number;
/** Camera latitude */
latitude: number;
/** Camera altitude */
altitude: number;
/** Camera bearing in degrees */
bearing: number;
/** Camera pitch in degrees */
pitch: number;
/** Max pitch */
maxPitch?: number;
/** Min pitch */
minPitch?: number;
}User interaction handlers for each view type.
/** Base controller class */
abstract class Controller {
constructor(props?: any);
/** Handle view state changes */
abstract onViewportChange(viewport: Viewport, event: any): any;
/** Set controller properties */
setProps(props: any): void;
/** Finalize controller */
finalize(): void;
}
/** Map navigation controller */
class MapController extends Controller {
constructor(props?: MapControllerProps);
}
interface MapControllerProps {
/** Enable scroll to zoom */
scrollZoom?: boolean;
/** Enable pan */
dragPan?: boolean;
/** Enable rotation */
dragRotate?: boolean;
/** Enable double click to zoom */
doubleClickZoom?: boolean;
/** Enable touch zoom */
touchZoom?: boolean;
/** Enable touch rotate */
touchRotate?: boolean;
/** Enable keyboard navigation */
keyboard?: boolean;
/** Zoom speed */
zoomSpeed?: number;
/** Zoom acceleration */
zoomAcceleration?: number;
/** Drag sensitivity */
dragSensitivity?: number;
}
/** Orbit camera controller */
class OrbitController extends Controller {
constructor(props?: OrbitControllerProps);
}
/** Orthographic camera controller */
class OrthographicController extends Controller {
constructor(props?: OrthographicControllerProps);
}
/** First-person camera controller */
class FirstPersonController extends Controller {
constructor(props?: FirstPersonControllerProps);
}Camera and projection calculation classes.
/** Base viewport class */
abstract class Viewport {
constructor(props: ViewportProps);
/** Project world coordinates to screen */
project(coordinates: Position, opts?: {topLeft?: boolean}): [number, number, number];
/** Unproject screen coordinates to world */
unproject(pixels: [number, number, number?], opts?: {targetZ?: number, topLeft?: boolean}): Position;
/** Get view matrix */
getViewMatrix(): number[];
/** Get projection matrix */
getProjectionMatrix(): number[];
/** Get view-projection matrix */
getViewProjectionMatrix(): number[];
/** Get distance scales */
getDistanceScales(): {unitsPerMeter: [number, number, number], metersPerUnit: [number, number, number]};
/** Check if coordinates are visible */
isGeographyLayer(): boolean;
/** Width in pixels */
readonly width: number;
/** Height in pixels */
readonly height: number;
/** Zoom level */
readonly zoom: number;
}
/** Web Mercator viewport */
class WebMercatorViewport extends Viewport {
constructor(props: WebMercatorViewportProps);
/** Get map bounds */
getBounds(options?: {z?: number}): [[number, number], [number, number]];
/** Fit bounds to viewport */
fitBounds(bounds: [[number, number], [number, number]], options?: {
padding?: number;
offset?: [number, number];
}): {longitude: number, latitude: number, zoom: number};
}
interface WebMercatorViewportProps {
width: number;
height: number;
longitude: number;
latitude: number;
zoom: number;
pitch?: number;
bearing?: number;
altitude?: number;
}
/** Orbit viewport */
class OrbitViewport extends Viewport {
constructor(props: OrbitViewportProps);
}
/** Orthographic viewport */
class OrthographicViewport extends Viewport {
constructor(props: OrthographicViewportProps);
}
/** First-person viewport */
class FirstPersonViewport extends Viewport {
constructor(props: FirstPersonViewportProps);
}Usage Examples:
import {Deck, MapView, OrbitView} from 'deck.gl';
// Single map view
const deck = new Deck({
views: new MapView({id: 'map'}),
initialViewState: {
longitude: -122.4,
latitude: 37.8,
zoom: 12,
pitch: 45,
bearing: 30
},
controller: true
});
// Multiple views
const deck = new Deck({
views: [
new MapView({id: 'map', x: '0%', y: '0%', width: '50%', height: '100%'}),
new OrbitView({id: '3d', x: '50%', y: '0%', width: '50%', height: '100%'})
],
viewState: {
map: {longitude: -122.4, latitude: 37.8, zoom: 12},
'3d': {target: [0, 0, 0], rotationX: 45, rotationOrbit: 30, zoom: 10}
},
controller: {
map: true,
'3d': true
}
});interface ViewportProps {
width: number;
height: number;
viewMatrix?: number[];
projectionMatrix?: number[];
}
type ViewState = MapViewState | OrbitViewState | OrthographicViewState | FirstPersonViewState;