# 真实贴图建筑(RealityBuilding)
真实贴图建筑图层相当于白模贴图拉伸图层的特化,图层接口延用拉伸图层的同时简化样式的配置,并额外支持分层交互功能。
# 示例
const layer = new aimap.RealityBuilding({
mode: '3d',
images: [{
id: "building", //图片id
type: "texture", //三维场景适用的材质类型
url: `textures/building.png`,
}],
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-texture": params.defaultTexture, //建筑贴图
"building-texture-scale": params.textureScale, //建筑贴图尺寸
},
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
23
24
25
26
27
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
# 真实贴图建筑样式说明
Extrusion样式名 | 取值范围 | 说明 |
---|---|---|
building-texture | image的id字段 | 对应图层images数据中的id字段 |
building-texture-scale | [正数,正数] | 贴图时uv方向上相对真实距离的比例 |
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