ArcGIS JS 基础教程（20）：IntegratedMeshLayer 实景网格图层
-
- 零、写在前面
- 一、功能介绍
- 二、功能实现
- 三、功能应用
- 四、核心代码
- 五、在线示例
- 六、关键 API 说明
- 七、系列导航
零、写在前面
📌 本系列教程完整目录：ArcGIS JS 系列基础教程（100个项目常用热门功能）
💡 在线示例：完整可运行的 HTML 示例，无需任何环境配置，可直接在浏览器中打开体验 🗂️ 专栏导航：收藏 + 关注，专栏文章第一时间送达 ❤️ 一键三连：点赞（给教程充电）+ 评论（提问必回）+ 收藏（下次再看）
一、功能介绍
IntegratedMeshLayer 专用于加载 I3S Integrated Mesh 数据——由无人机倾斜摄影自动化生成的高精度实景三维网格，能精确复现地表真实外观。
参考：IntegratedMeshLayer API
二、功能实现
const layer = new IntegratedMeshLayer({ url: "https://…/SceneServer" });
map.add(layer);
三、功能应用
| 城市实景底图 | 无人机倾斜摄影3D覆盖 |
| 施工现状记录 | 定期飞行对比进度 |
| 智慧园区 | 高精度园区外观 |
四、核心代码
📦 sample/lesson20_integrated_mesh.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第20课：IntegratedMeshLayer 实景网格</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">第20课：IntegratedMeshLayer 实景网格</h1>
<div class="status" id="st">IntegratedMesh | 加载中…</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 IntegratedMeshLayer = await $arcgis.import("@arcgis/core/layers/IntegratedMeshLayer.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: [114.17, 22.30] });
window.view = view;
const mesh = new IntegratedMeshLayer({
url: "https://3dws.geoscene.cn/server/rest/services/Hosted/Hongkong_IntegratedMesh_2/SceneServer"
});
map.add(mesh);
view.whenLayerView(mesh).then(() => {
view.goTo(mesh.fullExtent, { duration: 2000, easing: "cubic-out" });
document.getElementById("st").textContent = "IntegratedMesh | 已加载香港实景网格";
}).catch(() => {
document.getElementById("st").textContent = "IntegratedMesh | 加载中（网络较慢请等待）";
});
</script>
</body>
</html>
五、在线示例
🔗 在线体验：https://southjor.github.io/arcgis-examples/lessons/lesson20.html
六、关键 API 说明
| new IntegratedMeshLayer({ url }) | 加载 I3S Integrated Mesh（倾斜摄影） |
| view.whenLayerView(layer) | 等待图层渲染就绪 |
| layer.fullExtent | 图层地理范围 |
参考链接： IntegratedMeshLayer API
七、系列导航
⬅️ 上一篇：[https://webgis.blog.csdn.net/article/details/162663884?spm=1011.2415.3001.5331)
➡️ 下一篇：ArcGIS JS 基础教程（21）：PointCloudLayer 点云图层
💡 小贴士：IntegratedMeshLayer 加载的是由无人机倾斜摄影自动生成的 I3S Integrated Mesh，能精确复现地表真实外观，是城市实景底图、施工现状记录的首选。这类数据体量大，务必依赖其内置 LOD 分级加载；同样通过 view.whenLayerView() 等待就绪再 goTo(fullExtent)，并监听 catch 以提示「网络较慢请等待」。
