Class: MarkerComponent
component.MarkerComponent
classdesc Component for showing and editing 3D marker objects.
The add method is used for adding new markers or replacing
markers already in the set.
If a marker already in the set has the same id as one of the markers added, the old marker will be removed and the added marker will take its place.
It is not possible to update markers in the set by updating any properties directly on the marker object. Markers need to be replaced by re-adding them for updates to geographic position or configuration to be reflected.
Markers added to the marker component can be either interactive
or non-interactive. Different marker types define their behavior.
Markers with interaction support can be configured with options
to respond to dragging inside the viewer and be detected when
retrieving markers from pixel points with the getMarkerIdAt method.
To retrive and use the marker component
example
var viewer = new Viewer({ component: { marker: true }, ... });
var markerComponent = viewer.getComponent("marker");Hierarchy#
Component<MarkerConfiguration>↳
MarkerComponent
Events#
on#
• on(type, handler): void
Fired when a marker drag interaction ends.
example
// Initialize the viewervar viewer = new Viewer({ // viewer options });var component = viewer.getComponent('<component-name>');// Set an event listenercomponent.on('markerdragend', function() { console.log("A markerdragend event has occurred.");});Parameters#
| Name | Type |
|---|---|
type | "markerdragend" |
handler | (event: ComponentMarkerEvent) => void |
Returns#
void
Overrides#
Defined in#
component/marker/MarkerComponent.ts:272
• on(type, handler): void
Fired when a marker drag interaction starts.
example
// Initialize the viewervar viewer = new Viewer({ // viewer options });var component = viewer.getComponent('<component-name>');// Set an event listenercomponent.on('markerdragstart', function() { console.log("A markerdragstart event has occurred.");});Parameters#
| Name | Type |
|---|---|
type | "markerdragstart" |
handler | (event: ComponentMarkerEvent) => void |
Returns#
void
Defined in#
component/marker/MarkerComponent.ts:291
• on(type, handler): void
Fired when the position of a marker is changed.
example
// Initialize the viewervar viewer = new Viewer({ // viewer options });var component = viewer.getComponent('<component-name>');// Set an event listenercomponent.on('markerposition', function() { console.log("A markerposition event has occurred.");});Parameters#
| Name | Type |
|---|---|
type | "markerposition" |
handler | (event: ComponentMarkerEvent) => void |
Returns#
void
Defined in#
component/marker/MarkerComponent.ts:310
Properties#
componentName#
â–ª Static componentName: ComponentName = "marker"
Overrides#
Defined in#
component/marker/MarkerComponent.ts:82
Accessors#
activated#
• get activated(): boolean
Get activated.
Returns#
boolean
Value indicating if the component is currently active.
Defined in#
defaultConfiguration#
• get defaultConfiguration(): TConfiguration
Get default configuration.
Returns#
TConfiguration
Default configuration for component.
Defined in#
name#
• get name(): string
Get name.
description The name of the component. Used when interacting with the
component through the Viewer's API.
Returns#
string
Defined in#
Methods#
add#
â–¸ add(markers): void
Add markers to the marker set or replace markers in the marker set.
description If a marker already in the set has the same
id as one of the markers added, the old marker will be removed
the added marker will take its place.
Any marker inside the visible bounding bbox will be initialized and placed in the viewer.
example
markerComponent.add([marker1, marker2]);Parameters#
| Name | Type | Description |
|---|---|---|
markers | Marker[] | Markers to add. |
Returns#
void
Defined in#
component/marker/MarkerComponent.ts:124
configure#
â–¸ configure(configuration): void
Configure the component.
Parameters#
| Name | Type | Description |
|---|---|---|
configuration | MarkerConfiguration | Component configuration. |
Returns#
void
Inherited from#
Defined in#
fire#
â–¸ fire(type, event): void
Parameters#
| Name | Type |
|---|---|
type | "markerdragend" | "markerdragstart" | "markerposition" |
event | ComponentMarkerEvent |
Returns#
void
Overrides#
Defined in#
../doc/component/marker/MarkerComponent.ts:128
get#
â–¸ get(markerId): Marker
Returns the marker in the marker set with the specified id, or undefined if the id matches no marker.
example
var marker = markerComponent.get("markerId");Parameters#
| Name | Type | Description |
|---|---|---|
markerId | string | Id of the marker. |
Returns#
Defined in#
component/marker/MarkerComponent.ts:159
getAll#
â–¸ getAll(): Marker[]
Returns an array of all markers.
example
var markers = markerComponent.getAll();Returns#
Marker[]
Defined in#
component/marker/MarkerComponent.ts:171
getMarkerIdAt#
â–¸ getMarkerIdAt(pixelPoint): Promise<string>
Returns the id of the interactive marker closest to the current camera position at the specified point.
description Notice that the pixelPoint argument requires x, y
coordinates from pixel space.
With this function, you can use the coordinates provided by mouse events to get information out of the marker component.
If no interactive geometry of an interactive marker exist at the pixel
point, null will be returned.
example
markerComponent.getMarkerIdAt([100, 100]) .then((markerId) => { console.log(markerId); });Parameters#
| Name | Type | Description |
|---|---|---|
pixelPoint | number[] | Pixel coordinates on the viewer element. |
Returns#
Promise<string>
Id of the interactive marker closest to the camera. If no
interactive marker exist at the pixel point, null will be returned.
Defined in#
component/marker/MarkerComponent.ts:198
has#
â–¸ has(markerId): boolean
Check if a marker exist in the marker set.
example
var markerExists = markerComponent.has("markerId");Parameters#
| Name | Type | Description |
|---|---|---|
markerId | string | Id of the marker. |
Returns#
boolean
Defined in#
component/marker/MarkerComponent.ts:234
off#
â–¸ off(type, handler): void
Unsubscribe from an event by its name.
Parameters#
| Name | Type |
|---|---|
type | "markerdragend" | "markerdragstart" | "markerposition" |
handler | (event: ComponentMarkerEvent) => void |
Returns#
void
Overrides#
Defined in#
../doc/component/marker/MarkerComponent.ts:238
remove#
â–¸ remove(markerIds): void
Remove markers with the specified ids from the marker set.
example
markerComponent.remove(["id-1", "id-2"]);Parameters#
| Name | Type | Description |
|---|---|---|
markerIds | string[] | Ids for markers to remove. |
Returns#
void
Defined in#
component/marker/MarkerComponent.ts:331
removeAll#
â–¸ removeAll(): void
Remove all markers from the marker set.
example
markerComponent.removeAll();Returns#
void