# 到层到户图层以及功能（Building-Indoor）
结合夜光或者真实建筑图层的分层相关接口与到户室内图层能实现一整套到层到户的基础功能。
# 示例
const floorHeight = 8; //场景的楼层每层高度。
const buildingLayer = new aimap.LuminousBuilding({
mode: '3d',
data: [{
coordinates: [[[121.1, 31.2], [121.1, 31.3], [121.2, 31.3], [121.2, 31.2], [121.1, 31.2]]]
}, {
coordinates: [[[121.1, 31.2], [121.1, 31.3], [121.0, 31.3], [121.0, 31.2], [121.1, 31.2]]]
}],
style: {
"building-height": 100, //建筑高度
"building-opacity": 1, //建筑透明度
"building-base": 0, //建筑底部海拔高度
"building-luminous-bright": "#000", // 自发光暗部颜色,
"building-luminous-dark": "#fff", // 自发光亮部颜色,
},
floor: {
height: floorHeight, //分层高度
"outline-color": "#fff", //分层高亮边缘颜色
"pick-color": "#fff", //楼层选中颜色
"hover-color": "#fff", //交互悬停楼层颜色
},
map
});
//建筑图层的楼层点击事件
buildingLayer.on("floorclick", (e) => {
//点击选中的feature
const [feature] = e.features;
//设置样式过滤，隐藏选中的feature对应的楼栋
layer.setStyle({
"building-opacity": ['case', ['==', ['get', 'id'], feature.properties.id], 0, 1]
})
//按照分户规则，裁切选中的feature
const cutFeatures = window.Threebox.compute.cut(
feature,
[1, 2, 2], //裁切比例
150 //裁切角度
);
//拼接分户的Polygon数据
const cutData = {
type: "FeatureCollection",
features: cutFeatures,
};
//创建分户室内图层
indoorLayer = new aimap.IndoorLayer({
mode: "3d",
data: cutData, // 分户的Polygon数据
joinData: [{members: 0}, {members: 3}, {members: 5}], // 每户加入的业务数据
style: {
"floor-base": Math.floor(e.floor - 1) * floorHeight, // 根据事件传参的选中楼层计算高度
"floor-height": floorHeight, //高度
"floor-opacity": 1, //楼层透明度
"floor-top-opacity": 0, //楼层顶部透明度
"floor-color": [ //根据加入的业务数据区分每户颜色样式效果
"interpolate",
["linear"],
["get", "members"],
0,
["to-color", "#1E9600"],
2,
["to-color", "#FFF200"],
4,
["to-color", "#FF0000"],
]
},
map
})
});
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
# joinData 接口
setJoinData(data)
设置图层数据的关联数据，关联数据可用于配置样式。一般情况下，关联数据是一些用户自有数据，通过与固定的地理数据相结合来做展示。
参数
data(Data)：用户关联的数据，使用数组形式。数组元素为有相同字段的对象。
返回值
IndoorLayer：this