尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
ArcGIS JS 基础教程(19):3D Tiles 图层
ArcGIS JS 基础教程193D Tiles 图层零、写在前面一、功能介绍二、功能实现三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞给教程充电 评论提问必回 收藏下次再看一、功能介绍OGCBuildingSceneLayer是 ArcGIS JS 5.0 中专门加载3D Tiles格式的图层。3D Tiles 是当前业内最通用的海量三维数据流式加载标准支持跨平台三维数据集成。参考3D Tiles API二、功能实现constlayernewOGCBuildingSceneLayer({url:https://.../tileset.json});map.add(layer);三、功能应用场景说明Cesium→ArcGIS迁移从Cesium ion直接加载城市模型大规模流式加载BIMGIS融合3D Tiles格式BIM集成四、核心代码sample/lesson19_3d_tiles.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第19课3D Tiles 图层/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第19课3D Tiles 图层/h1divclassstatusidst3D Tiles | 加载中.../divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constOGCBuildingSceneLayerawait$arcgis.import(arcgis/core/layers/OGCBuildingSceneLayer.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:[-122.42,37.78]});window.viewview;consttilesnewOGCBuildingSceneLayer({url:https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0});map.add(tiles);view.whenLayerView(tiles).then((){view.goTo(tiles.fullExtent,{duration:2000,easing:cubic-out});document.getElementById(st).textContent3D Tiles | 已加载;}).catch((){document.getElementById(st).textContent3D Tiles | 加载失败请检查URL;});/script/body/html五、在线示例 https://southjor.github.io/arcgis-examples/lessons/lesson19.html六、关键 API 说明API说明new OGCBuildingSceneLayer({ url })加载 3D Tilestileset.jsonview.whenLayerView(layer)等待图层渲染就绪layer.fullExtent图层地理范围参考链接OGCBuildingSceneLayer API七、系列导航⬅️上一篇[https://webgis.blog.csdn.net/article/details/162663836?spm1011.2415.3001.5331)➡️下一篇ArcGIS JS 基础教程20IntegratedMeshLayer 实景网格图层小贴士OGCBuildingSceneLayer是 ArcGIS JS 5.0 中加载3D Tiles的图层类型3D Tiles 是当前最通用的海量三维数据流式标准因此非常适合 Cesium → ArcGIS 的迁移场景。与SceneLayerI3S 标准不同它读取的是tileset.json端点同样建议通过view.whenLayerView()等待就绪再goTo(fullExtent)。
RELATED

相关推荐

大语言模型核心概念与工程实践全解析

大语言模型核心概念与工程实践全解析

1. 大语言模型核心概念全景图当我在2023年首次部署企业级LLM应用时,面对纷繁复杂的技术术语曾一度陷入困惑。经过一年多的实战积累,我发现真正决定LLM应用效果的六大核心概念构成了完整的技术栈体系。这张架构图清晰展示了它们的关系:[用户输…

📅 2026/8/23 17:05:32
STM32F103 CAN总线通信实战指南

STM32F103 CAN总线通信实战指南

1. STM32F103的CAN通信基础认知 第一次接触CAN总线时,我被它的两根差分线(CAN_H和CAN_L)搞得很困惑——为什么用这么简单的物理连接就能实现可靠通信?后来在汽车电子项目中真正使用STM32F103的CAN外设后,才理解这种设计…

📅 2026/8/23 17:05:32
TMS320F2802x CPU定时器与GPIO寄存器级配置实战指南

TMS320F2802x CPU定时器与GPIO寄存器级配置实战指南

1. 项目概述 在嵌入式系统,尤其是像TI C2000系列这样的实时控制MCU开发中,CPU定时器和通用输入输出(GPIO)的配置是工程师必须掌握的核心技能。这就像盖房子的地基和门窗,地基(定时器)决定了系统…

📅 2026/8/23 17:05:32
MORE NEWS

更多资讯

📰

2026年9月手机芯片天梯榜深度解析:跑分之外,看懂真实性能差距

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

从Modbus到OPC UA:个人开发者如何快速攻克12种工控协议

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

LeetCode存在重复元素三连题:哈希表、滑动窗口与桶排序实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

Codex 连上 TaoToken 后,durable threads 还能跨任务保留上下文

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

描述清楚了再挑 AI,TaoToken 统一 DeepSeek 与 Kimi 调用

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

用FFmpeg、OBS与SRS搭建开源直播系统:推流、分发与拉流全解析

做直播对接这件事,我前前后后折腾过不少方案。最开始图省事直接买云直播服务,后来发现费用、配置自由度、还有对私有化部署的限制,一直不那么顺手。尤其是给客户做内网视频传输、设备端画面回传这类需求,云直播几乎用不起来。后来…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