PolygonMarker(markerOptions)

a marker with polygon shape extruded vertically

new PolygonMarker(markerOptions)

Creates an instance of PolygonMarker.

Parameters:
Name Type Description
markerOptions object

options for creation

Properties
Name Type Description
volume object

the polygon volume description

Properties
Name Type Attributes Default Description
points Array.<LngLatAlt>

points of the polygon in counter-clockwise order

  • the first and last point should be the same to be close)
  • at least 4 points are required (to form a triangle)
color number <optional>
0xff0000

color of the volume in hex number

opacity number <optional>
0.1

opacity of the volume

See:
Example

construction

 let pts = [
   new altizure.LngLatAlt(121.62199313850867, 31.21593319676947, 0),
   new altizure.LngLatAlt(121.62212577880096, 31.21597104207788, 0),
   new altizure.LngLatAlt(121.62229316296465, 31.215975738212176, 0),
   new altizure.LngLatAlt(121.62253096041783, 31.215908911711825, 0),
   new altizure.LngLatAlt(121.62253571741567, 31.215670606291315, 0),
   new altizure.LngLatAlt(121.62196509876625, 31.21567483730427, 0),
   new altizure.LngLatAlt(121.62199313850867, 31.21593319676947, 0)
   // the first and the last point must be the same
 ]
 let volume = {
   points: pts,
   top: 40, // top must be a number for PolygonMarker
   bottom: 20, // bottom must be a number for PolygonMarker
   color: 0xf18100,
   opacity: 0.2
 }
 let polygonMarker = new altizure.PolygonMarker({
   volume: volume,
   sandbox: sandbox,
   name: 'polygon'
 })

Extends

Members

bottom

Altitude of the bottom (in meter). Can only be a number.

Overrides:
Example

Change bottom

 polygon.bottom = 0.2

color

Set the polygon marker color

Overrides:
Example

Change color

 polygonMarker.color = 0xff0000 // red

depthTest

Set depth test. If false, it should be in front

Overrides:
Example

Change depthTest

 polygonMarker.depthTest = true // do depth test
 polygonMarker.depthTest = !polygonMarker.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.

hasBottomCover

The polygon has bottom or not.

Overrides:
Example

Change hasBottomCover

 polygonBaseMarker.hasBottomCover = true // has bottom cover
 polygonBaseMarker.hasBottomCover = !polygonBaseMarker.hasBottomCover // flip the status

hasTopCover

The polygon has top or not.

Overrides:
Example

Change hasTopCover

 polygonBaseMarker.hasTopCover = true // has top cover
 polygonBaseMarker.hasTopCover = !polygonBaseMarker.hasTopCover // flip the status

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.

Overrides:
Example

Set interactable

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

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

opacity

Set opacity.

Overrides:
Example

Change opacity

 polygonMarker.opactiy = 0.234

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}

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

Set the scale of the marker.

Inherited From:
Example

Set scale

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

top

Altitude of the top (in meter). Can only be a number.

Overrides:
Example

Change top

 polygonMarker.top = 100

visible :bool

Set the visibility of the marker.

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

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.

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: