English

CompositeViewer

A composite viewer built on top of the engine, integrating 3D Viewer, Panorama Viewer, and 2D Map (OpenLayers Map) into a unified interface, enabling seamless coordination between multiple views through mode switching.

Class Definition

class CompositeViewer implements IEntity

Properties

Property	Type	Description
`id`	`EntityId`	Unique entity identifier, defaults to UUID v7 auto-generation
`eventDispatcher`	`EventDispatcher<CompositeViewerEventMap>`	Event dispatcher for event listening and dispatching
`componentManager`	`ComponentManager<CompositeViewer>`	Component manager for managing components mounted on the Viewer
`app`	`ViewerApp`	The ViewerApp instance this belongs to
`isPanoLoaded`	`boolean`	Whether panorama is loaded
`gameMode`	`{ type: string; model: GLTFModel \| null }`	Game mode configuration (default `{ type: "fly", model: null }`)
`currentPano`	`PanoPoint \| null`	Currently open panorama point (getter/setter)
`mode`	`CompositeViewerMode`	Current Viewer mode (read-only)
`viewer`	`Viewer \| null`	3D Viewer instance (read-only)
`panoViewer`	`PanoramaViewer \| null`	Panorama viewer instance (read-only)
`map2d`	`Map \| null`	2D Map instance (read-only)

Types

CompositeViewerMode

type CompositeViewerMode = "2D" | "3D" | "PANO" | "PANO_3D";

Constructor

constructor(app: ViewerApp, options: { id?: EntityId; mode: CompositeViewerMode })

Parameter	Type	Required	Description
`app`	`ViewerApp`	Yes	The ViewerApp instance this belongs to
`options.id`	`EntityId`	No	Custom entity ID, auto-generates UUID v7 if not provided
`options.mode`	`CompositeViewerMode`	Yes	Initial view mode

The constructor automatically mounts the following built-in components:

BaseMapComponent
LayerComponent
DrawingComponent
FlyThroughComponent
IdentifyComponent

Methods

destroy()

public destroy(): void

Destroys the current CompositeViewer and removes itself from the ViewerApp.compositeViewers list.

changeMode(mode)

public changeMode(mode: CompositeViewerMode): void

Switches the view mode. Dispatches modeChange event during switching; if exiting from panorama mode (PANO / PANO_3D → other modes), also dispatches exitPano event and resets currentPano.

Parameter	Type	Description
`mode`	`CompositeViewerMode`	Target mode

addViewer(viewer)

public addViewer(viewer: Viewer): Viewer

Adds an existing 3D Viewer instance. If one already exists, prints a warning and returns the existing instance. After adding, automatically binds the following native events and forwards them to eventDispatcher:

click → viewerClick
move → viewerMouseMove
identify → viewerIdentify / viewerIdentifyMap / viewerIdentifyPointCloud / viewerIdentifyBim
cameramoveprecise → viewerCameramoveprecise
bimFeatureTypeLoad → bimFeatureTypeLoad

Parameter	Type	Description
`viewer`	`Viewer`	3D Viewer instance

Returns: Viewer — The added Viewer instance.

createViewer(containerId, options)

public createViewer(containerId: string, options: ViewerOptions): Viewer

Creates and adds a 3D Viewer instance.

Parameter	Type	Description
`containerId`	`string`	Container element ID
`options`	`ViewerOptions`	Viewer configuration options

Returns: Viewer — The newly created Viewer instance.

addPanoViewer(panoViewer)

public addPanoViewer(panoViewer: PanoramaViewer): PanoramaViewer

Adds an existing panorama viewer instance. If one already exists, prints a warning and returns the existing instance. After adding, automatically binds the following native events and forwards them to eventDispatcher:

render → panoViewerRender
panoLoad → panoLoad
panoClick → panoClick
identify → panoViewerIdentify
pinpointStart → panoPinpointStart
pinpointStop → panoPinpointStop

Parameter	Type	Description
`panoViewer`	`PanoramaViewer`	Panorama viewer instance

Returns: PanoramaViewer — The added panorama viewer instance.

createPanoViewer(containerId, options?)

public createPanoViewer(containerId: string, options?: PanoViewerOptions): PanoramaViewer

