ArcGIS JS 基础教程（21）：PointCloudLayer 点云图层

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

零、写在前面

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

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

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

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

一、功能介绍

PointCloudLayer 用于加载海量激光雷达（LiDAR）扫描点云数据，支持RGB着色、强度着色、分类着色等多种渲染模式。参考：PointCloudLayer API

二、功能实现

javascript 复制代码

const layer = new PointCloudLayer({
    url: "https://.../SceneServer",
    renderer: { type: "point-cloud-rgb" }
});
map.add(layer);

三、功能应用

场景	着色模式	说明
电力巡检	分类着色	按地物类型区分
地形测绘	RGB着色	激光扫描真实色彩
古建筑扫描	强度着色	精细点云呈现

四、核心代码

📦 sample/lesson21_point_cloud.html

html 复制代码

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

    const pc = new PointCloudLayer({
        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 或跨域问题。