This is the primitive layer rendered by HexagonLayer after aggregation. Unlike the HexagonLayer, it renders one column for each data object.
The ColumnLayer can be used to render a heatmap of vertical cylinders. It renders a tessellated regular polygon centered at each given position (a "disk"), and extrude it in 3d.
import DeckGL from '@deck.gl/react';
import {ColumnLayer} from '@deck.gl/layers';
function App({data, viewState}) {
/**
* Data format:
* [
* {centroid: [-122.4, 37.7], value: 0.2},
* ...
* ]
*/
const layer = new ColumnLayer({
id: 'column-layer',
data,
diskResolution: 12,
radius: 250,
extruded: true,
pickable: true,
elevationScale: 5000,
getPosition: d => d.centroid,
getFillColor: d => [48, 128, d.value * 255, 255],
getLineColor: [0, 0, 0],
getElevation: d => d.value
});
return <DeckGL viewState={viewState}
layers={[layer]}
getTooltip={({object}) => object && `height: ${object.value * 5000}m`} />;
}
To install the dependencies from NPM:
npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers
import {ColumnLayer} from '@deck.gl/layers';
new ColumnLayer({});
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.ColumnLayer({});
Inherits from all Base Layer properties.
diskResolution
(Number, optional)20
The number of sides to render the disk as. The disk is a regular polygon that fits inside the given radius. A higher resolution will yield a smoother look close-up, but also need more resources to render.
radius
(Number, optional) 1000
Disk radius in meters.
angle
(Number, optional) 0
Disk rotation, counter-clockwise in radians.
vertices
(Array, optional)Replace the default geometry (regular polygon that fits inside the unit circle) with a custom one. The length of the array must be at least diskResolution
. Each vertex is a point [x, y]
that is the offset from the instance position, relative to the radius.
offset
([Number, Number], optional) [0, 0]
Disk offset from the position, relative to the radius. By default, the disk is centered at each position.
coverage
(Number, optional) 1
Radius multiplier, between 0 - 1. The radius of the disk is calculated by
coverage * radius
elevationScale
(Number, optional) 1
Column elevation multiplier. The elevation of column is calculated by
elevationScale * getElevation(d)
. elevationScale
is a handy property
to scale all column elevations without updating the data.
filled
(Boolean, optional)true
Whether to draw a filled column (solid fill).
stroked
(Boolean, optional)false
Whether to draw an outline around the disks. Only applies if extruded: false
.
extruded
(Boolean, optional)true
Whether to extrude the columns. If set to false
, all columns will be rendered as flat polygons.
wireframe
(Boolean, optional)false
Whether to generate a line wireframe of the column. The outline will have
"horizontal" lines closing the top and bottom polygons and a vertical line
(a "strut") for each vertex around the disk. Only applies if extruded: true
.
lineWidthUnits
(String, optional)'meters'
The units of the outline width, one of 'meters'
, 'pixels'
. When zooming in and out, meter sizes scale with the base map, and pixel sizes remain the same on screen.
lineWidthScale
(Boolean, optional) 1
The line width multiplier that multiplied to all outlines if the stroked
attribute is true
.
lineWidthMinPixels
(Number, optional) 0
The minimum outline width in pixels.
lineWidthMaxPixels
(Number, optional) The maximum outline width in 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 column, in [x, y]
. An optional third component can be used to set the elevation of the bottom.
getFillColor
(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.
getColor
.getLineColor
(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.
getColor
.getElevation
(Function|Number, optional) 1000
The elevation of each cell in meters.
getLineWidth
(Function|Number, optional) 1
The width of the outline of the column, in units specified by lineWidthUnits
(default meters). Only applies if extruded: false
and stroked: true
.