ArcGIS JS 基础教程（19）：3D Tiles 图层

ArcGIS JS 基础教程（19）：3D Tiles 图层

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

零、写在前面

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

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

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

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

---

一、功能介绍

OGCBuildingSceneLayer 是 ArcGIS JS 5.0 中专门加载 3D Tiles 格式的图层。3D Tiles 是当前业内最通用的海量三维数据流式加载标准，支持跨平台三维数据集成。

参考：3D Tiles API

---

二、功能实现

const layer = new OGCBuildingSceneLayer({ url: "https://.../tileset.json" });
map.add(layer);

---

三、功能应用

场景	说明
Cesium→ArcGIS迁移	从Cesium ion直接加载
城市模型	大规模流式加载
BIM+GIS融合	3D Tiles格式BIM集成

---

四、核心代码

📦 sample/lesson19_3d_tiles.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第19课：3D Tiles 图层</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">第19课：3D Tiles 图层</h1>
<div class="status" id="st">3D Tiles | 加载中...</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 OGCBuildingSceneLayer = await $arcgis.import("@arcgis/core/layers/OGCBuildingSceneLayer.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: [-122.42, 37.78] });
    window.view = view;

    const tiles = new OGCBuildingSceneLayer({
        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").textContent = "3D Tiles | 已加载";
    }).catch(() => {
        document.getElementById("st").textContent = "3D Tiles | 加载失败，请检查URL";
    });
</script>
</body>
</html>

---

五、在线示例

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

---

六、关键 API 说明

API	说明
new OGCBuildingSceneLayer({ url })	加载 3D Tiles（tileset.json）
view.whenLayerView(layer)	等待图层渲染就绪
layer.fullExtent	图层地理范围

参考链接： OGCBuildingSceneLayer API

---

七、系列导航

⬅️ 上一篇：[https://webgis.blog.csdn.net/article/details/162663836?spm=1011.2415.3001.5331)

➡️ 下一篇 ：ArcGIS JS 基础教程（20）：IntegratedMeshLayer 实景网格图层

---

💡 小贴士 ：OGCBuildingSceneLayer 是 ArcGIS JS 5.0 中加载 3D Tiles 的图层类型，3D Tiles 是当前最通用的海量三维数据流式标准，因此非常适合 Cesium → ArcGIS 的迁移场景。与 SceneLayer（I3S 标准）不同，它读取的是 tileset.json 端点；同样建议通过 view.whenLayerView() 等待就绪再 goTo(fullExtent)。