# 夜光效果建筑(LuminousBuilding)
夜光效果建筑图层相当于夜光效果拉伸图层的特化,图层接口延用拉伸图层的同时简化样式的配置,并额外支持分层交互功能。
# 示例
const layer = 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: 1, //分层高度
"outline-color": "#fff", //分层高亮边缘颜色
"pick-color": "#fff", //楼层选中颜色
"hover-color": "#fff", //交互悬停楼层颜色
},
map
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 夜光效果建筑样式说明
Extrusion样式名 | 取值范围 | 说明 |
---|---|---|
building-luminous-bright | color | 夜光效果亮部颜色。 |
building-luminous-dark | color | 夜光效果暗部颜色。 |
building-base | 0~ | 海拔高度 |
building-height | 0~ | 拉伸立体高度 |
building-opacity | 0~1 | 透明度 |
height | 0~[extrusion-height] | floor额外样式。 每层楼的高度,单位与extrusion-height相同。0等效于不分层。 |
outline-color | color | floor额外样式。 分层边缘线颜色。 |
pick-color | color | floor额外样式。 分层选中颜色。 |
hover-color | color | floor额外样式。 分层悬停颜色。 |
# 楼层拾取事件
layer.on("floorclick", (e) => {
//e.features 选中的feature
//e.floor 选中的楼层层数
})
1
2
3
4
2
3
4
# 设置选中楼层
//配合楼层点击事件使用
layer.on("floorclick", (e) => {
layer.setPick(e); //设置选中楼层
});
1
2
3
4
2
3
4