Creates and adds a panorama viewer instance.

Parameter	Type	Required	Description
`containerId`	`string`	Yes	Container element ID
`options`	`PanoViewerOptions`	No	Panorama viewer configuration options

Returns: PanoramaViewer — The newly created panorama viewer instance.

createMap2d(containerId, mapUrl?)

public createMap2d(containerId: string, mapUrl?: string): Map | null

Creates a 2D map (based on OpenLayers). Defaults to Hong Kong Lands Department basemap with EPSG:2326 projection support. Automatically monitors container size changes and updates map dimensions.

Parameter	Type	Required	Description
`containerId`	`string`	Yes	Container element ID
`mapUrl`	`string`	No	Tile map URL template, uses default basemap if not provided

Returns: Map | null — The created OpenLayers Map instance.

getPanoOpacity()

public getPanoOpacity(): number | undefined

Gets the current opacity value of the panorama viewer.

Returns: number | undefined — Opacity value (0-1), returns undefined if no panorama viewer exists.

setPanoOpacity(opacity)

public setPanoOpacity(opacity: number): void

Sets the opacity of the panorama viewer. Dispatches panoOpacityChange event on success.

Parameter	Type	Description
`opacity`	`number`	Opacity value, range 0 - 1

gotoPano(targetPano, nearbyPanoList, config?)

public gotoPano(
    targetPano: PanoPoint,
    nearbyPanoList: PanoPoint[],
    config?: { heading?: number; pitch?: number }
): void

Navigates to the specified panorama point. Calls loadPano on first load, switchPano on subsequent switches. Dispatches switchPano event after navigation and automatically switches to PANO mode if not already in panorama mode.

Parameter	Type	Required	Description
`targetPano`	`PanoPoint`	Yes	Target panorama point
`nearbyPanoList`	`PanoPoint[]`	Yes	List of nearby panorama points
`config`	`{ heading?: number; pitch?: number }`	No	Initial view angle configuration (only effective on first load)

Events (CompositeViewerEventMap)

Listen via eventDispatcher.addEventListener(type, callback).

Event Name	Trigger Condition	data Type
`modeChange`	View mode switch	`CompositeViewerMode`
`exitPano`	Exit panorama mode	`{}`
`viewerClick`	3D Viewer click	`{ position, obj, event }`
`viewerMouseMove`	3D Viewer mouse move	`{ position, obj, event }`
`viewerIdentify`	Feature identification (general)	`{ identifyData: IdentifyData }`
`viewerIdentifyMap`	Map feature identification	`{ identifyData: IdentifyMapData }`
`viewerIdentifyPointCloud`	Point cloud feature identification	`{ identifyData: IdentifyPointCloudData }`
`viewerIdentifyBim`	BIM feature identification	`{ identifyData: IdentifyBimData }`
`viewerCameramoveprecise`	Camera precise movement	`{ pos: { x, y, z, heading, pitch } }`
`bimFeatureTypeLoad`	BIM feature type load	`{ json, id }`
`panoViewerRender`	Panorama viewer render	`{ pos: { x, y, z, heading, pitch, fov } }`
`panoLoad`	Panorama load complete	`{}`
`panoClick`	Panorama click	`{ panoId, panoViewer }`
`switchPano`	Panorama switch	`{ panoPoint: PanoPoint }`
`panoViewerIdentify`	Panorama feature identification	`{ featureInfo: IdentifyData }`
`panoPinpointStart`	Panorama pinpoint start	`{}`
`panoPinpointStop`	Panorama pinpoint stop	`{}`
`panoOpacityChange`	Panorama opacity change	`{ opacity: number }`

ON THIS PAGE

CompositeViewer#

Class Definition#

Properties#

Types#

CompositeViewerMode#

Constructor#

Methods#

destroy()#

changeMode(mode)#

addViewer(viewer)#

createViewer(containerId, options)#

addPanoViewer(panoViewer)#

createPanoViewer(containerId, options?)#

createMap2d(containerId, mapUrl?)#

getPanoOpacity()#

setPanoOpacity(opacity)#

gotoPano(targetPano, nearbyPanoList, config?)#

Events (CompositeViewerEventMap)#