ArcGIS JS 基础教程（21）：PointCloudLayer 点云图层
- 零、写在前面
- 一、功能介绍
- 二、功能实现
- 三、功能应用
- 四、核心代码
- 五、在线示例
- 六、关键 API 说明
- 七、系列导航
零、写在前面
📌本系列教程完整目录：ArcGIS JS 系列基础教程（100个项目常用热门功能）
💡在线示例：完整可运行的 HTML 示例，无需任何环境配置，可直接在浏览器中打开体验
🗂️专栏导航：收藏 + 关注，专栏文章第一时间送达
❤️一键三连：点赞（给教程充电）+ 评论（提问必回）+ 收藏（下次再看）
一、功能介绍
PointCloudLayer用于加载海量激光雷达（LiDAR）扫描点云数据，支持RGB着色、强度着色、分类着色等多种渲染模式。参考：PointCloudLayer API
二、功能实现
constlayer=newPointCloudLayer({url:"https://.../SceneServer",renderer:{type:"point-cloud-rgb"}});map.add(layer);三、功能应用
| 场景 | 着色模式 | 说明 |
|---|---|---|
| 电力巡检 | 分类着色 | 按地物类型区分 |
| 地形测绘 | RGB着色 | 激光扫描真实色彩 |
| 古建筑扫描 | 强度着色 | 精细点云呈现 |
四、核心代码
📦
sample/lesson21_point_cloud.html
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>第21课：PointCloudLayer 点云图层</title><linkrel="stylesheet"href="https://js.arcgis.com/5.0/esri/themes/light/main.css"><scripttype="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 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></head><body><h1class="page-title">第21课：PointCloudLayer 点云图层</h1><divclass="status"id="st">PointCloud | 加载中...</div><divid="mapContainer"></div><scripttype="module">constMap=await$arcgis.import("@arcgis/core/Map.js");constSceneView=await$arcgis.import("@arcgis/core/views/SceneView.js");constPointCloudLayer=await$arcgis.import("@arcgis/core/layers/PointCloudLayer.js");constgetTianditu=await$arcgis.import("https://openlayers.vip/examples/resources/tianditu.js");consttl=getTianditu.default({type:"vec_w"});constmap=newMap({basemap:{baseLayers:[tl.base,tl.anno]}});constview=newSceneView({container:"mapContainer",map,zoom:8,center:[-79.4,43.7]});window.view=view;constpc=newPointCloudLayer({url:"https://tiles.arcgis.com/tiles/V6ZHFr3bISPEp4Tn/arcgis/rest/services/PointCloud/SceneServer"});map.add(pc);view.whenLayerView(pc).then(()=>{view.goTo(pc.fullExtent,{duration:2000,easing:"cubic-out"});document.getElementById("st").textContent="PointCloud | 已加载点云";}).catch(()=>{document.getElementById("st").textContent="PointCloud | 加载失败";});</script></body></html>五、在线示例
🔗在线体验：https://southjor.github.io/arcgis-examples/lessons/lesson21.html
六、关键 API 说明
| API | 说明 |
|---|---|
new PointCloudLayer({ url, renderer }) | 加载 LiDAR 点云 |
renderer: { type: "point-cloud-rgb" } | RGB 着色模式 |
view.whenLayerView(layer) | 等待图层渲染就绪 |
参考链接：PointCloudLayer API
七、系列导航
⬅️上一篇：ArcGIS JS 基础教程（20）：IntegratedMeshLayer 实景网格图层
➡️下一篇：ArcGIS JS 基础教程（22）：BuildingSceneLayer 建筑场景图层
💡小贴士：
PointCloudLayer用于加载海量激光雷达（LiDAR）点云，支持 RGB 着色、强度着色、分类着色等多种渲染模式——通过renderer.type切换（point-cloud-rgb/point-cloud-intensity/point-cloud-classification）。点云数据通常很大，务必等待view.whenLayerView()完成再飞入；加载失败多为服务 URL 或跨域问题。
