Intro to PointCloudLayer | Sample | ArcGIS Maps SDK for JavaScript

Point cloud data can be visualized using the PointCloudLayer. This sample displays a point cloud with more than 1.1 billion points gathered with LiDAR. To enable the default popup add the Popup component to the Scene and set the default-popup-template-enabled attribute.

<arcgis-popup slot="popup" default-popup-template-enabled></arcgis-popup>

Tags

3D

PointCloudLayer

arcgis-navigation-toggle

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Intro to PointCloudLayer | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.1/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <arcgis-scene>
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <arcgis-popup slot="popup" default-popup-template-enabled></arcgis-popup>
    </arcgis-scene>

    <script type="module">
      const [Map, PointCloudLayer] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/PointCloudLayer.js",
      ]);

      // Create Point Cloud Layer
      const pcLayer = new PointCloudLayer({
        portalItem: {
          // autocasts as new PortalItem()
          id: "fc3f4a4919394808830cd11df4631a54",
        },
      });

      // Create Map with the Point Cloud Layer
      const map = new Map({
        basemap: "satellite",
        ground: "world-elevation",
        layers: [pcLayer],
      });

      const viewElement = document.querySelector("arcgis-scene");
      viewElement.map = map;
      viewElement.camera = {
        heading: 210,
        tilt: 78,
        position: {
          x: -8249335,
          y: 4832005,
          z: 50.7,
          spatialReference: {
            wkid: 3857,
          },
        },
      };

      await viewElement.viewOnReady();
    </script>
  </body>
</html>