CanvasTagMarker(markerOptions)

new CanvasTagMarker(markerOptions)

Parameters:
Name Type Description
markerOptions object
Properties
Name Type Description
size object

size of the canvas

Properties
Name Type Description
width integer

width of the canvas
height integer

height of the canvas

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

readonly context

Get the 2d context of the canvas to draw on it.

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

size

Set the size of the canvas.

Example

Change size 

 canvasTagMarker.size = {
   width: 128,
   height: 64
 }

tagQuaternion

set the quaternion of the tag

Inherited From:

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

takeEffects()

Make the drawing commands take effects.

Example
// get context
 let ctx = canvasTagMarker.context
 // draw something
 // let size = canvasTagMarker.size
 // ctx.drawRect(0, 0, size.width, size.height, some paint) // a rectangle here
 // take effects
 canvasTagMarker.takeEffects()

abstract updateVisibility(options)

Propagated event, screen visibility is being updated.

Parameters:
Name Type Description
options object
Inherited From: