ArcGIS JS 基础教程22BuildingSceneLayer 建筑场景图层零、写在前面一、功能介绍二、功能实现三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞给教程充电 评论提问必回 收藏下次再看一、功能介绍BuildingSceneLayer专用于加载BIM 建筑信息模型数据支持逐层过滤、构件高亮、属性查询。参考BuildingSceneLayer API二、功能实现constlayernewBuildingSceneLayer({url:https://gs3d.geosceneonline.cn/server/rest/services/Hosted/adminBldgBim/SceneServer/});map.add(layer);// 用 modelName 定位构件子图层再设 definitionExpression仅构件子图层有该属性layer.when((){constdoorslayer.allSublayers.find(ss.modelNameDoors);doors.definitionExpressionBldgLevel 5;});三、功能应用场景说明智慧楼宇逐层浏览设备信息建筑全生命周期设计→施工→运维房产展示户型筛选可视化四、核心代码sample/lesson22_building_scene.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第22课BuildingSceneLayer 建筑场景/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第22课BuildingSceneLayer 建筑场景/h1divclassstatusidstBuildingSceneLayer | 加载中.../divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constBuildingSceneLayerawait$arcgis.import(arcgis/core/layers/BuildingSceneLayer.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:14,center:[-83.0472,39.9982]});// BIM BuildingSceneLayerconstbslnewBuildingSceneLayer({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).textContentBuildingSceneLayer | 已加载BIM建筑;}).catch((){document.getElementById(st).textContentBuildingSceneLayer | 加载失败;});/script/body/html五、在线示例在线体验https://southjor.github.io/arcgis-examples/lessons/lesson22.html六、关键 API 说明API说明new BuildingSceneLayer({ url })加载 BIM 建筑信息模型layer.allSublayers全部子图层集合CollectionBuildingSublayer用modelName定位sublayer.definitionExpression逐构件过滤仅BuildingComponentSublayer有此属性sublayer.visible/sublayer.opacity子图层显隐与透明度参考链接BuildingSceneLayer API七、系列导航⬅️上一篇ArcGIS JS 基础教程21PointCloudLayer 点云图层➡️下一篇ArcGIS JS 基础教程23GaussianSplatLayer 高斯泼溅图层小贴士BuildingSceneLayer专用于加载 BIM 建筑信息模型核心是allSublayers先用modelName如Doors、Walls定位构件子图层再用definitionExpression逐构件过滤如BldgLevel 5只看 5 层以上。同样先用view.whenLayerView()等待就绪再goTo(fullExtent)。
ArcGIS JS 基础教程22BuildingSceneLayer 建筑场景图层零、写在前面一、功能介绍二、功能实现三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞给教程充电 评论提问必回 收藏下次再看一、功能介绍BuildingSceneLayer专用于加载BIM 建筑信息模型数据支持逐层过滤、构件高亮、属性查询。参考BuildingSceneLayer API二、功能实现constlayernewBuildingSceneLayer({url:https://gs3d.geosceneonline.cn/server/rest/services/Hosted/adminBldgBim/SceneServer/});map.add(layer);// 用 modelName 定位构件子图层再设 definitionExpression仅构件子图层有该属性layer.when((){constdoorslayer.allSublayers.find(ss.modelNameDoors);doors.definitionExpressionBldgLevel 5;});三、功能应用场景说明智慧楼宇逐层浏览设备信息建筑全生命周期设计→施工→运维房产展示户型筛选可视化四、核心代码sample/lesson22_building_scene.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第22课BuildingSceneLayer 建筑场景/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第22课BuildingSceneLayer 建筑场景/h1divclassstatusidstBuildingSceneLayer | 加载中.../divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constBuildingSceneLayerawait$arcgis.import(arcgis/core/layers/BuildingSceneLayer.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:14,center:[-83.0472,39.9982]});// BIM BuildingSceneLayerconstbslnewBuildingSceneLayer({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).textContentBuildingSceneLayer | 已加载BIM建筑;}).catch((){document.getElementById(st).textContentBuildingSceneLayer | 加载失败;});/script/body/html五、在线示例在线体验https://southjor.github.io/arcgis-examples/lessons/lesson22.html六、关键 API 说明API说明new BuildingSceneLayer({ url })加载 BIM 建筑信息模型layer.allSublayers全部子图层集合CollectionBuildingSublayer用modelName定位sublayer.definitionExpression逐构件过滤仅BuildingComponentSublayer有此属性sublayer.visible/sublayer.opacity子图层显隐与透明度参考链接BuildingSceneLayer API七、系列导航⬅️上一篇ArcGIS JS 基础教程21PointCloudLayer 点云图层➡️下一篇ArcGIS JS 基础教程23GaussianSplatLayer 高斯泼溅图层小贴士BuildingSceneLayer专用于加载 BIM 建筑信息模型核心是allSublayers先用modelName如Doors、Walls定位构件子图层再用definitionExpression逐构件过滤如BldgLevel 5只看 5 层以上。同样先用view.whenLayerView()等待就绪再goTo(fullExtent)。
