# 7.1、三维图层初始化
# 7.1.1 初始化
构造函数
new aimap.ThreeLayer("图层ID", options?)
1
options参数：
| 字段名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
defaultLights | boolean | 否 | false | 默认灯光，默认为false,没有灯光会看不到场景里面的三维物体 |
map | Map | 是 | 实例化地图对象 |
示例：
// 添加3d图层
const threeLayerInstance = new aimap.ThreeLayer('threeLayer', {
defaultLights: true,
map,
});
1
2
3
4
5
2
3
4
5
# 7.1.2 添加至地图
地图加载完后添加三维图层，将已声明的三维实例图层threeLayerInstance添加至地图。
map.on("load", () => {
map.addLayer(threeLayerInstance);
});
// 移除3d图层
map.removeLayer(threeLayerInstance);
1
2
3
4
5
2
3
4
5
# 7.2 三维墙
TIP
使用该接口前先执行步骤 7.1、三维图层初始化
# 7.2.1 创建光墙对象并添加至三维图层
构造函数
new aimap.RippleWall(data, options?, Material?, layer)
1
data参数：
示例：
const wallData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [[
[
121.4963436126709,
31.239939640554862
],
[
121.49638652801514,
31.237481194594967
],
[
121.49668693542479,
31.23676566472033
],
[
121.49872541427612,
31.23463738998359
],
[
121.49958372116087,
31.234802516463276
],
[
121.49911165237425,
31.237994905008843
],
[
121.49917602539062,
31.23893058465588
],
[
121.49775981903076,
31.239572712384227
],
[
121.49677276611327,
31.239884601420133
],
[
121.4963436126709,
31.239939640554862
]
]]
}
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
options参数：
| 字段名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| altitude | number | 否 | 0 | 海拔高度(距离地面高度) |
| speed | number | 否 | 0.015 | 动画效果速度 |
| height | number | Expression | 否 | 10 | 立体墙高度，可以用数字表示，或者用 Mapbox 风格的表达式 |
| opacity | number | 否 | 0.5 | 透明度 |
| color | string | 否 | "#0099FF" | |
interactive | boolean | 否 | false | 是否开启交互 |
| minZoom | number | 否 | 3 | 显示最小级别 |
| maxZoom | number | 否 | 20 | 显示最大级别 |
Material参数：
材质，默认材质为THREE.ShaderMaterial，这里可以自定义材质并传入THREE的材质对象 (opens new window)
layer参数：
添加到的图层实例。
示例：
const feature = wallData.features[0];
const wallInstance1 = new aimap.RippleWall(feature, {
altitude: 0,
speed: 0.015,
height: 100,
opacity: 0.5,
color: "#0099FF",
interactive: false
}, undefined, threeLayerInstance);
const wallInstance2 = new aimap.RippleWall(feature, {
altitude: 0,
speed: 0.015,
height: ['interpolate', ['linear'], ['zoom'], 10, 10, 20, 200],
opacity: 0.5,
color: "#0099FF",
interactive: false
}, undefined, threeLayerInstance);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
添加光墙至三维图层：
threeLayerInstance.addMesh(wallInstance);
1
清除光墙实例：
// 不会销毁3d图层
threeLayerInstance.removeMesh(wallInstance);
1
2
2