Class: ThreeLayer

ThreeLayer

Three 图层类。Three.js 是一款开源的主流 3D 绘图 JS 引擎。 此类主要提供了 threejs 模型绘制、渲染3D场景的功能。

new ThreeLayer(id, renderer, options)

Usage
// 浏览器
<script type="text/javascript" src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.js"></script>
<script>
  new mapboxgl.supermap.ThreeLayer(id, renderer, options);
  
</script>

// ES6 Import
import { ThreeLayer } from '@supermapgis/iclient-mapboxgl';

new ThreeLayer(id, renderer, options);
mapboxgl/overlay/ThreeLayer.js, line 15
Name Type Default Description
id string

图层 ID。
renderer string "gl" 可选

图层渲染器，仅支持"gl"。'canvas'在 v11.1.0 后被弃用。
options Object

初始化参数。

Name Type Description
threeOptions Object

threejs 渲染器初始化参数对象。参数内容详见: THREE.WebGLRenderer
Fires
Example
var threeLayer = new 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

common/overlay/threejs/ThreeLayerRenderer.js, line 75

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

initialized

common/overlay/threejs/ThreeLayerRenderer.js, line 69

three 初始化之后后触发。

render

mapboxgl/overlay/ThreeLayer.js, line 300

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

rendererinitialized

common/overlay/threejs/ThreeLayerRenderer.js, line 126

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

renderscene

mapboxgl/overlay/ThreeLayer.js, line 291

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

Methods

addObject(object3D, coordinate){ThreeLayer}

mapboxgl/overlay/ThreeLayer.js, line 118

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

Name Type Description
object3D THREE.Object3D

threejs 3D 对象及子类对象。
coordinate Array.<number> | Object

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

deprecated addTo(map){ThreeLayer}

mapboxgl/overlay/ThreeLayer.js, line 83

添加图层到地图。

Name Type Description
map Object

地图对象。
Returns:
Type Description
ThreeLayer ThreeLayer的实例对象。

clearAll(clearCamera){ThreeLayer}

mapboxgl/overlay/ThreeLayer.js, line 166

清除所有 threejs 对象。

Name Type Description
clearCamera boolean

是否清除相机。
Returns:
Type Description
ThreeLayer ThreeLayer的实例对象。

clearMesh(){ThreeLayer}

mapboxgl/overlay/ThreeLayer.js, line 156

清除所有 threejs mesh 对象。

Returns:
Type Description
ThreeLayer ThreeLayer的实例对象。

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

mapboxgl/overlay/ThreeLayer.js, line 199

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

Name Type Description
x number

x 轴距离，单位米。
y number

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

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

draw(){ThreeLayer}

mapboxgl/overlay/ThreeLayer.js, line 267

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

Returns:
Type Description
ThreeLayer ThreeLayer的实例对象。
Example
var threeLayer = new ThreeLayer('three');
//可以通过重写 draw 实现模型绘制
threeLayer.draw = function (gl, scene, camera) {
    //TODO 绘制操作
}
threeLayer.addTo(map);

getCamera(){THREE.Camera}

mapboxgl/overlay/ThreeLayer.js, line 138

获取 threejs 相机。

Returns:
Type Description
THREE.Camera threejs 相机。

getCanvas(){HTMLCanvasElement}

mapboxgl/overlay/ThreeLayer.js, line 249

获取 three 图层画布。

Returns:
Type Description
HTMLCanvasElement three 图层画布。

getCanvasContainer(){HTMLElement}

mapboxgl/overlay/ThreeLayer.js, line 240

获取 three 图层容器。

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

getCoordinatesCenter(coordinates){Object}

mapboxgl/overlay/ThreeLayer.js, line 223

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

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

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

getScene(){THREE.Scene}

mapboxgl/overlay/ThreeLayer.js, line 129

获取 threejs 场景对象。

Returns:
Type Description
THREE.Scene threejs 场景对象。

getThreeRenderer(){THREE.WebGLRenderer}

mapboxgl/overlay/ThreeLayer.js, line 147

获取 threejs renderer。

Returns:
Type Description
THREE.WebGLRenderer threejs renderer。

lngLatToPosition(lngLat){THREE.Vector3}

mapboxgl/overlay/ThreeLayer.js, line 189

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

Name Type Description
lngLat Array.<number> | Object

经纬度坐标。
Returns:
Type Description
THREE.Vector3 threejs 3D 矢量对象。

onAdd(map)

mapboxgl/overlay/ThreeLayer.js, line 67

添加图层到地图。

Name Type Description
map Object

地图对象。

remove()

mapboxgl/overlay/ThreeLayer.js, line 258

移除图层。

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

mapboxgl/overlay/ThreeLayer.js, line 213

移除数组中的重复坐标。

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

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

render()

mapboxgl/overlay/ThreeLayer.js, line 233

renderScene(){ThreeLayer}

mapboxgl/overlay/ThreeLayer.js, line 284

渲染场景。

Returns:
Type Description
ThreeLayer ThreeLayer的实例对象。

setPosition(object3D, coordinate){ThreeLayer}

mapboxgl/overlay/ThreeLayer.js, line 177

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

Name Type Description
object3D THREE.Object3D

threejs 3D 对象及子类对象。
coordinate Array.<number> | Object

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

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

mapboxgl/overlay/ThreeLayer.js, line 105

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

Name Type Description
coordinates Array.<Object>

坐标点数组。
amount number

高度。
material THREE.Material

Threejs 材质对象。
removeDuplicated boolean 可选

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

toThreeShape(coordinates){THREE.Shape}

mapboxgl/overlay/ThreeLayer.js, line 95

创建 threejs shape 对象。

Name Type Description
coordinates Array

坐标点数组。
Returns:
Type Description
THREE.Shape threejs shape 对象。