TextTagMarker(markerOptions)

new TextTagMarker(markerOptions)

Parameters:
Name Type Description
markerOptions object
Properties
Name Type Attributes Default Description
textOptions.text string

textContent
textOptions.textStyle object <optional>

text style

Properties
Name Type Attributes Default Description
fillStyle object <optional>
 "black"
font object <optional>
 "Arial"
outlineWidth object <optional>
 2
textOptions.textStyle object <optional>
 "black"
Example

construction 

 let textTagMarker = new altizure.TextTagMarker({
   // text string
   text: 'Altizure',
   // text style
   textStyle: {
     fillStyle: 'rgb(155, 155, 255)',
     font: 'normal 500 24px Arial',
     outlineWidth: 2,
     outlineStyle: 'rgb(0, 0, 0)'
   },
   // icon position
   position: {
     "lng": 113.939420,
     "lat": 22.5362742,
     "alt": 32.40720
   },
   // scene
   sandbox: sandbox,
   scale: 1 // icon size
 })

Extends

Members

color

The pin's color.

Overrides:
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.

Overrides:
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.

Inherited From:
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.

fixedSize

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

Overrides:

readonly ID :string

Get the unique id.

Inherited From:

interactable :bool

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

Inherited From:
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

Overrides:

name :string

A string of name.

Inherited From:
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.

Inherited From:
See:
Example

Set orientation 

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

pinLength

The length of the pin underneath the sprite.

Overrides:
Example

Change pinLength 

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

pivot

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

Overrides:

position :LngLatAlt

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

Inherited From:
Example

Set position 

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

scale

The scale.

Overrides:
Example

Change scale 

 planeMarker.scale = 2.0 // set scale to 2.0

tagQuaternion

set the quaternion of the tag

Inherited From:

text

Change the text in tag.

Example

Change text. 

textTagMarker.text = 'Altizure is great'

textStyle

Change the text style. Avalable options: { fillStyle: 'rgb(155, 155, 255)', font: 'normal 500 24px Arial', outlineWidth: 2, outlineStyle: 'rgb(0, 0, 0)' }

Example

Change text style. 

textTagMarker.textStyle = {fillStyle: 'rgb(155, 155, 255)'}

texture

Texture to display on sprite.

Inherited From:
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:
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.

Inherited From:
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.

Inherited From:
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.

Inherited From:
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
Inherited From:

destruct()

Destructor.

Overrides:

detachControl()

Detach and hide the control gizmo of the marker

Inherited From:
Example

Detach control 

 marker.detachControl()

dim()

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

Inherited From:
Example

Un-highlight 

 marker.dim()

light()

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

Inherited From:
Example

Highlight 

 marker.light()

off(eventType, handler)

Un-register the handler from an event.

Parameters:
Name Type Description
eventType string
handler function
Inherited From:
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:
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:

abstract sceneUpdated(options)

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

Parameters:
Name Type Description
options object
Inherited From:

setControlMode(mode)

Set the mode of control gizmo

Parameters:
Name Type Description
mode string

the mode of the control gizmo 'translate', 'rotate'
Inherited From:
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:

shapeToScene() → {Matrix4}

Transformation matrix from shapeHolder-space to scene-root

Returns:
Matrix4
Inherited From:

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:
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: