Extends

• Marker

Members

color

The pin's color.

Example

Change color

 planeMarker.color = 0xff0000 // red in number
 planeMarker.color = new THREE.Color(0, 1, 0) // green in THREE.Color
 planeMarker.color = '#0000FF' // blue in string

depthTest

Do depth test or not. If false, always in front.

Example

Change depth test status

 planeMarker.depthTest = true // do depth test
 planeMarker.depthTest = !planeMarker.depthTest // flip the status

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.

Overrides:

• Marker#euler

See:

• Eular angle rotation

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 fixedSize

get the fixed size of the planemarker.

fixedSize

set the fixed size of the planemarker. true means 10. it should be approximately the pixel of the height of the texture

readonly ID :string

Get the unique id.

Inherited From:

• Marker#ID

interactable :bool

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

Overrides:

• Marker#interactable

Example

Set interactable

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

isSprite

get whether the tag is a sprite

readonly isSprite

get whether the tag is a sprite

name :string

A string of name.

Overrides:

• Marker#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.

Overrides:

• Marker#orientation

See:

• Quaternion

Example

Set orientation

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

pinLength

The length of the pin underneath the sprite.

Example

Change pinLength

 planeMarker.pinLength = 100 // set pinLength to 100 (in meters)
 planeMarker.pinLength = 0 // no pinLength, pin will be invisible

readonly pivot

get the pivot of the tag

pivot

set the pivot (the rotation center, if the tag is a sprite) of the tag.

position :LngLatAlt

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

Overrides:

• Marker#position

Example

Set position

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

scale

The scale.

Overrides:

• Marker#scale

Example

Change scale

 planeMarker.scale = 2.0 // set scale to 2.0

tagQuaternion

set the quaternion of the tag

texture

Texture to display on sprite.

Example

Change texture

 let loader = new THREE.TextureLoader()
 loader.load('../public/assets/img/meta_description.png', (loadedTexture) => {
   planeMarker.texture = {
     texture: loadedTexture, // the texture to display
     aspectRatio: loadedTexture.image.width / loadedTexture.image.height // the aspect ratio of the texture, width / height
   }
 })

visible

Visibility of sprite and its pin.

Overrides:

• Marker#visible

Example

Change visibility of the sprite and pin

 planeMarker.visible = true // make them visible
 planeMarker.visible = !planeMarker.visible // flip the visibility

x :number

Set the scale of the marker in x direction.

Overrides:

• Marker#x

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.

Overrides:

• Marker#y

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.

Overrides:

• Marker#z

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. update scale if fixedSize > 0.

Parameters:

Name	Type	Description
options	object

Overrides:

• Marker#animate

destruct()

Destructor.

Overrides:

• Marker#destruct

detachControl()

Detach and hide the control gizmo of the marker

Inherited From:

• Marker#detachControl

Example

Detach control

 marker.detachControl()

dim()

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

Inherited From:

• Marker#dim

Example

Un-highlight

 marker.dim()

light()

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

Inherited From:

• Marker#light

Example

Highlight

 marker.light()

off(eventType, handler)

Un-register the handler from an event.

Parameters:

Name	Type	Description
eventType	string
handler	function

Inherited From:

• Marker#off

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

Inherited From:

• Marker#on

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

Inherited From:

• Marker#orientationByHorizontalPoints

abstract sceneUpdated(options)

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

Parameters:

Name	Type	Description
options	object

Inherited From:

• Marker#sceneUpdated

setControlMode(mode)

Set the mode of control gizmo

Parameters:

Name	Type	Description
mode	string	the mode of the control gizmo 'translate', 'rotate'

Inherited From:

• Marker#setControlMode

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

Inherited From:

• Marker#shapeToEarth

shapeToScene() → {Matrix4}

Transformation matrix from shapeHolder-space to scene-root

Returns:

Matrix4

Inherited From:

• Marker#shapeToScene

showControl(mode)

Play the {index} patrol route of the marker

Parameters:

Name	Type	Description
mode	string	the mode of the control gizmo: 'translate', 'rotate'

Inherited From:

• Marker#showControl

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

Inherited From:

• Marker#updateVisibility