ArcGIS JS 基础教程（18）：SceneLayer 场景图层-拓冰建站

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

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

零、写在前面

📌本系列教程完整目录：ArcGIS JS 系列基础教程（100个项目常用热门功能）
💡在线示例：完整可运行的 HTML 示例，无需任何环境配置，可直接在浏览器中打开体验
🗂️专栏导航：收藏 + 关注，专栏文章第一时间送达
❤️一键三连：点赞（给教程充电）+ 评论（提问必回）+ 收藏（下次再看）

一、功能介绍

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

参考：SceneLayer API

二、功能实现

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

constlayer=newSceneLayer({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

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>第18课：SceneLayer 场景图层</title><linkrel="stylesheet"href="https://js.arcgis.com/5.0/esri/themes/light/main.css"><scripttype="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 8pxrgba(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><h1class="page-title">第18课：SceneLayer 场景图层</h1><divclass="status"id="st">SceneLayer | 加载中...</div><divid="mapContainer"></div><scripttype="module">constMap=await$arcgis.import("@arcgis/core/Map.js");constSceneView=await$arcgis.import("@arcgis/core/views/SceneView.js");constSceneLayer=await$arcgis.import("@arcgis/core/layers/SceneLayer.js");constgetTianditu=await$arcgis.import("https://openlayers.vip/examples/resources/tianditu.js");consttl=getTianditu.default({type:"vec_w"});constmap=newMap({basemap:{baseLayers:[tl.base,tl.anno]}});constview=newSceneView({container:"mapContainer",map,zoom:8,center:[-96,39]});window.view=view;// San Francisco I3S SceneLayerconstsl=newSceneLayer({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 端点可访问。