Class: ThreeLayer

mapboxgl.supermap.ThreeLayer

The three layers class.

new mapboxgl.supermap.ThreeLayer(id, renderer, options)

ThreeLayer.js, line 21
Name Type Default Description
id string

The layer ID.
renderer string "gl" optional

The rendering mode of the layer (canvas or WebGL). Value: "gl", "canvas".
options Object

Initialization parameters.

Name Type Description
threeOptions Object

The parameter object initialized by the threejs renderer. For details of the parameters, see: WebGLRenderer CanvasRenderer
Fires
Example
var threeLayer = new mapboxgl.supermap.ThreeLayer('three');
//Model drawing
threeLayer.on("initialized", draw);
threeLayer.addTo(map);

function draw() {
   var scene=threeLayer.getScene();
   camera=threeLayer.getCamera();
   var light = new THREE.PointLight(0xffffff);
   camera.add(light);
   var material = new THREE.MeshPhongMaterial({color: 0xff0000});
   //Convert to a model based on coordinate points
   var mesh = this.toThreeMesh(feature.geometry.coordinates, 10, material, true);
   //Model added to 3D scene
   scene.add(mesh);
}

There are two ways to overlay a model:

    1.Call threeLayer.toThreeMesh to directly convert geographic coordinates into a threejs 3D model (for extruded models, such as urban buildings) and then add to the 3D scene.
    2.Create a mesh using the interface of ThreeJS, then call threeLayer.setPosition to set the geographic location and then add it to the 3D scene.

Extends

Events

draw

ThreeLayerRenderer.js, line 75

draw event, trigger after calling the interface provided for external drawing

prepare

ThreeLayerRenderer.js, line 69

initialized event, trigger after initializing.

render

ThreeLayer.js, line 413

render event, triggered when the map is rendered (when the map state changes).

rendererinitialized

ThreeLayerRenderer.js, line 126

rendererinitialized event, trigger after renderer initializing.

renderscene

ThreeLayer.js, line 400

renderScene Event, triggered after the scene is rendered.

Methods

addObject(object3D, coordinate){this}

ThreeLayer.js, line 120

Set the coordinates (latitude and longitude) of the threejs 3D object.

Name Type Description
object3D THREE.Object3D

Threejs 3D object. reference:THREE.Object3D and subclass object.
coordinate Array.<number> | Object

The added three object coordinates (latitude and longitude).
Returns:
Type Description
this this

addTo(map){this}

ThreeLayer.js, line 319

Add a layer to the map.

Name Type Description
map Object

The object of the map.
Returns:
Type Description
this The object of this.

clearAll(clearCamera){this}

ThreeLayer.js, line 200

Clear all threejs objects.

Name Type Description
clearCamera boolean

Whether to clear the camera at the same time.
Returns:
Type Description
this The object of this.

clearMesh(){this}

ThreeLayer.js, line 182

Clear all threejs mesh objects.

Returns:
Type Description
this The object of this.

distanceToThreeVector3(x, y, lngLat){THREE.Vector3}

ThreeLayer.js, line 250

A threejs 3D missing object that computes new coordinates from a given distance of a given coordinate.

Name Type Description
x number

x-axis distance in meters.
y number

y-axis distance in meters.
lngLat Array.<number> | Object

Source coordinates.
Returns:
Type Description
THREE.Vector3 The threejs 3D missing object of the target point. reference:THREE.Vector3

draw(gl, scene, camera){this}

ThreeLayer.js, line 371

Provides an external threejs model drawing interface.

Name Type Description
gl THREE.WebGLRenderer | THREE.CanvasRenderer

Threejs renderer context. For details, please refer to:
WebGLRenderer/ CanvasRenderer
scene THREE.Scene

Threejs scene object. For details, please refer to:THREE.Scene
camera THREE.Camera

Threejs camera object. For details, please refer to:THREE.Camera
Returns:
Type Description
this The object of this.
Example
var threeLayer = new mapboxgl.supermap.ThreeLayer('three');
//Can be modeled by overriding draw
threeLayer.draw = function (gl, scene, camera) {
    //TODO drawing operation.
}
threeLayer.addTo(map);

getCamera(){THREE.Camera}

ThreeLayer.js, line 143

Get the threejs camera.

Returns:
Type Description
THREE.Camera Threejs camera. reference:THREE.Camera

getCanvas(){HTMLCanvasElement}

ThreeLayer.js, line 350

Get the three layer canvas.

Returns:
Type Description
HTMLCanvasElement The canvas of the three layers.

getCanvasContainer(){HTMLElement}

ThreeLayer.js, line 341

Get the three layer container.

Returns:
Type Description
HTMLElement A container for the three layers.

getCoordinatesCenter(coordinates){Object}

ThreeLayer.js, line 297

Gets the center coordinate of the given coordinate array.

Name Type Description
coordinates Array.<Array.<number>>

An array of coordinates.
Returns:
Type Description
Object A coordinate object containing latitude and longitude.

getScene(){THREE.Scene}

ThreeLayer.js, line 134

Get the scene object of threejs.

Returns:
Type Description
THREE.Scene Threejs scene object, reference:THREE.Scene

getThreeRenderer(){THREE.WebGLRenderer|THREE.CanvasRenderer}

ThreeLayer.js, line 152

Get the threejs renderer.

Returns:
Type Description
THREE.WebGLRenderer | THREE.CanvasRenderer Threejs renderer. reference: THREE.WebGLRenderer/ THREE.CanvasRenderer

lngLatToPosition(lngLat){THREE.Vector3}

ThreeLayer.js, line 238

Longitude and latitude turns three js 3D vector objects.

Name Type Description
lngLat Array.<number> | Object

Latitude and longitude coordinates.
Returns:
Type Description
THREE.Vector3 Three js 3D vector object. reference:THREE.Vector3

remove()

ThreeLayer.js, line 359

Remove the layer.

removeDuplicatedCoordinates(coordinates){Array.<Array.<number>>}

ThreeLayer.js, line 273

Remove the repeated coordinates in the array.

Name Type Description
coordinates Array.<Array.<number>>

An array of coordinates.
Returns:
Type Description
Array.<Array.<number>> A new array of coordinates.

renderScene(){this}

ThreeLayer.js, line 393

Rendered scenes.

Returns:
Type Description
this this

setPosition(object3D, coordinate){this}

ThreeLayer.js, line 220

Set the coordinates (latitude and longitude) of the threejs 3D object.

Name Type Description
object3D THREE.Object3D

Threejs 3D object, reference:THREE.Object3D and subclass object.
coordinate Array.<number> | Object

The added three object coordinates (latitude and longitude).
Returns:
Type Description
this The object of this.

toThreeMesh(coordinates, amount, material, removeDuplicated){THREE.Mesh}

ThreeLayer.js, line 89

Create a threejs Mesh object. Convert geographic coordinates to a threejs 3D model (for extruded models such as urban buildings).

Name Type Description
coordinates Array.<Object>

An array of coordinate points.
amount number

height.
material THREE.Material

Threejs material object. reference:THREE.Material
removeDuplicated boolean optional

Whether to remove duplicate coordinate points.
Returns:
Type Description
THREE.Mesh Threejs Mesh object. reference:THREE.Mesh

toThreeShape(coordinates)

ThreeLayer.js, line 69

Create a threejs shape object.

Name Type Description
coordinates Array

An array of coordinate points.
Returns:
THREE.Shapehttps://threejs.org/docs/index.html#api/extras/core/Shape The object of the threejs shape.