ArcGIS JS 基础教程（22）：BuildingSceneLayer 建筑场景图层

- 零、写在前面
- 一、功能介绍
- 二、功能实现
- 三、功能应用
- 四、核心代码
- 五、在线示例
- [六、关键 API 说明](#六、关键 API 说明)
- 七、系列导航

零、写在前面

📌 本系列教程完整目录 ：ArcGIS JS 系列基础教程（100个项目常用热门功能）

💡 在线示例 ：完整可运行的 HTML 示例，无需任何环境配置，可直接在浏览器中打开体验

🗂️ 专栏导航 ：收藏 + 关注，专栏文章第一时间送达

❤️ 一键三连：点赞（给教程充电）+ 评论（提问必回）+ 收藏（下次再看）

一、功能介绍

BuildingSceneLayer 专用于加载 BIM 建筑信息模型 数据，支持逐层过滤、构件高亮、属性查询。参考：BuildingSceneLayer API

二、功能实现

javascript 复制代码

const layer = new BuildingSceneLayer({ url: "https://.../SceneServer" });
map.add(layer);
layer.sublayers.forEach(s => s.definitionExpression = "BldgLevel >= 5");

三、功能应用

场景	说明
智慧楼宇	逐层浏览设备信息
建筑全生命周期	设计→施工→运维
房产展示	户型筛选可视化

四、核心代码

📦 sample/lesson22_building_scene.html

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: 8, center: [-122.42, 37.78] });
    window.view = view;

    const bsl = new BuildingSceneLayer({
        url: "https://tiles.arcgis.com/tiles/V6ZHFr3bISPEp4Tn/arcgis/rest/services/Building/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>

五、在线示例

🔗 在线体验 ：https://southjor.github.io/arcgis-examples/lessons/lesson22.html

六、关键 API 说明

API	说明
`new BuildingSceneLayer({ url })`	加载 BIM 建筑信息模型
`layer.sublayers`	建筑子图层集合（楼层/构件）
`sublayer.definitionExpression`	逐层 / 逐构件过滤

参考链接： BuildingSceneLayer API

七、系列导航

⬅️ 上一篇 ：ArcGIS JS 基础教程（21）：PointCloudLayer 点云图层

➡️ 下一篇 ：ArcGIS JS 基础教程（23）：GaussianSplatLayer 高斯泼溅图层

💡 小贴士 ：BuildingSceneLayer 专用于加载 BIM 建筑信息模型，最大价值在于 sublayers 支持逐层、逐构件过滤与高亮------例如 sublayer.definitionExpression = "BldgLevel >= 5" 只显示 5 层以上。它是智慧楼宇、建筑全生命周期管理的核心图层；同样通过 view.whenLayerView() 等待就绪再 goTo(fullExtent)。