DitchMarker(markerOptions)

Create a ditch in the AltizureProjectMarker.

new DitchMarker(markerOptions)

Creates an instance of DitchMarker.

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

the polygon volume description

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

points of the polygon in counter-clockwise order. Note: 1) the first and last point should be the same to be close, 2) 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
top number | Array.<number> <optional>
 1

top of the volume in meters. When being an array, it specifies each point's altitude individually. Therefore has length equal to points.length - 1.
bottom number <optional>
 0

bottom of the volume in meters
Examples

construction without hole 

 let pts = [
   new altizure.LngLatAlt(113.93868723125762, 22.536830165346906, 0),
   new altizure.LngLatAlt(113.93867780368912, 22.53715382208763, 0),
   new altizure.LngLatAlt(113.93945433925597, 22.53718272790738, 0),
   new altizure.LngLatAlt(113.93945744949984, 22.536853133662152, 0),
   new altizure.LngLatAlt(113.93868723125762, 22.536830165346906, 0)
   // the first and last point should be the same
 ] // length 5
// the tops can be automatically obtained through pickDepthMap(LngLat[], number) using AltizureProjectMarker
 let tops = [
   50, 45, 67, 33.4
 ] // length pts.length - 1 = 4
 // as the first and the last point in pts is the same
 let volume = {
   points: pts,
   color: 0xffffff,
   opacity: 0.3,
   top: tops, // top can be an array or a number. When it is an array, its length should be points.length - 1
   bottom: 0.2 // bottom must be a number for DitchMarker
 }
 let ditchMarker = new altizure.DitchMarker({
   volume: volume,
   sandbox: sandbox
 })

construction with hole 

 let outpts = [
   new altizure.LngLatAlt(113.93868723125762, 22.536830165346906, 0),
   new altizure.LngLatAlt(113.93867780368912, 22.53715382208763, 0),
   new altizure.LngLatAlt(113.93945433925597, 22.53718272790738, 0),
   new altizure.LngLatAlt(113.93945744949984, 22.536853133662152, 0),
   new altizure.LngLatAlt(113.93868723125762, 22.536830165346906, 0)
   // the first and last point should be the same
 ] // length 5
 let holepts = [
   new altizure.LngLatAlt(113.93889136065118, 22.536930209186917, 0),
   new altizure.LngLatAlt(113.93888975348045, 22.537047514032043, 0),
   new altizure.LngLatAlt(113.93909509788641, 22.537064284308517, 0),
   new altizure.LngLatAlt(113.93912719845262, 22.536941793866472, 0),
   new altizure.LngLatAlt(113.9390056396585, 22.536923522386015, 0),
   new altizure.LngLatAlt(113.93889136065118, 22.536930209186917, 0)
 ] // length 6
 let pts = [
   {array: outpts, hole: false}, // length 5
   {array: holepts, hole: true} // length 6
 ]
// the tops can be automatically obtained through pickDepthMap(LngLat[], number) using AltizureProjectMarker
 let tops = [
   [50, 45, 67, 33.4], // length (5 - 1) = 4 as the first and the last point in outpts is the same
   [45, 50, 77, 45, 65] // length (6 - 1) = 5 as the first and the last point in holepts is the same
 ]
 let volume = {
   points: pts,
   color: 0xffffff,
   opacity: 0.3,
   top: tops,
   bottom: 0.2 // bottom must be a number for DitchMarker
 }
 let ditchMarker = new altizure.DitchMarker({
   volume: volume,
   sandbox: sandbox
 })

Extends

Members

bottom

Change the bottom's altitude.

Overrides:
Example

Change bottom 

 ditchMarker.bottom = 0.4 // bottom must be a number for DitchMarker

color

Base color. anything that can be parsed as THREE.Color, a hex number suggested.

Overrides:
Example

Change color 

 polygonBaseMarker.color = 0xff0000 // red

depthTest

Do depth test or not. If false, it should be in front.

Overrides:
Example

Change depthTest 

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

Ditch always has a bottom.

Overrides:

hasTopCover

Ditch always has no top.

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.

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

Ditch is always opaque.

Overrides:

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

texture

The stripe texture for the ditch. An array of colors, each element should be able to be parsed by THREE.Color. examples: ['#343434', 0x645242, 0, THREE.Color(0xffffff)]

Example

Set texture 

 ditchMarker.texture = [
   0xff0000,
   '#00FF00',
   THREE.Color(0, 0, 1),
   'rgb(0.4, 0.5, 1.0)'
 ]
 // array of anything that can be parsed by THREE.Color

top

The altitude of the top. When it is an array, its length must be equal to volume.points.length-1.

Overrides:
Example

Change top 

 // set top of every side edge to be the same
 polygonBaseMarker.top = 100
 // specify different values for different side edges
 // the order of the input array should be the same as the points
 // when the points is 
 // [
 //   {array: length 5, hole: false}, {array: length 6, hole: true}
 // ]
 polygonBaseMarker.top = [
   [110, 140, 180, 133], [100, 200, 150, 115, 175]
   // length (5 - 1) = 4 and length (6 - 1) = 5, corrosponding to the points
 ]
 // special case:
 // when the points is [
 //   {array: length 7, hole: false}
 // ]
 polygonBaseMarker.top = [
   [120, 150, 180, 133, 165, 147] // length (7 - 1) = 6
 ]
 // or:
 polygonBaseMarker.top = [
   120, 150, 180, 133, 165, 147
 ] // this will be automatically converted into the input above

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:

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: