point-cloud-layer.md

PointCloudLayer

The Point Cloud Layer takes in points with 3d positions, normals and colors and renders them as spheres with a certain radius.

import DeckGL from '@deck.gl/react';
import {PointCloudLayer} from '@deck.gl/layers';

const App = ({data, viewport}) => {

  /**
   * Data format:
   * [
   *   {position: [-122.4, 37.7, 12], normal: [-1, 0, 0], color: [255, 255, 0]},
   *   ...
   * ]
   */
  const layer = new PointCloudLayer({
    id: 'point-cloud-layer',
    data,
    pickable: false,
    coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
    coordinateOrigin: [-122.4, 37.74],
    radiusPixels: 4,
    getPosition: d => d.position,
    getNormal: d => d.normal,
    getColor: d => d.color,
    onHover: ({object, x, y}) => {
      const tooltip = object.position.join(', ');
      /* Update tooltip
         http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object
      */
    }
  });

  return (<DeckGL {...viewport} layers={[layer]} />);
};

Installation

To install the dependencies from NPM:

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers

import {PointCloudLayer} from '@deck.gl/layers';
new PointCloudLayer({});

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@~7.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@~7.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@~7.0.0/dist.min.js"></script>

new deck.PointCloudLayer({});

Properties

Inherits from all Base Layer properties.

Render Options

sizeUnits (String, optional)

• Default: 'pixels'

The units of the point size, one of 'meters', 'pixels'. When zooming in and out, meter sizes scale with the base map, and pixel sizes remain the same on screen.

pointSize (Number, optional)

• Default: 10

Global radius of all points, in units specified by sizeUnits (default pixels).

material (Object, optional)

• Default: new PhongMaterial()

This is an object that contains material props for lighting effect. Check PhongMaterial for more details.

Data Accessors

getPosition (Function, optional)

• Default: object => object.position

Method called to retrieve the position of each object.

getNormal (Function|Array, optional)

• Default: [0, 0, 1]

The normal of each object, in [nx, ny, nz].

• If an array is provided, it is used as the normal for all objects.
• If a function is provided, it is called on each object to retrieve its normal.

getColor (Function|Array, optional)

• Default: [0, 0, 0, 255]

The rgba color of each object, in r, g, b, [a]. Each component is in the 0-255 range.

• If an array is provided, it is used as the color for all objects.
• If a function is provided, it is called on each object to retrieve its color.

Source

modules/layers/src/point-cloud-layer