Class: ThreeLayer

mapboxgl.supermap.ThreeLayer

Three 图层。

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

mapboxgl/overlay/ThreeLayer.js, line 24
Name Type Default Description
id string

图层 ID。
renderer string "gl" 可选

图层渲染方式( canvas 或 WebGL )。取值："gl","canvas"。
options Object

初始化参数。

Name Type Description
threeOptions Object

threejs 渲染器初始化参数对象。参数内容详见: WebGLRenderer CanvasRenderer
Fires
Example
var threeLayer = new mapboxgl.supermap.ThreeLayer('three');
//模型绘制
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});
   //根据坐标点转换成模型
   var mesh = this.toThreeMesh(feature.geometry.coordinates, 10, material, true);
   //模型添加到3D场景
   scene.add(mesh);
}

叠加模型可以通过两种方式：

    1.调用 threeLayer.toThreeMesh 直接将地理坐标转换成 threejs 3D 模型（适用于挤压模型，如城市建筑），然后添加到 3D 场景
    2.使用 ThreeJS 的接口创建好 Mesh,然后调用 threeLayer.setPosition 设置地理位置，然后添加到 3D 场景

Extends

Events

draw

mapboxgl/overlay/threejs/ThreeLayerRenderer.js, line 78

draw 绘制事件, 调用提供给外部绘制的接口后触发

initialized

mapboxgl/overlay/threejs/ThreeLayerRenderer.js, line 72

three 初始化之后后触发。

render

mapboxgl/overlay/ThreeLayer.js, line 416

render 事件，地图渲染时(地图状态改变时)触发。

rendererinitialized

mapboxgl/overlay/threejs/ThreeLayerRenderer.js, line 129

rendererinitialized 事件，初始化 three 渲染器后触发

renderscene

mapboxgl/overlay/ThreeLayer.js, line 403

renderScene 事件，场景渲染后触发。

Methods

addObject(object3D, coordinate){this}

mapboxgl/overlay/ThreeLayer.js, line 123

设置threejs 3D 对象的坐标（经纬度）。

Name Type Description
object3D THREE.Object3D

threejs 3D 对象。参考：THREE.Object3D及子类对象。
coordinate Array.<number> | Object

添加的 three 对象坐标（经纬度）。
Returns:
Type Description
this this

addTo(map){this}

mapboxgl/overlay/ThreeLayer.js, line 322

添加图层到地图。

Name Type Description
map Object

地图对象。
Returns:
Type Description
this this 对象。

clearAll(clearCamera){this}

mapboxgl/overlay/ThreeLayer.js, line 203

清除所有 threejs 对象。

Name Type Description
clearCamera boolean

是否同时清除相机。
Returns:
Type Description
this this 对象。

clearMesh(){this}

mapboxgl/overlay/ThreeLayer.js, line 185

清除所有 threejs mesh 对象。

Returns:
Type Description
this this 对象。

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

mapboxgl/overlay/ThreeLayer.js, line 253

计算距离指定坐标给定距离的新坐标的 threejs 3D 失量对象。

Name Type Description
x number

x 轴距离,单位米。
y number

y 轴距离,单位米。
lngLat Array.<number> | Object

源坐标。
Returns:
Type Description
THREE.Vector3 目标点的 threejs 3D 失量对象。参考：THREE.Vector3

draw(gl, scene, camera){this}

mapboxgl/overlay/ThreeLayer.js, line 374

提供给外部的 threejs 模型绘制接口。

Name Type Description
gl THREE.WebGLRenderer | THREE.CanvasRenderer

threejs 渲染器上下文 。详情请参考：
WebGLRenderer/ CanvasRenderer
scene THREE.Scene

threejs 场景对象。详情请参考：THREE.Scene
camera THREE.Camera

threejs 相机对象。详情请参考：THREE.Camera
Returns:
Type Description
this this对象。
Example
var threeLayer = new mapboxgl.supermap.ThreeLayer('three');
//可以通过重写 draw 实现模型绘制
threeLayer.draw = function (gl, scene, camera) {
    //TODO 绘制操作
}
threeLayer.addTo(map);

getCamera(){THREE.Camera}

mapboxgl/overlay/ThreeLayer.js, line 146

获取threejs 相机。

Returns:
Type Description
THREE.Camera threejs 相机。参考：THREE.Camera

getCanvas(){HTMLCanvasElement}

mapboxgl/overlay/ThreeLayer.js, line 353

获取 three 图层画布。

Returns:
Type Description
HTMLCanvasElement three 图层画布。

getCanvasContainer(){HTMLElement}

mapboxgl/overlay/ThreeLayer.js, line 344

获取 three 图层容器。

Returns:
Type Description
HTMLElement three 图层的容器。

getCoordinatesCenter(coordinates){Object}

mapboxgl/overlay/ThreeLayer.js, line 300

获取给定坐标数组的中心坐标。

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

坐标数组。
Returns:
Type Description
Object 包含经纬度的坐标对象。

getScene(){THREE.Scene}

mapboxgl/overlay/ThreeLayer.js, line 137

获取threejs 场景对象

Returns:
Type Description
THREE.Scene threejs 场景对象,参考：THREE.Scene

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

mapboxgl/overlay/ThreeLayer.js, line 155

获取 threejs renderer。

Returns:
Type Description
THREE.WebGLRenderer | THREE.CanvasRenderer threejs renderer。参考： THREE.WebGLRenderer/ THREE.CanvasRenderer

lngLatToPosition(lngLat){THREE.Vector3}

mapboxgl/overlay/ThreeLayer.js, line 241

经纬度转threejs 3D 失量对象。

Name Type Description
lngLat Array.<number> | Object

经纬度坐标。
Returns:
Type Description
THREE.Vector3 threejs 3D 失量对象。参考：THREE.Vector3

remove()

mapboxgl/overlay/ThreeLayer.js, line 362

移除图层。

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

mapboxgl/overlay/ThreeLayer.js, line 276

移除数组中的重复坐标。

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

坐标数组。
Returns:
Type Description
Array.<Array.<number>> 新的坐标数组。

renderScene(){this}

mapboxgl/overlay/ThreeLayer.js, line 396

渲染场景。

Returns:
Type Description
this this

setPosition(object3D, coordinate){this}

mapboxgl/overlay/ThreeLayer.js, line 223

设置 threejs 3D 对象的坐标（经纬度）。

Name Type Description
object3D THREE.Object3D

threejs 3D 对象，参考：THREE.Object3D及子类对象。
coordinate Array.<number> | Object

添加的 three 对象坐标（经纬度）。
Returns:
Type Description
this this 对象。

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

mapboxgl/overlay/ThreeLayer.js, line 92

创建 threejs Mesh 对象。将地理坐标转换成 threejs 3D 模型（适用于挤压模型，如城市建筑）。

Name Type Description
coordinates Array.<Object>

坐标点数组。
amount number

高度。
material THREE.Material

Threejs 材质对象。参考：THREE.Material
removeDuplicated boolean 可选

是否移除重复的坐标点。
Returns:
Type Description
THREE.Mesh threejs Mesh 对象。参考：THREE.Mesh

toThreeShape(coordinates)

mapboxgl/overlay/ThreeLayer.js, line 72

创建 threejs shape 对象。

Name Type Description
coordinates Array

坐标点数组。
Returns:
THREE.Shapehttps://threejs.org/docs/index.html#api/extras/core/Shape threejs shape 对象。