ArcGIS JS 基础教程（18）：SceneLayer 场景图层

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

零、写在前面

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

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

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

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

一、功能介绍

SceneLayer 专门用于加载 I3S 标准 的三维场景数据，如城市建筑模型、倾斜摄影、BIM 模型、点云等。支持 LOD 分级加载，在海量三维数据下保持流畅渲染，是数字孪生城市的核心图层类型。

参考：SceneLayer API

二、功能实现

核心 API： SceneLayer (@arcgis/core/layers/SceneLayer.js)。

javascript 复制代码

const layer = new SceneLayer({
    url: "https://.../SceneServer",    // I3S 服务 REST 端点
    definitionExpression: "FLOOR >= 5",// 可选过滤
    elevationInfo: { mode: "on-the-ground" }
});
map.add(layer);
// 自动飞到图层范围
view.whenLayerView(layer).then(() => view.goTo(layer.fullExtent));

三、功能应用

场景	说明
城市3D建筑	加载建筑模型，支持点击查询属性
BIM数字孪生	加载BIM I3S，逐层浏览
倾斜摄影	无人机实景网格3D展示

四、核心代码

📦 sample/lesson18_scene_layer.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>第18课：SceneLayer 场景图层</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">第18课：SceneLayer 场景图层</h1>
<div class="status" id="st">SceneLayer | 加载中...</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 SceneLayer = await $arcgis.import("@arcgis/core/layers/SceneLayer.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: [-96, 39] });
    window.view = view;

    // San Francisco I3S SceneLayer
    const sl = new SceneLayer({
        url: "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer",
        popupTemplate: { title: "SF Building" }
    });
    map.add(sl);

    view.whenLayerView(sl).then(() => {
        view.goTo(sl.fullExtent, { duration: 2000, easing: "cubic-out" });
        document.getElementById("st").textContent = "SceneLayer | 已加载旧金山建筑3D场景";
    });
</script>
</body>
</html>

五、在线示例

🔗 https://southjor.github.io/arcgis-examples/lessons/lesson18.html

六、关键 API 说明

API	说明
`new SceneLayer({ url })`	从 I3S REST 端点加载
`view.whenLayerView(layer)`	等待图层渲染就绪
`layer.fullExtent`	图层数据地理范围
`layer.definitionExpression`	SQL 过滤

参考链接： SceneLayer API

七、系列导航

⬅️ 上一篇 ：ArcGIS JS 基础教程（17）：GraphicsLayer 图形图层

➡️ 下一篇 ：ArcGIS JS 基础教程（19）：3D Tiles 图层

💡 小贴士 ：SceneLayer 基于 I3S 标准，支持 LOD 分级加载，在海量三维数据下依然流畅，是数字孪生城市的核心图层。使用时注意：① 必须通过 view.whenLayerView() 等待就绪再 goTo(fullExtent)；② definitionExpression 可像 FeatureLayer 一样做属性过滤；③ 加载失败多为服务 URL 不可达或跨域问题，先确认 SceneServer 端点可访问。