PolyFenceLineMarker(markerOptions)

new PolyFenceLineMarker(markerOptions)

Parameters:
Name Type Description
markerOptions object
Properties
Name Type Description
points array

position array of the points
lineWidth number

width of the line
color any

anything that can be parsed by THREE.Color
depthTest bool

whether this marker is doing depth test
textOptions object

text options used to draw text on the labels
labelVisible bool

whether the labels are visible
fenceHeight number

height of the fence
opacity number

opacity of the fence, real number in [0, 1]
Example

construction 

 let pts = [
   altizure.LngLatAlt(121.62207076772476, 31.215100709313937, 38.71264891175848),
   altizure.LngLatAlt(121.62223528048824, 31.215088706573, 19.093825215424204),
   altizure.LngLatAlt(121.62240077344717, 31.215081359056317, 39.37697345820135),
   altizure.LngLatAlt(121.62240150082697, 31.21530379856871, 38.812298225319545)
 ]
 let defaultTextOptions = {
   margin: 0,
   lineHeight: 0.1,
   align: 'center',
   fillStyle: 'red',
   font: 'bold 60px Times New Roman',
   outlineWidth: 2,
   outlineStyle: 'black',
   resetCursorY: true,
   trimText: true
 }
 // modify the text options to draw your desired labels
 let polyFenceLineMarker = new altizure.PolyFenceLineMarker({
   sandbox: sandbox,
   points: pts,
   lineWidth: 0.5,
   depthTest: true,
   color: 0xff111,
   labelsVisible: true,
   textOptions: defaultTextOptions,
   fenceHeight: 5,
   opacity: 0.3
 })

Extends

Members

color

set the color

Overrides:
Example

Change color 

 polyFenceLineMarker.color = 0xff0000 // red

depthTest

set depth test

Overrides:
Example

Change depthTest 

 polyFenceLineMarker.depthTest = false // shoule be in front now

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.

fenceHeight

Set the height of the fence

Example

Set fence height 

 polyFenceLineMarker.fenceHeight = 10.3

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

labelScaleFunc

set the custom label scale behavior

Overrides:
Example

Define label scale function 

 polyBaseLineMarker.labelScaleFunc = (number) => {
   return 1.0 // label scale not changing
 }

labelsVisible

set the visibility of the labels

Overrides:
Example

Change visibility of the labels 

 polyBaseLineMarker.labelsVisible = true // labels visible

readonly length

Get the total length of the lines.

Inherited From:
Example

Get total length 

 let totalLength = polyBaseLineMarker.length

lineWidth

Currently useless as fence has no width.

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 the opacity of the fence

Example

Set opacity 

 polyFenceLineMarker.opacity = 0.3

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}

readonly points

get the list of points used to construct this marker

Inherited From:

readonly pointsNumber

get the length of the point list

Inherited From:

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

speed

set the speed of the movement of the animation

style

set the style of the fence

Example

Set the style 

 polyFenceLineMarker.style = {
   texture: 'fence', // 'fence', 'arrow' or an image file url
   mapping: 'linear', // 'linear' or 'repeat'
   color: 0xffffff,
   animation: 'horizontal', // or 'verticle', 'none'. default 'hortizontal'
   opacity: 1.0
 }

textOptions

set the text options

Overrides:
Example

Change text options 

 polyBaseLineMarker.textOptions = {
   margin: 0,
   lineHeight: 0.1,
   align: 'center',
   fillStyle: 'red',
   font: 'bold 60px Times New Roman',
   outlineWidth: 2,
   outlineStyle: 'black',
   resetCursorY: true,
   trimText: true
 }

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

addPoint(lngLatAlt)

Add a point to the end.

Parameters:
Name Type Description
lngLatAlt altizure.LngLatAlt
Overrides:
Example

Add a point 

 let pt = new altizure.LngLatAlt(121.62207076772476, 31.215100709313937, 42.71264891175848)
 polyFenceLineMarker.addPoint(pt)

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')

setPoint(index, lngLatAlt)

Set the index-th point as lngLatAlt

Parameters:
Name Type Description
index integer
lngLatAlt altizure.LngLatAlt
Overrides:
Example

set the point 

 let pt = new altizure.LngLatAlt(121.62207076772476, 31.215100709313937, 42.71264891175848)
 polyFenceLineMarker.setPoint(polyFenceLineMarker.pointsNumber - 1, pt) // set the last point to be pt
 // polyFenceLineMarker.setPoint(0, pt) // set first point to be pt
 // polyFenceLineMarker.setPoint(1, pt) // set second point to be pt

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: