new PolygonMarker(markerOptions)
Creates an instance of PolygonMarker.
Parameters:
Name | Type | Description | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
markerOptions |
object | options for creation Properties
|
- 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: