零、写在前面
📌 本系列教程完整目录：ArcGIS JS 系列基础教程（100个项目常用热门功能）
💡 在线示例：完整可运行的 HTML 示例，无需任何环境配置，可直接在浏览器中打开体验 🗂️ 专栏导航：收藏 + 关注，专栏文章第一时间送达 ❤️ 一键三连：点赞（给教程充电）+ 评论（提问必回）+ 收藏（下次再看）
一、功能介绍
BuildingSceneLayer 专用于加载 BIM 建筑信息模型 数据，支持逐层过滤、构件高亮、属性查询。参考：BuildingSceneLayer API
二、功能实现
const layer = new BuildingSceneLayer({
url: "https://gs3d.geosceneonline.cn/server/rest/services/Hosted/adminBldgBim/SceneServer/"
});
map.add(layer);
// 用 modelName 定位构件子图层，再设 definitionExpression（仅构件子图层有该属性）
layer.when(() => {
const doors = layer.allSublayers.find(s => s.modelName === "Doors");
doors.definitionExpression = "BldgLevel >= 5";
});
三、功能应用
| 场景 | 说明 |
|---|---|
| 智慧楼宇 | 逐层浏览设备信息 |
| 建筑全生命周期 | 设计→施工→运维 |
| 房产展示 | 户型筛选可视化 |
四、核心代码
📦
sample/lesson22_building_scene.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第22课：BuildingSceneLayer 建筑场景</title>
<link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css">
<script type="module" src="https://js.arcgis.com/5.0/"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", sans-serif; }
#mapContainer { width: 100vw; height: 100vh; }
.page-title {
position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
background: rgba(255,255,255,0.95); padding: 10px 24px; border-radius: 6px;
font-size: 18px; font-weight: bold; z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.status {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,0.7); color: white; padding: 8px 20px;
border-radius: 20px; font-size: 13px; z-index: 100; pointer-events: none;
}
</style>
</head>
<body>
<h1 class="page-title">第22课：BuildingSceneLayer 建筑场景</h1>
<div class="status" id="st">BuildingSceneLayer | 加载中...</div>
<div id="mapContainer"></div>
<script type="module">
const Map = await $arcgis.import("@arcgis/core/Map.js");
const SceneView = await $arcgis.import("@arcgis/core/views/SceneView.js");
const BuildingSceneLayer = await $arcgis.import("@arcgis/core/layers/BuildingSceneLayer.js");
const getTianditu = await $arcgis.import("https://openlayers.vip/examples/resources/tianditu.js");
const tl = getTianditu.default({ type: "vec_w" });
const map = new Map({ basemap: { baseLayers: [tl.base, tl.anno] } });
const view = new SceneView({ container: "mapContainer", map, zoom: 14, center: [-83.0472, 39.9982] });
// BIM BuildingSceneLayer
const bsl = new BuildingSceneLayer({
url: "https://gs3d.geosceneonline.cn/server/rest/services/Hosted/adminBldgBim/SceneServer/"
});
map.add(bsl);
view.whenLayerView(bsl).then(() => {
view.goTo(bsl.fullExtent, { duration: 2000, easing: "cubic-out" });
document.getElementById("st").textContent = "BuildingSceneLayer | 已加载BIM建筑";
}).catch(() => {
document.getElementById("st").textContent = "BuildingSceneLayer | 加载失败";
});
</script>
</body>
</html>
五、在线示例
六、关键 API 说明
| API | 说明 |
|---|---|
new BuildingSceneLayer({ url }) | 加载 BIM 建筑信息模型 |
layer.allSublayers | 全部子图层集合（Collection<BuildingSublayer>，用 modelName 定位） |
sublayer.definitionExpression | 逐构件过滤（仅 BuildingComponentSublayer 有此属性） |
sublayer.visible / sublayer.opacity | 子图层显隐与透明度 |
参考链接： BuildingSceneLayer API
七、系列导航
💡 小贴士：
BuildingSceneLayer专用于加载 BIM 建筑信息模型，核心是allSublayers：先用modelName（如Doors、Walls）定位构件子图层，再用definitionExpression逐构件过滤（如BldgLevel >= 5只看 5 层以上）。同样先用view.whenLayerView()等待就绪再goTo(fullExtent)。
