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';
function App({data, viewState}) {
/**
* 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
});
return <DeckGL viewState={viewState}
layers={[layer]}
getTooltip={({object}) => object && object.position.join(', ')} />;
}
loaders.gl
offers a category of loaders for loading point clouds from standard formats. For example, the following code adds support for LAS/LAZ files:
import {PointCloudLayer} from '@deck.gl/layers';
import {LASLoader} from '@loaders.gl/las';
new PointCloudLayer({
...
mesh: 'path/to/pointcloud.laz',
loaders: [LASLoader]
});
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@^8.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^8.0.0/dist.min.js"></script>
new deck.PointCloudLayer({});
Inherits from all Base Layer properties.
sizeUnits
(String, optional)'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) 10
Global radius of all points, in units specified by sizeUnits
(default pixels).
material
(Object, optional)true
This is an object that contains material props for lighting effect applied on extruded polygons. Check the lighting guide for configurable settings.
getPosition
(Function, optional) object => object.position
Method called to retrieve the position of each object.
getNormal
(Function|Array, optional) [0, 0, 1]
The normal of each object, in [nx, ny, nz]
.
getColor
(Function|Array, optional) [0, 0, 0, 255]
The rgba color is in the format of [r, g, b, [a]]
. Each channel is a number between 0-255 and a
is 255 if not supplied.