abstract Marker(markerOptions)

The base for all Marker classes.

Creates a marker to be inserted into the sandbox with the options specified. If a sandbox (alias: earth) is specified, the marker is added to the sandbox upon construction.

Marker Space is the local cooridnate system origined at specified position. X towards east, Y towards north, Z along earth normal.

new abstract Marker(markerOptions)

Creates an instance of Marker.

Parameters:
Name Type Description
markerOptions object

options for initialization

Properties
Name Type Attributes Default Description
position LngLatAlt

marker position

earth Earth

the earth where the marker is appended

sandbox Earth

earth's alias

visible bool <optional>
true

show the marker

name string <optional>
unknown

name of the marker

interactable bool <optional>
false

will this marker respond to mouse events

patrolRoutes function <optional>

the routes data of marker

Members

euler :object

The orientation in Eular angle representation. { x: rotation angle around X axis in radian, y: radian, z: radian, order: rotation order, default 'XYZ'}. Use this instead of orientation if you are not familar with the math.

See:
Example

Set orientation by Eular angles

 marker.euler = {x: Math.PI/6, y: Math.PI/4, z: Math.PI/3} // rotate around X-axis for 30 degree; Y for 45 degree; Z for 60 degree, in that order.
 marker.euler = {y: Math.PI/2} // rotate around Y-axis for 90 degree.

readonly ID :string

Get the unique id.

interactable :bool

Set if the marker is interactable. Set to true to respond to mouse events.

Example

Set interactable

 marker.interactable = true // make this marker interactable
 marker.interactable = !marker.interactable // flip interactable status

name :string

A string of name.

Example

Set name

 marker.name = 'this marker' // set name as 'this marker'
 marker.name = marker.name + ' suffix' // extend the name

orientation :object

Set the rotation by an uniform quaternion {x, y, z, w}. Use eular instead if you are not sure how to use this.

See:
Example

Set orientation

 marker.orientation = {x: 0, y: 0, z: 0, w: 1}

position :LngLatAlt

Change the current position {lng, lat, alt}.

Example

Set position

 marker.position = {
   lng: 113.93977612840078,
   lat: 22.5364271949327,
   alt: 12.3
 }

scale :number

Set the scale of the marker.

Example

Set scale

 marker.scale = 2.0 // set scale to 2.0
 marker.scale = marker.scale * 2.0 // make it two times bigger

visible :bool

Set the visibility of the marker.

Example

Set visible

 marker.visible = false // make this marker invisible
 marker.visible = !marker.visible // flip visible status

x :number

Set the scale of the marker in x direction.

Example

Set scale x

 marker.x = 2.0 // set scale x to 2.0
 marker.x = marker.x * 2.0 // make it two times bigger in x direction

y :number

Set the scale of the marker in y direction.

Example

Set scale y

 marker.y = 2.0 // set scale y to 2.0
 marker.y = marker.y * 2.0 // make it two times bigger in y direction

z :number

Set the scale of the marker in z direction.

Example

Set scale z

 marker.z = 2.0 // set scale z to 2.0
 marker.z = marker.z * 2.0 // make it two times bigger in z direction

Methods

abstract animate(options)

Propagated event, new frame being rendered.

Parameters:
Name Type Description
options object

abstract destruct()

Remove this marker from the sandbox and release resources occupied by it.

Example

Destruct a marker

 marker.destruct()

detachControl()

Detach and hide the control gizmo of the marker

Example

Detach control

 marker.detachControl()

dim()

Un-highlight the marker. (hide the blue fence of the marker)

Example

Un-highlight

 marker.dim()

light()

Highlight the marker. (show the blue fence of the marker)

Example

Highlight

 marker.light()

off(eventType, handler)

Un-register the handler from an event.

Parameters:
Name Type Description
eventType string
handler function
Example

Un-register interaction events

 marker.off('click')
 marker.off('mouseover')
 marker.off('mouseenter')
 marker.off('mouseleave')

on(eventType, handler)

Register an event with a handler. Note: an event can only has one handler.

Parameters:
Name Type Description
eventType string

'click', 'mouseover', 'mouseenter', 'mouseleave'

handler function

event handler

Example

Register interaction events

 marker.on('click', function (event) {
   console.log('click on marker ', marker, event)
 })
 marker.on('mouseover', function (event) {
   console.log('mouse over marker ', marker, event)
 })
 marker.on('mouseenter', function (event) {
   console.log('mouse enter marker ', marker, event)
 })
 marker.on('mouseleave', function (event) {
   console.log('mouse leave marker ', marker, event)
 })
 marker.interactable = true // the marker must be interactable for events to take effects

orientationByHorizontalPoints(pts, flip) → {Quaternion}

get the realigned orientation from horizontal points

Parameters:
Name Type Default Description
pts Array.<LngLatAlt>
flip bool false
Returns:
Quaternion

abstract sceneUpdated(options)

Propagated periodic event handler. Triggered when scene content is updated.

Parameters:
Name Type Description
options object

setControlMode(mode)

Set the mode of control gizmo

Parameters:
Name Type Description
mode string

the mode of the control gizmo 'translate', 'rotate'

Example

Set the mode of the control

 marker.setControlMode('translate')
 marker.setControlMode('rotate')

shapeToEarth() → {Matrix4}

Transformation matrix from shapeHolder-space to earth-space

Returns:
Matrix4

shapeToScene() → {Matrix4}

Transformation matrix from shapeHolder-space to scene-root

Returns:
Matrix4

showControl(mode)

Play the {index} patrol route of the marker

Parameters:
Name Type Description
mode string

the mode of the control gizmo: 'translate', 'rotate'

Example

Show control

 marker.showControl('translate') // show control used for translate
 marker.showControl('rotate') // show control used for rotate

abstract updateVisibility(options)

Propagated event, screen visibility is being updated.

Parameters:
Name Type Description
options object