Extends

• Earth

Members

static, readonly mat

get the matrix's element in current pose

static pose

set the pose of the camera

static range

set the range of the tilt and alt

readonly camera

Camera interface.

camera.pose (setter and getter) set or get the pose. pose: {lng, lat, alt, north, tilt}

camera.range (setter) set the range for tilt and alt. camera.range = {tilt: {max: ..., min: ...}, alt: {max: ..., min: ...}}

camera.flyTo(p, duration = 2500), p is the pose, duration is fly time in ms. returns a promise which resolves when fly ends.

camera.stop(), stop flying

camera.lookAt(marker, north, tilt, alt, duration = 3000), marker is arbitrary marker, north is the pose north, tile is the pose tilt, alt is the alt over marker, duration is the fly time duration.

or

camera.lookAt(marker, pose, duration = 3000), pose is an object with three keys, north, tilt and alt. example of pose: {north: 40, tilt, 30, alt: undefined} the method will fly to the pose and returns a promise resolve when fly ends.

camera.matToPose(mat), mat is the matrix element. returns the corresonding pose: {lng, lat, alt, north, tilt}

camera.mat (getter) get the matrix element in current pose: number[]

camera.flyToMat(mat, duration = 3000), mat is the matrix element, duration is fly time in ms. returns a promise which resolves when fly ends.

camera.flyToCamToEarth(mat, duration = 2500), mat is the matrix element, duration is fly time in ms. returns a promise which resolves when fly ends.

readonly control

The control.

readonly domElement

The dom element of the renderer

Inherited From:

• Earth#domElement

enableDolly

Enable earth dolly.

Inherited From:

• Earth#enableDolly

readonly height

The height of the Canvas.

readonly interaction

The mouse interaction.

readonly JSON

A json object descriptions of the current scene

readonly renderer

Threejs WebGLRenderer.

Inherited From:

• Earth#renderer

readonly scene

threejs scene

Inherited From:

• Earth#scene

readonly sceneRoot

The scene root of the earth (earth space)

Inherited From:

• Earth#sceneRoot

readonly viewerCamera

Threejs camera.

Inherited From:

• Earth#viewerCamera

visibilityCamera

Set the camera for visibility render.

Example

bind a spot light to a CameraMarker

 sandbox.visibilityCamera = cameraMarker

readonly width

The width of the Canvas.

readonly window

Screen space operations.

window.toLngLatAlt({x, y}) returns LngLatAlt

window.fromLngLatAlt({lng, lat, alt}) returns {x, y}

window.screenshot() returns {width: number, height: number, data: number[], values are integers from 0 to 255}

Methods

static flyTo(p, duration) → {Promise}

flying from current pose to input pose. the process would cost duration(ms)

Parameters:

Name	Type	Description
p	object	{lng, lat, alt, north, tilt}
duration	number	fly time in ms

Returns:

Promise

static flyToCamToEarth(mat, ms) → {promise}

flying to the pose represented by the matrix element

Parameters:

Name	Type	Description
mat	Array.<number>	matrix elements
ms	number	fly time in milliseconds

Returns:

promise -

• resolves when flight ends

static flyToMat(mat, ms) → {promise}

flying to the pose represented by the matrix element

Parameters:

Name	Type	Description
mat	Array.<number>	matrix elements
ms	number	fly time in milliseconds

Returns:

promise -

• resolves when flight ends

static fromLngLatAlt() → {object}

get screen space x, y from LngLatAlt point

Parameters:

Type	Description
LngLatAlt

Returns:

object -

• {x, y}

static lookAt(marker, north, tile, alt, pose, duration) → {Promise}

look at the marker. the camera will fly to appropriate position to look at it with specified north and tilt.

Parameters:

Name	Type	Description
marker	Marker	arbitrary marker the pose can be input by each attributes
north	number	the north of the pose
tile	number	the tilt of the pose
alt	number	the alt over the marker the pose may also be input as object
pose	object	{north, tilt, alt}
duration	number	fly time duration

Returns:

Promise

static matToPose(camToEarth) → {object}

convert a matrix's element to camera pose

Parameters:

Name	Type	Description
camToEarth	Matrix4	camera to earth space

Returns:

object -

• {lng, lat, alt, up, north, tilt}

static screenshot() → {object}

get a screenshot

Parameters:

Type	Description
object	{width: required width, height: required height}

Returns:

object -

• {width: number, height: number, data: number[], values are integers from 0 to 255}

static stop() → {Promise}

stop the flying process

Returns:

Promise

static toLngLatAlt() → {LngLatAlt}

get LngLatAlt by a screen-space point (x, y)

Parameters:

Type	Description
object	{x, y}

Returns:

LngLatAlt

add(type, data, options) → {promsie}

add an GL element to the scene

Parameters:

Name	Type	Description
type	string	type of element: 'AltizureProjectMarker', 'OBJMarker'
data	object	the content
options	object	options to create the marker

Returns:

promsie

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

Inherited From:

• Earth#calculateDistanceBetweenTwoPoints

destruct()

Destructor

Overrides:

• Earth#destruct

earthToScene() → {Matrix4}

From (abstract) earth space to scene root.

Returns:

Matrix4

Inherited From:

• Earth#earthToScene

freeze() → {bool}

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

Returns:

bool

Inherited From:

• Earth#freeze

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 } }

Inherited From:

• Earth#generateMask

lngLatAlt2XYZ(LngLatAlt) → {THREE.Vector3}

convert LngLatAlt to THREE.Vector3 in earth coordinate space

Parameters:

Name	Type	Description
LngLatAlt	altizure.LngLatAlt

Returns:

THREE.Vector3

Inherited From:

• Earth#lngLatAlt2XYZ

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

login()

Set the user info for logged-in users

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 }

Inherited From:

• Earth#markerSnapshot

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

off(eventType, handler)

un-register events.

Parameters:

Name	Type	Description
eventType	string	'cameraChange'
handler	function

on(eventType, handler)

Event registration.

Parameters:

Name	Type	Description
eventType	string	'cameraChange'
handler	function	event handler function

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

Inherited From:

• Earth#pick

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

Inherited From:

• Earth#pickOnProjects

polygonsFromGeoJson(geojson, polygonOptions) → {Array.<PolygonMarker>}

construct a list of PolygonMarker using GeoJson

Parameters:

Name	Type	Description
geojson	object
polygonOptions	object	default {top: 4, bottom: 0.1, color: 0x0000ff, opacity: 0.3}

Returns:

Array.<PolygonMarker>

positionsAltitude(positions, projMarkerList) → {array}

Calculate the altitudes of a list of positions.

Parameters:

Name	Type	Description
positions	array	Array of LngLatAlt positions or positions in {lng, lat} form.
projMarkerList	array	Array of altizure project markers. Used to reduce the load of this function.

Returns:

array -

• altitudes of each positions

queryGeoJsonForAltizureProjectMarker(altizureProjectMarker) → {Promise}

query for GeoJson (building) for an AltizureProjectMarker

Parameters:

Name	Type	Description
altizureProjectMarker	AltizureProjectMarker

Returns:

Promise

render(marker, mode)

Change the rendering mode of an (altizureProject) marker.

Parameters:

Name	Type	Description
marker	AltizureProjectMarker
mode	string	'texture' = 0, 'flat', 'wireframe', 'select' , 'crop', 'visibility', 'transparent', 'phong'

unfreeze() → {bool}

Unfreeze earth orbit control.

Returns:

bool

Inherited From:

• Earth#unfreeze

updateVisibility()

Update the screen visibility. Usually called after camera is changed.