ArcGIS JS 基础教程18SceneLayer 场景图层零、写在前面一、功能介绍二、功能实现三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞给教程充电 评论提问必回 收藏下次再看一、功能介绍SceneLayer专门用于加载I3S 标准的三维场景数据如城市建筑模型、倾斜摄影、BIM 模型、点云等。支持LOD 分级加载在海量三维数据下保持流畅渲染是数字孪生城市的核心图层类型。参考SceneLayer API二、功能实现核心 APISceneLayer(arcgis/core/layers/SceneLayer.js)。constlayernewSceneLayer({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!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第18课SceneLayer 场景图层/titlelinkrelstylesheethrefhttps://js.arcgis.com/5.0/esri/themes/light/main.cssscripttypemodulesrchttps://js.arcgis.com/5.0//scriptstyle*{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/headbodyh1classpage-title第18课SceneLayer 场景图层/h1divclassstatusidstSceneLayer | 加载中.../divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constSceneLayerawait$arcgis.import(arcgis/core/layers/SceneLayer.js);constgetTiandituawait$arcgis.import(https://openlayers.vip/examples/resources/tianditu.js);consttlgetTianditu.default({type:vec_w});constmapnewMap({basemap:{baseLayers:[tl.base,tl.anno]}});constviewnewSceneView({container:mapContainer,map,zoom:8,center:[-96,39]});window.viewview;// San Francisco I3S SceneLayerconstslnewSceneLayer({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).textContentSceneLayer | 已加载旧金山建筑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.definitionExpressionSQL 过滤参考链接SceneLayer API七、系列导航⬅️上一篇ArcGIS JS 基础教程17GraphicsLayer 图形图层➡️下一篇ArcGIS JS 基础教程193D Tiles 图层小贴士SceneLayer基于 I3S 标准支持 LOD 分级加载在海量三维数据下依然流畅是数字孪生城市的核心图层。使用时注意① 必须通过view.whenLayerView()等待就绪再goTo(fullExtent)②definitionExpression可像 FeatureLayer 一样做属性过滤③ 加载失败多为服务 URL 不可达或跨域问题先确认 SceneServer 端点可访问。