Earth(divname, earthOptionsopt)

Create an Earth in a specified divElement.

new Earth(divname, earthOptionsopt)

Parameters:
Name Type Attributes Description
divname string

name of divElement to draw the earth.
earthOptions object <optional>

options to init the earth.

Properties
Name Type Attributes Default Description
altlonglat object <optional>

position of the camera.

Properties
Name Type Attributes Description
longitude number <optional>

in degree
latitude number <optional>

in degree
altitude number <optional>

meters above the ground
orientation object <optional>

orientation of the camera.

Properties
Name Type Attributes Description
northing number <optional>

in degree
tilt number <optional>

in degree
renderItems object <optional>

items (not) to be rendered

Properties
Name Type Attributes Default Description
earth bool <optional>
 true

render earth
featureInView bool <optional>
 true

featured projects in view. default true
develop bool <optional>
 false

in develop mode. default false.
Examples

Create an altizure earth in html. 

<html lang="en">
  <head>
  </head>
  <body>
    <div id="page-content"></div>
    <script type="text/javascript" src="../release/altizure-earth-apis.min.js"></script>
    <script>
      let earth = new altizure.Earth('page-content')
    </script>
  </body>
</html>

customize initial camera position 

 let options = {
   altlonglat: { longitude: projectInfo.geoInfo.centerLong,
                 latitude: projectInfo.geoInfo.centerLat,
                 altitude: 100},
   orientation: {northing: 6.6, tilt: 60}
 }
 let earth = new altizure.Earth('page-content', options)

Members

readonly domElement

The dom element of the renderer

enableDolly

Enable earth dolly.

readonly renderer

Threejs WebGLRenderer.

readonly scene

threejs scene

readonly sceneRoot

The scene root of the earth (earth space)

readonly viewerCamera

Threejs camera.

Methods

calculateDistanceBetweenTwoPoints(first, second) → {number}

Calculate distance in meters between two LngLatAlt points

Parameters:
Name Type Description
first LngLatAlt

first point
second LngLatAlt

second point
Returns:
number -
  • distance between two points in meters

destruct() → {bool}

Destructor.

Returns:
bool

earthToScene() → {Matrix4}

From (abstract) earth space to scene root.

Returns:
Matrix4

freeze() → {bool}

Freeze earth orbit control. (orbit, swirl, dolly)

Returns:
bool

generateMask(boundaryPtns, altRange, markerArray, bufferMaxSizeopt) → {Object}

generate a snapshot with given markers and use the color as their ids in the snapshot

Parameters:
Name Type Attributes Default Description
boundaryPtns Array

Array of lngLatAlt form points
altRange Object

altitude range in meters. e.g. {min: 0, max: 40}
markerArray Array

Array of markers
bufferMaxSize Number <optional>
 512

the length of the returned buffer's larger side
Returns:
Object -
  • { mask: { buffer: UintArray8, resolution: Numeric, resolutionwidth: width of a resolution area, resolutionheight: height of a resolution area, dimension: buffer dimension {width, height}, bbox: bounding box lngLatAlt form }, mapping: { some color ids: some markers } }

lngLatAlt2XYZ(LngLatAlt) → {THREE.Vector3}

convert LngLatAlt to THREE.Vector3 in earth coordinate space

Parameters:
Name Type Description
LngLatAlt altizure.LngLatAlt
Returns:
THREE.Vector3
Example

convert LngLatAlt to THREE.Vector3 

 let lngLatAlt = {lng: 113.93977612840078, lat: 22.5364271949327, alt: 12.3}
 let vector3 = sandbox.lngLatAlt2XYZ(lngLatAlt)
 // vector3 is in THREE.Vector3 form

markerSnapshot(boundaryPtns, altRange, renderObjects, returnDepthopt, bufferMaxSizeopt) → {Object}

Take a snapshot of a bounded area with specified objects to render

Parameters:
Name Type Attributes Default Description
boundaryPtns Array

Array of lngLatAlt form points
altRange Object

altitude range in meters. e.g. {min: 0, max: 40}
renderObjects Array

Array of objects to render
returnDepth Bool <optional>
 false

wether the result is depth buffer or not
bufferMaxSize Number <optional>
 512

the length of the returned buffer's larger side
Returns:
Object -
  • { buffer: UintArray8, resolution: Numeric, resolutionwidth: width of a resolution area, resolutionheight: height of a resolution area, dimension: buffer dimension {width, height}, bbox: bounding box lngLatAlt form }
Examples

Take a colorful snapshot 

 let boundaryPtns = [
   {lng: 113.939, lat: 22.536},
   {lng: 113.9391, lat: 22.5361},
   // more points to specify the boundary
   ...
 ]
 // take a colorful (RGB snapshot)
 let RGBSnapshot = sandbox.markerSnapshot(
   boundaryPtns, // boundary
   {min: 0, max: 40}, // altitude range
   [polygonMarker.contentHolder, altizureProjectMarker.contentHolder]
   // here a polygonMarker and an altizureProjectMarker are rendered
 )
 // RGBSnapshot.dimension: {width: width of the snapshot, height: height of the snapshot}
 // RGBSnapshot.buffer: UintArray8 with size 4 * dimension.width * dimension.height
 // RGBSnapshot.bbox: the bounding box of the snapshoted area
 // RGBSnapshot.resolution: area that each pixel represents
 // RGBSnapshot.resolutionwidth: width of area that each pixel represents
 // RGBSnapshot.resolutionheight: height of area that each pixel represents

Take a depth snapshot 

 let boundaryPtns = [
   {lng: 113.939, lat: 22.536},
   {lng: 113.9391, lat: 22.5361},
   // more points to specify the boundary
   ...
 ]
 // take a depth snapshot
 let depthSnapshot = sandbox.markerSnapshot(
   boundaryPtns, //boundary
   {min: 0, max 40}, // altitude range
   [altizureProjectMarker.contentHolder],
   // here an altizureProjectMarker is rendered
   true // so that this will returns a depth snapshot
 )
 // depthSnapshot.dimension: {width: width of the snapshot, height: height of the snapshot}
 // depthSnapshot.buffer: UintArray8 with size dimension.width * dimension.height. Higher place should be darker (smaller values)
 // depthSnapshot.bbox: the bounding box of the snapshoted area
 // depthSnapshot.resolution: area that each pixel represents
 // RGBSnapshot.resolutionwidth: width of area that each pixel represents
 // RGBSnapshot.resolutionheight: height of area that each pixel represents

pick(event) → {LngLatAlt}

Pick the point on earth at a specified mouse event position.

Parameters:
Name Type Description
event MouseEvent

mouse/touch event
Returns:
LngLatAlt -
  • contact point with earth
Example

pick earth point by mouse 

let earth = new altizure.Earth('page-content', options)
let domElement = earth.domElement
domElement.addEventListener('mousedown', function (event) {
  if (event.button === 0) { // left button
    let pt = earth.pick(event)
    console.log('earth.pick', pt)
  }
}, false)

pickOnProjects(event) → {LngLatAlt}

Pick the point on altizure models.

Parameters:
Name Type Description
event MouseEvent

mouse/touch event
Returns:
LngLatAlt -
  • contact point with any AltizureProjectMarker, undefined if not contact with projects

unfreeze() → {bool}

Unfreeze earth orbit control.

Returns:
bool